Back to: ReactJS Tutorials
Lifting State Up in React with Examples
In this article, I am going to discuss Lifting the State Up in React with Examples. Please read our previous article where we discussed Child-to-Parent Component Communication in React (Bottom-up).
Lifting State Up in React
In the previous article, we learned about a very important concept of moving data from a child to a parent component by utilizing props to receive a function from the parent component which we call in the child component. And this is related to another key concept that we’ve already used without even knowing. And that’s a concept called Lifting State Up. So, what is that about?
Consider the above basic Component Tree which is roughly what we have in our demo application where we have an App component which in turn renders an Expenses and a NewExpense component.
Now, in this case, the NewExpense component is a component that generates some data, some state. In our example application, we are fetching some user input here. It is quite common that you generate or fetch data in a component but you may not need that data in that component. Instead, we need it in another component, in the Expenses component. That’s where this generated data is needed in the end, slightly transformed, packed into an object but it is the data we fetch in NewExpense.
So, we would like to hand that data over but that doesn’t work like this because we have no direct connection between two sibling components. Instead, as you learned by now, we can only communicate from parent to child and from child to parent. That’s why in such cases as we have here, we utilize the closest component, the closest parent component which has direct or indirect access to both involved components, in this case, the App component.
The app component in our application has access to both the components, NewExpense and the Expenses component. Because it renders both components in its returned JSX code, that’s why we want to utilize that. Because we can now store our state in that closest involved component, so, in that parent component has access to both involved components by lifting our state up.
So by passing our generated state data from the NewExpense to the App component. And that’s what we’re already doing in our demo application. We’re doing this by utilizing props, by calling the function we receive on the onAddExpense prop.
That alone is not lifting the state up. That’s just calling a function we receive through props. But then we do something important. We pass the data (expenseData) to this function (onAddExpense). So we’re passing the data to the function, and by doing that we’re lifting that data, that state up. We’re not keeping it in the NewExpense component. We’re not keeping expenseData there, instead, we are lifting it up to the App component. so that in there we can use the data. For example, as we use it in the addExpenseHandler function,
As shown above, we are logging it to the console. For now, we’re not managing that data as a state here, instead, we’re just logging it to a console. But in the next section, we are going to manage the whole array of expenses as a state and we are going to add the expense to that array.
We are already passing down that array to the expenses component because that’s the other part of this Lifting the State Up concept. We are Lifting the State Up. We are passing data up to some parent component because we need that data directly in the app component or as it’s the case in our demo application. And as it is quite common because we want to pass that data down to another component via props. That’s what we did in the last article. And that is an important concept. You will hear the term Lifting the State Up quite a bit when you are working with React and also later in our articles.
And whenever you hear that, it is about moving data from a child component to some parent component to either use it there or pass it down to some other child component. And as a side note, this does not work if you have the app component which interacts with two direct child components. Instead in above mentioned example, the NewExpense component is not the component that generates the data which we’re passing up. Instead, it’s the ExpenseForm component that generates that data. It’s that component that works with the state and which fetches the user input and stores the user input. And that component then passes up that fetched data to the NewExpense component. So here we are already lifting state up and then we’re lifting it up even further to the App component. Since it’s the app component which is the first component inline it has not only access to the NewExpense and ExpenseForm component but also to the Expenses component.
And since the Expenses component is the component where we need the data in the end, it is the app component where we want to lift our state up to. Now, as you will see throughout the articles, it’s not always that root app component to which you want to lift your state up. Instead, the goal is to lift it up as high as necessary in your Component Tree until you have a component that has both access to the components that generate data as well as the components that need data. That might be the app component, but that could also be another component. You are going to see those quite frequently in upcoming articles.
In the next article, I am going to discuss the Derived Computed State in React with Examples. Here, in this article, I try to explain Lifting State Up in React with Examples. I hope you enjoy this Lifting State Up in React article.