Lifting State
We have already covered the basics of state management in React in the previous chapters by using React's local state, so this chapter will dig a bit deeper. In this lesson, we'll learn what lifting state in React is and how it is used.
We'll cover the following
What does ‘Lifting State’ mean?
Only the App component is a stateful ES6 component in your application. It handles a lot of application state and logic in its class methods. Moreover, we pass a lot of properties to the Table component, most of which are only used in there. It’s not important that the App component knows about them, so the sort functionality could be moved into the Table component.
Moving a sub-state from one component to another is known as lifting state. We want to move state that isn’t used in the App component into the Table component, down from parent to child component. To deal with state and class methods in the Table component, it has to become an ES6 class component.
Refactoring the Table component
Refactoring from functional stateless components to ES6 class components is simple. Your Table component as a functional stateless component:
Get hands-on with 1400+ tech skills courses.