Shemona Singh
Posted on July 18, 2020
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.
Posted on July 18, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 25, 2024