Is there a React-okay way to pass new props to children without re-rendering the parent? Nothing in the parent component is changing except that new props are being passed to that component which are being passed through to its children. I thought context might be appropriate in this situation but it seems like the documentation states otherwise.
It depends what you mean by React-okay. You can in fact use contexts for this, but I don't recommend it. It's much easier to reason about and debug props flowing down directly through your view hierarchy, and if the parent isn't changing at all the render function should be quite cheap to execute.
If it isn't cheap, you may want to rethink how you're structuring your components. For example, you may want to split off the expensive part into a separate component that only gets rendered when relevant props have actually changed, or at least secure the expensive functionality behind a conditional props check.
Related
I'm working to convert some class based code over to functional (and learning functional react along the way).
I know that I can pass references to individual variables of a component function as props to children, but is there a <Child parentPage={this} /> equivalent when using functional components?
The idea being that then a child component could call this.props.parentPage.updateValue(), instead of needing to do this.props.updateValue(). I realize that's actually more work in a simple parent -> child relationship, but when you find yourself a few generations deep, with siblings and cousins all needing to access this.props.parentPage.*.
Sounds like you want to avoid prop drilling. Without knowing the details of your code, it's hard to say what the best solution would be, but most likely you could use context for this.
Other than that, you could extract components and pass JSX as children to them. Or just keep passing the props, sometimes that's fine.
In my react application, lets say I have some data which is needed by both a parent component and its immediate child. The application uses redux for state management.
Now, in the child component, I can use useSelector and get the sate. But as I already have the information in the parent (in case it matters, I also got using useSelector), I simply pass props to the child like <Child info={someInfo} />. Here is Child is child component and someInfo is the sate information I got using useSelector.
My question is, should I pass props in this case or get the data using useSelector in child component. Moreover, will passing props be faster than instead of reading using useSelector and vice-versa?
Passing data through props makes the component a functional one or at least more functional. Such components are easier to maintain, test and reuse. It also makes it less dependent on future changes in the store structure. But, as it is often in our lives, there are no things as the only one right way. If your project contains many nested components, passing data all the way down through all layers would make code entangled and complicated.
In my practice, I always make UI components (lists, edits, grids, tables, etc.) as pure functional ones and use them inside business-logic-related components which are connected to store and perform side effects.
I think this is maybe a little opinion-based. Getting it from flux store means there is a hard coupling with store lib. If you pass in the prop, you can reuse the component in another, storeless, application. I've encountered this a lot with some of the components I've made and tend towards passing props in. But again, it can make sense in some cases where the component would never see reuse anyway.
maybe this is very basic, but I'm still new to react:
I want to have different types of components - with (possibly) no relation to each other - that re-render on changing one specific value in my application. I tried the Provider store of mobx, but of course I received warnings, that you should not change the value of stores.
So for example
<RootElem>
<SimpleComp1>
.....
<ReRenderMeOnRootElemStateChange1 />
.....
</SimpleComp1>
<SimpleComp2>
.....
<ReRenderMeOnRootElemStateChange2 />
.....
</SimpleComp2>
</RootElem>
and the re-rendered components should have acces to the new value/state of the RootElem, so that they can change based on this new value.
What is the best way to do that? Where should I store my observable value for the re-render, and how can I make components listen to it, even if they are no children of the state changing component? I dont' want to pass the props all the way down to every single component, that should re-render on changing the observable value :)
Furthermore I'm wondering if you can make a component listen to another one's changes, even if they have no relationship to the each other in the component tree (except the application's root component).
Thanks!
React components re-render automatically by default when they receive new props. So if you simply pass values from <RootElem> down your component tree via props, everything should work as intended and the sub-components will re-render with the new value.
You can control whether or not a specific component should re-render by using its shouldComponentUpdate hook. I'd say that most of the time you won't need this unless you're trying to make a specific performance optimization.
You can also pass new values to the sub-components using context, though this approach is generally discouraged unless you have some very specific use cases for it and know what you're doing.
As far as I can tell, if I pass a parent component state down to a child, then that child gets the live state of the parent.
So a change made in the state of the parent is immediately also available in the child via the prop that it came on.
Is this correct?
It's basically the same mechanism as anywhere else in the language, as you'd expect. Primitives are passed by value and variables that aren't primitives will be passed by reference.
React takes care internally of the updating of props, so that children always have the most up-to-date value of the prop.
This is the lifecycle method that is called when receiving new values for props.
However, make sure you respect the infrastructure put in place and the exposed API that React gives you.
Short answer: props are passed by reference.
The reason it can be confusing: if you change the parent's state by hand (bad practice!), the object will change in the child component, too. But won't trigger re-render! (The child component won't "know" that its props has changed.) So you won't see the UI change.
However if you change the parent's state with setState (the preferred practice), the child will be notified, that it must re-render itself.
If you pass down the state of the component as props to its child, then if the state of the parent component changes it re-renders, which will also re-render its children with the refreshed properties. The children don't directly listen for the state change like the parent does, they are simply re-rendered as as result of its parents state change and updated.
Take a look at this - https://facebook.github.io/react/docs/multiple-components.html. It will help you get your head round how this concept works. Hope this helps!
When the state of a component is changed, then the component is re-rendered by React. While doing that , its child components are also re-rendered, which causes changes in them also.
No, they will not be duplicated, you will access to those props by reference, because they come from a single object wich defines them, and then pass them as a reference to the child objects.
You can take a look to the official documentation here: https://reactjs.org/docs/react-component.html.
I suggest to use a stateless mechanism to handle large data, expecially if shared.
Personally I use mobx (https://github.com/mobxjs/mobx) wich is a great framework to create stateless apps.
With this method you can handle data and state updates in a single component, called Store, and use components to render html only, and not to handle data, wich is a great boost on application performances.
I've got a component that needs to read a state variable belonging to its child at some point.
Should this particular state variable rather be moved to the parent, and be changed via a callback?
As I see it, and some of this is likely wrong, these are the pros and cons of moving the state to the parent:
Pro:
This seems to adhere more to the unidirectional data flow mantra of react.
Con: Other children of the parent will be rerendered on state change (not in the real DOM, but it may still have a performance impact).
What is the best practice here?
Best practices for data flows are:
From parent to child: via props
From child to parent: via handlers
From unrelated component to another: via message bus
e.g.
<Child onEvent={this.handleEvent}>
The parent has:
handleEvent: function(dataFromChild) {
}
As Petka noted, state should live on top.
Thinking in React explains it well.
Other children of the parent will be rerendered on state change (not in the real DOM, but it may still have a performance impact).
You're unlikely to notice this unless you do this at 60fps.
And if you do, React has you covered with optional shouldComponentUpdate (and PureRenderMixin).