When working on a React application, there are a few options we have for managing its state. The three that are most commonly discussed are:
Composition
Context
Redux
All three seem to be developed out of comparable schools of thought when passing data. They can all be applied in some way to the scenario of needing to share data that must be considered “global” for a tree of React components that require it - such as the current authenticated user, a site's theme, or a language preference.
There also seems to be a bit of a performance discrepancy between Redux and Context when scaling an application.
This begs the question, in what condition of my application will using _____ state management aid me best?
Composition
( most simple )
Composition is a practice in React when a more specific component renders a more generic one and configures it with props. It's great for smaller applications, particularly when you want to avoid passing a select few props through many levels. It gives you an acceptable amount of flexibility to customize a component.
Good use case
It's best contained to a select few components - a larger practice of it throughout an app can start becoming messy to keep track of.
Context
( simple )
Best for relatively simple apps where there are a few pages at most, as it was originally made for higher read operations than write operations as well as to avoid the problems that come with prop drilling.
Good use case
A classic example is needing to change a theme or when some data needs to be accessible by many components at differently nested levels. Apply it sparingly because it makes component reuse more difficult. It also forces a reload of the page, whereas our next option won’t do that.
Redux
( least simple )
Redux is definitely building a huge fanbase, but if you assess the complexity of your application and using one of the previous two methods (or anything else) handles your state adequately and cleanly, then Redux can seem excessive.
Good use case
Ideal for more complex apps, or if you’re planning on scaling your application in the future. Its powerful global state management abilities handles data coming from multiple endpoints, allowing you to influence a single component/view.
Closing Thoughts
Hopefully the state management of whatever React application you are building can configure into one of these categories. They each have their own ways of handling state, but a similar philosophy of "threading the data" through to whomever needs it.
Top comments (7)
In my experience redux can work well for small apps, but it's very hard to manage when your app grows.
The best option I have found for managing state in larger apps is to let each page manage its own state, and use context for things like auth, that spans multiple pages.
I have used redux a lot, but at this point I don't think I can come up with a scenario where I would recommend it.
I like that pattern - letting each page manage its own state!
Do you feel like Redux can be overkill?
No I think it solves the wrong problem.
Redux separates your state logic from your view logic. Initially that sounds simpler, but in actuality that doesn't help you when your app scales.
Each new feature you add to your app will lost likely require both view and state updates, so it's usually much more scalable to split your code by feature, than by state/view.
I figured Context API would mostly be enough for every day tasks unless as you mentioned there is a way more complex app that interfers with a REST API mostly
Have you found out about some simpler Redux alternatives, as in library alternatives?
I checked out MobX the other day, it's much more simpler to comperhand with :)
Oh I haven't heard of MobX! Thanks for the recommendation :) If you were to add it to the list, what kind of application do you think would be a good use case?
Any application that needs Redux, would be a good MobX choice :D
So if your application is bound to have requests to a REST API backend which is more complex and you have that content in multiple components across the app, you can stash it in global state that you define with MobX/Redux
MobX has fine docs and easy to implement structure, I believe its a good replacment. Althoughh, Redux is definitely more popular 😄
Great to know - the “observables” concept seems neat. I’ll have to look into applying it one day!