Let's understand how lifting up the state works and why it's so important.
Let's understand with an example, let's use the checkout part of any edTech course interface. And let's say that we started by building this promotions component where the user can input coupon codes that will then be added to a list of applied coupons. So that sounds like we need a piece of state called coupons right here, right? So that coupon state is now local to the promotions component along with a set coupons function coming from the use state. Now next we set out to build the total component, but here we quickly realize that the total component also needs access to the coupon state. Otherwise, without knowing which coupons have been applied, how would the total component know what discounts to apply and what price to display? And so here we encounter a problem. How do we give the total component access to the coupon state? Because in React, we have a one-way data flow. So data can only flow down from parents to children but not sideways to sibling components. Therefore, we cannot simply pass the coupon data as props to the total component. That's just not possible. And so, we need a way of sharing state with other components that are further up or sideways in the component tree.
Lifting up state is the technique that will solve this problem.
Well, lifting the state up simply means placing some state in a component that is a parent of both components that need the piece of state in question. So in this example, we would remove the coupon state from promotions and place it in the checkout component. And just like this, we have lifted the state up to the closest common parent of total and promotions. And now, giving both these components access to the state is as easy as passing it down using props, and that's it. So by lifting the state up, we have just successfully shared one piece of state with multiple components in different positions in the component tree, which is something that we need to do all the time in React apps. And so it's really important that you get used to this pattern and remember that we need it in the first place as a direct consequence of React one-way data flow.
But now, what happens when we want to add a new coupon to the coupon state? Or in other words, what happens when the user inputs a new coupon and clicks on the apply button? Well, we want to update the coupon state, right? But how do we do that now? Because after lifting this state up, it now lives in the parent component so not in the promotions component anymore. Promotions only receive this data via props, but as you know, we cannot mutate props. So that's one of the hard rules of React. So we're asking here if we have a one-way data flow, so if data can only flow from parents to children, how can the child component promotions update the state that lives in the parent component checkout? Well, actually, the solution is quite simple. All we have to do is also pass the set coupons function down as a prop to the components which need to update the state. And so now that we have the set coupons function in promotions, once a new coupon is added, we can simply use setCoupons to update the state that lives in the parent component.
We can call this technique passing down a setter function, child-to-parent communication, or also inverse data flow. Inverse because usually data only flows down, but here we basically have a trick that allows us to basically have the data flowing up as well. Now, of course, this is not truly flowing up, but this workaround of passing down the setter function and using it to update the parent state is pretty close to actually having data flowing up the tree.