One large React prop vs. numerous smaller ones? [closed] - reactjs

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I have one component that takes quite a bit of data. I have an option to either create 12 props to send down to the child component OR create an object with 12 keys and send the object down by itself.
I honestly see no difference trying one or the other, so I'm trying to get some input as to which setup is better for performance.

Personally, I wouldn't worry about the performance aspect of it until it was obviously an issue. Pre-optimisation can be a bit like falling down the rabbit hole.
Without knowing more about the actual object, I would say that 1 big object (which has 12 keys) would be much to worry about.
Instead, I would pass the object down as one prop and then use destructuring as necessary to any further children.
i.e:
<ChildComponent largeObject={someObject} />
and in ChildComponent:
const { oneKey, twoKey, threeKey } = this.props.largeObject;

Related

Can someone help me here? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 months ago.
Improve this question
Im trying to filter some type of data into 3, full history, sent, and received. Im using a useState hook, already using the set, but dont know where to use the first variable. And its printing me all the transactions.
im doing a statement verifying if the transaction inside the array is none(history, received(credit), or sent(debit, and placing that into an empty array.
And here im trying to use the variable and the hook with a component that i created.
idk if i have to put something different in the 'data' prop.
Thanks in advance :)
flatlist type should be TransactionDirection
<FlatList<TransactionDirection>>

Is State hoisting and lifting the state in REACT the same thing? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Is the process of moving the state up (lifting the state) into a common ancestor component the same thing as state hoisting?
Yes, https://reactpatterns.js.org/docs/state-hoisting/
As the example above you are encouraged to lift state up, if two
components need to act on the same data or need to use the same
callback.
So you should create a common ancestor in this common ancestor and
then use the state to manage all the data and callbacks that children
will use in rendering as following.
Also this - https://reactjs.org/docs/lifting-state-up.html

Define options for type with PropTypes [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Is there a way to define multiple options (to serve as an internal overview / guide) when using PropTypes, as a companion for defaultProps?
I usually just add comments to serve as an overview of the possible options, but is there a better way?
E.g. when I have a button that can take different size (props) arguments such as standard, large, subtle, fitToContent, ...
As a sidenote / side question — I want / need to learn TypeScript, is this something that can be done with TS?
In TypeScript there is something called literal types it's mean that it's will strict you to output you want like the example #konekoy show in the comment
size: "standard" | "large" | " subtle" | etc.
I recommend you start learning TypeScript it's not that hard
and another bonus with TypeScript the IDE works with it perfectly and can make much better IntelliSense.
there will be a little difference between React with js and ts but it's really minor

What is Best Process to develop Form with 15 fields, Specially using React JS, semantic UI with out Redux or any other else [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am trying to create a long-form page that will have 5 fields per each page with continue button. What is best format for coding alignment especially in react js with functional components only.
I have 3 approaches in mind.
Keeping each page fields in different pages like page1, page2, page3 and then access in parent.
Keeping all fields in one file and accessing those using switch case by passing page numbers.
Keeping all fields in one page and loading all fields, but hiding some fields based on the page number.
If there is any other best standard approach that will reduce future maintenance, and fewer coding changes, with less duplicate code so... on please prescribe hear.
The best approach according to me would be making a single component that will hold all the form values and conditionally render them on screen. What you can do is, create three div's that will render conditionally like:
{ step === 1 && <div>{"Your form here"}</div>}
The best part of this approach is that you will have all the form data at single place. And then you can easily pass that data to an API and make a request.

String Pattern Matching Algorithm Used in Different Applications [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to know which algorithm is used by the following Applications or WebSite for String Pattern Matching, I have already search by title but nothing found, i want to learn and understand the real time implementation of String Pattern Matching algorithm used by various Applications.
1.Notepad
2.Adobe Reader
3.Web Browsers
4.URL locator
5.StackOverFlow WebSite
Thanks in advance......
For instance a single string matching is the z-algorithm. It's the fastest matcher.

Resources