React.js "Lifting State Up" Explained

Lifting state up in React is a key feature that most React.js beginners struggle with. It's quite normal for a beginner starting to learn a framework or a new language to struggle with some concept surrounding certain functionalities. With “Lifting State Up” in React.js, it is very handy in building a scalable front-end of an application.

What Does “Lifting State Up” in React.js Mean?

Most beginners in the quest to learn how props works, can easily understand how content(data) is passed from a parent component to its child component. That is very important. But what if you want to do it the other way round, thus passing content from “Child Component” to its “Parent Component” so that the other “Child Components” who are directly related to the parent Component get access to the data. This brings in the concept of “Lifting State Up”. Lifting state up enables you to pass state data generated by a "Child Component" to its closest “Parent Component”.

We have an “App Component” which renders two child components “Expense Component” and “New Expense Component”. The “New Expense Component” generates some states by fetching some user input. Usually, in an application, you use a form to generate data but you might not need it in that component, instead, we use the data in another component, in our case the “Expense Component” which displays all the expenses generated in our “New Expense Component”.

In a React.js application, if two components are not directly related, you cannot pass data generated between the two components. For example in our demo app, data cannot be shared between “New Expense Component” and “Expense Component”. We can only communicate from child to parent and from parent to child.

To be able to communicate between these two components, the data needs to pass through the closest parent which has access to these two child components. The App Component in our case has direct access to both the “New Expense Component” and the “Expense Component”. So now we can pass our generated state data from “New Expense Component” to the “App Component”.

Then subsequently pass the state data generated by the “New Expense ” to the “Expense Data” through the “App Component”. We do this utilizing props.