What Is Lifting State Up in React?
Demonstrating lifting state up using React.js
In React, sharing state is accomplished by moving it up to the closest common ancestor of the components that need it. This is called “lifting state up.” — React Docs
Lately, I’ve been wondering what Redux would be used for in a brand-new React application in 2019, as React itself can handle state management.
I recently came across this article by Kent C. Dodds where he stated he has only ever used Redux once, for the same reason — React handles state.
Then he goes on to introduce lifting state up, which he calls a “rock-solid” solution to solving the problem of sharing state across components.
Let’s work through a code example and see what lifting state up means.
So lifting state up means lifting state from one level to the next, without necessarily making the state global. That’s how I thought state management worked, since it is similar to variable, function and block scope.
It’s good to know that React can handle state management and lifting state up without the need for an additional library dependency (Redux).
Lifting State in Vue and Angular
Of course, the concepts of context and scope apply throughout JavaScript, Check out these other demos of lifting state up:
- Vue offers additional default component-passing, according to darkylmnx: “Vue: props (+ lifting state up) parent-to-child, events child-to-parent”.
- Angular can also lift state up, according to this article by Eudes Petonnet:
- Vue Docs on State Management is a good intro to state in Vue.js:
Understanding When to Use Redux or Vuex
Of course, some use cases may benefit from Redux anyway and these guides can help you understand when Redux will be the better choice:
- Vuex (Vue’s equivalent to Redux), explained visually by Adam Jar:
- Redux can also be used with Angular according to @malcoded:
Happy coding!
Dr. Derek Austin is the author of Career Programming: How You Can Become a Successful 6-Figure Programmer in 6 Months, now available on Amazon.
