Today’s conundrum: you want to manage state in your React app, but you don’t want to learn yet another library. I get it. It’s difficult enough to get a grasp on one thing at a time! No worries, you can do it all in React! BUT HOW, you say? Lifting state is the answer! “But I have a lot of state to manage!” No problem — we’ve got you covered. I recently worked on a large application where we managed state almost solely through this method, and it went great. Now I’ve distilled my learnings and am ready to pass them down to you all.
In the video tutorial below, we’ll go through step-by-step how to lift state with React, starting with a simple app and then building on our code to a more complex application example. If you want to grab the code before watching, head over to GitHub and download the repository!
After watching the tutorial, you may find yourself wondering if lifting state is the right approach for you. To reiterate the questions mentioned in the video, here are a few things to ask before making that decision:
How well do you know React?
If you’re just learning React, it can be confusing and overly complicated to take on learning two libraries at once. Using just React can give you a solid foundation to add on additional libraries at a later date.
How complex will your app be?
You may be building a relatively simple app that does not have a lot of logic being handled by the front end. This is a perfect example of when it makes sense to stick with only React.
You think your app may get a bit more complex, but will it have multiple nested components that need to communicate with each other?
If you are creating a simple structure that will mostly be contained by a single root parent component, this is another really good example of when to use only React.
As mentioned in the tutorial video, outside of lifting state there is also the Context API that is part of React. It is currently not recommended to be used at a more granular state management level, but can be extremely useful for more global items. Check out the React docs for more info!