Lifting and colocating React State

Share this video with your friends

Send Tweet

A common question from React beginners is how to share state between two sibling components. The answer is to Lift the state which basically amounts to finding the lowest common parent shared between the two components and placing the state management there, and then passing the state and a mechanism for updating that state down into the components that need it.

As a community we’re pretty good at doing this and it becomes natural over time. One thing that we typically have trouble remembering to do is to push state back down (or colocate state). In this lesson we’ll learn how to lift state up and push state back down.

Greg Miller
Greg Miller
~ 5 years ago

I have a problem understanding the concept of ‘least common ancestor.’ The phrasing that works for me is ‘closest common parent,’ as described in this post, https://fjorgedigital.com/insights/blog/the-philosophy-of-react-a-single-source-of-truth/. The diagrams show the necessary relationship and to pass values as props from parent to children.

Wes Martin
Wes Martin
~ 4 years ago

Can't watch this video. Every 2 seconds it skips 5 seconds ahead

~ a year ago

qq, is it correct that App knows the implementation of FavoriteAnimal? I mean, App doesn't know that the event contains a target property, and the target property contains a value property