43

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?

Duke Dougal
  • 24,359
  • 31
  • 91
  • 123

5 Answers5

32

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.

Elod Szopos
  • 3,475
  • 21
  • 32
  • 1
    If child component directly(i.e without calling setStateHandler()) changes (state)prop, would state gets changed in parent component? – Rajat Aggarwal May 14 '21 at 22:46
13

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.

Csati
  • 1,251
  • 1
  • 15
  • 28
  • 1
    I am not that experienced with React. But since now everyone uses hooks and functional components, does the state change triggered using the state update function provided by useState hook trigger re-renders in the same way? Because I have seen some cases where I passed the update state function as a prop and although it updated the state when used in the child component, it sometimes did not lead to a re-render – nsrCodes Dec 08 '20 at 17:20
  • 1
    @nsrCodes, if you used a `setState` function but the UI didn't update it might mean you set there the same value again, e.g. `setState(5)` will not trigger rerender if previous state was also 5. Knowing that objects are passed by reference if you should set a completely new object, e.g. `setSomeObject({...someObject, someField: newValue})` - here I make a shallow copy with one value changed - completely new object is set and rerender will be triggered – Iorweth333 Apr 19 '22 at 15:46
  • What if I passed the primitive value _1_ as a prop, then it wouldn't reference it would be value. So props aren't always passed as reference. – Shahzad Rahim Jul 25 '22 at 16:17
3

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!

Martin McKeaveney
  • 498
  • 2
  • 13
  • In the child component, I want to detect if something changed - a field value. So I pass that information down via props from parent to child. BUT the child ALREADY has the changed field value because the parent state comes down in the props. – Duke Dougal Jun 26 '16 at 11:12
  • @DukeDougal You can refer to my answer for the lifecycle method that you can use to intercept those incoming changes. You can check for your changes there. The function is called with the new values of the props and you will still have access to the old values using the `this.props` reference that will point to your component. – Elod Szopos Jun 26 '16 at 12:48
0

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.

Shubham Jain
  • 1,864
  • 2
  • 14
  • 24
0

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.

nicola_castellani
  • 62
  • 4