The idea of state is one of the trickier things to nail down when you’re starting with React, and as your app grows, so do your state management needs.
In this post I’ll give you the Grand Tour of state management options in React and help you decide which one to use in your project.
What is State?
Just so we’re on the same page, let’s talk about state for a second.
Every interactive app involves responding to events, like when the user clicks a button, and a sidebar closes. Or someone sends a message, and it appears in a chat window.
As these events happen, and the app is updated to reflect them, we say the state of the app has changed. The app looks different than it did before, or it’s in a new mode behind the scenes.
Things like, “whether the sidebar is open or closed” and “the messages in the chat box” are pieces of state. In programming terms, you’d probably have an
isSidebarOpen variable somewhere in the app set to
true, and a
chatMessages array with the messages you’ve received.
At any given moment, broadly speaking, the “state of your app” is determined by all of that data. All those individual variables, whether they’re stored in local component state or some third-party state management store – that’s your app’s state.
This is the high-level concept of “app state”. We aren’t talking about React-specific stuff like
useState or Context or Redux or anything yet.