I am relatively new to React and I was wondering if you could pass components across the component tree without having to create the state variable in the parent component.
Things I understand:
You could pass props down from parent to child.
You cannot pass props up from child to parent.
I also understand that you could use context API's to avoid prop drilling. However, the Context.Provider has to be above the Context.Consumer. So that would mean I would have to create the state variables in the parent class. If I want to share the same state between two child components.
There have been times in my React application where I was forced to create a state variable in the parent to share it across two child components. Is there any way I could use the context API or some other method to create the state variable in one of the child components and share that state with another child component.
Related
I have a situation where one component change is supposed to update other sibling components under same parent. Should I use context or Redux for this?
Or is it okay pass props around via callback function to parent and then to children?
Redux is likely overkill if you only have a small hierarchy of a few components. Use React context to avoid prop drilling where you pass the same props through multiple layers. If you only have one layer, it's fine to use callbacks to pass to children.
If you need global access to this state use Redux (or similar). If you need more localized access to the state use React context.
To answer your question, since they have the same parent it's better to pass callbacks to the children.
So here's my take on this situation. Both Redux and Context help with state management and propagation across components. So here's the deal
Use Redux, if you want the data to be used outside the parent component. For instance, you want the state to be available across your whole application (Global Data or data that is required in 2 or more unrelated components).
Use Context, if only the children of the current component require the data. Not the siblings, not other components in the application - ONLY CHILDREN.
Use props to pass it down to children, only if your component tree is 1 or 2 levels deep. If it is more, use Context
Is there any easier way to get ref from a child component and use it in the parent component without going down to deep in the nested components?
Imagine you have a parent component and the targeted child is like 5 level down. Then I have to access it like this from the parent component.
this.myRef.current.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild
I'm new in React Hooks and I'm wonder how its better to do some things. Example the state how its better to keep the state in parent and to pass to the child or to put the state in every component where I need the state? Witch is the good option?
Generally, if you use some state values in only one component, you can make it the state of that specific component, making it self-contained.
If a state is used in a component and some of its child components, it's a good idea to store it as a state in the component and pass it as props to child components.
If a state is used in multiple (relatively unrelated) components in an app, you can store it as a global state (through redux or context API) and use it in those components.
I have 2 stateful class-based components nested within my main app, a parent class-based component. From child component 1, I've successfully called a parent callback method. From within that parent callback I want to call a method of child component 2, so I can setState of #2 without re-rendering the parent component. I've seen that many devs make the children stateless or even just omit them. However, React encourages devs to "componenatize" ... pointers plz!
if that's the case then you shoud consider lifting the state up to the parent: https://reactjs.org/docs/lifting-state-up.html
your child component should only then call parent methods to update the state, that way, you will have a unidirectional flow of data as what a react app should be. Basically, it encourages you to have a single source of truth and ensure synchronisation of data across your app. Besides it removes unnecessary logic like what you are doing right now:
What does the "single source of truth" mean?
Storing the data in the parent's state and then allowing both children to update it via setStates wouldn't violate the concept of "componentizing" as long as the two children have narrowly declared inputs. If one child needs to update data inside another child, you can jump up a context level and store it in the parent- then an update of the data from either child will trigger a render of both children ensuring the display stays synchronized with the data while keeping the data in a single place (with the parent instead of split between the children).
Bingo, yes I can use a "React ref" to call an instance method of a child component. A ref is an attribute on a component instance. So, right now my child component uses its componentDidUpdate to call a callback in my parent, and the parent callback then uses refs to call an "update" method of specific child components. These update methods setState on child component and voila.
So a colleague explained that calling setState in my main app actually will call setState on all children components (related by JSX expressions). Even though I liked the idea of nesting my event handlers within their relevant child components, it seems that the best practice pattern is to have all handlers in the main app, setState in the main app, then let React do its thing
I have two components in my react application, one is parent and the second is the child.
I pass fakedata state as a props to child and then in child component save this as state of child component. But when I change something in child it's affect on parent state and I don't want this I want it's only effect on child state.
This is how I call child component from parent :
<FakeDataAddEditComponent {...this.props} fakedata={{...this.state.fakedata}} />
and in child component this is how I set fakedata props to state :
componentDidMount() {
this.setState({fakedata:{...this.props.fakedata}},()=>{
})
}
but when I change fakedata state in child it's also changend in fakedata of parent and I don't want this.
To answer your question directly, the reason you are seeing this behaviour is because Javascript passes a reference to the original object down the props and to the state of child component. When you update the child component it is the same instance as the parent is holding.
To fix the problem you should use Object.assign to make a copy of the object, however keep in ming that you will run into problems with nested objects.
Also, if parent object mutates the state in any way after the child state changed it will pass old object as props to the child.
In general you're trying to do something you shouldn't do because you will run into trouble.
On a high level you should go for a proper state management solution like Redux of Flux.