What is state lifting in React?
Key takeaways:
State lifting involves moving shared state to the nearest common parent component when multiple children need access to it.
It centralizes state management, allowing child components to focus on rendering while the parent handles state logic.
It promotes easier debugging and understanding of code.
It encourages unidirectional data flow for consistent updates.
It increases component reusability by relying on props.
Lifting state leads to cleaner code by separating state management from presentation.
State management is a core concept of developing applications with React. A common concept that is used to manage the state of application efficiently is state lifting. In React, state refers to variables that determine the rendering of a component. Every component in React can maintain its own local state using the useState hook for functional components and this.setState hook for class components.
State lifting
Consider an example where two or more components have similar states, and we want both components to change or update together. To do this, React provides us with the concept of State lifting. In this, a state is moved up to the closest common parent of components that need to share a particular state. The state is then passed down to the components via props.
Let’s look at an example where we have two components, ListTasks and DeleteTasks, both of which need to access and modify the same piece of state, tasksList to render and delete tasks, respectively. In the code below, state lifting is achieved by managing the tasksList state in the TaskManager component, which serves as the common parent for both ListTasks and DeleteTasks components. The tasksList state is passed down as a prop to these child components. ListTasks displays the tasks while DeleteTasks uses the onDeleteTask prop to trigger a function that updates the state in TaskManager. This setup allows both components to share and manipulate the same state efficiently.
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Code explanation
In the
/react-app/src/App.jsfile, we do the following:Create a new state,
tasksList, which will contain the list of tasks and will be passed to the child components.Create a function,
deleteTask, which will delete a task fromtasksListstate based on the task ID passed to it.Pass the
tasksListstate as a prop to the child components—ListTasksandDeleteTasks.Pass the
deleteTaskfunction as a prop to theDeleteTaskscomponent.
In the
/react-app/src/ListTasks.jsfile, we do the following:Receive the
tasksListstate as a prop and loop over it to render the list of tasks.Display each task’s title.
In the
/react-app/src/DeleteTasks.jsfile, we do the following:Receive
tasksListanddeleteTaskas props.Map over
tasksListstate to render a list of tasks with a delete button next to each task title.Call the
deleteTaskfunction with the task’sidwhen the delete button is clicked, which removes the task from the list in the parent component’s state.
Advantages of state lifting
By lifting the state up, we centralize state management, making it easier to understand and debug. This also allows child components to focus purely on rendering the UI while the parent component handles all the business logic, leading to cleaner, more maintainable code.
State lifting encourages
unidirectional data flow In React, unidirectional data flow means that data moves in a single direction—from parent components to child components through props, ensuring a clear and predictable flow of data. Components become more reusable when they rely on props for data instead of maintaining their own state.
By lifting the state up, we separate the logic of state management from the presentation.
State lifting is a very useful concept in React that promotes clean, maintainable, and reusable code. By lifting the state up to the nearest common parent, we ensure a single source of truth, improved data flow, better separation of concerns, and enhanced component reusability.
Let’s test the understanding of state lifting in React with a quiz. of the following
What is the primary purpose of lifting state in React?
To create a local state in each component
To centralize state management in a common parent component
To enhance styling capabilities
To reduce the number of components in an application
Free Resources