6 ways to manage your React app state

You know what you need to build and you know you’re building it in React, but how are you going to manage your data?

Let’s take a look at some of the ways to manage state in React to find out the pros and cons of each method.

Vanilla React

Is is cheating to have this? Depending on your apps functionality, you might not need a state manager at all. React works perfectly well all on its own.

If you are building something simple like a brochure site or other website that isn’t data intensive and doesn’t have to watch for changes in different areas of the UI, you can probably get away with just using Vanilla React.

I would like to amend this: don’t use Redux until you have problems with vanilla React. — Dan Abramov

Best for

• Simple projects without a lot of data flying around.

MobX

MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming.

Wut?

MobX can be split into 3 areas:

• Observables are the properties in your state.
• Observers are your React components. They display some UI based on the values in your state.
• Actions are functions dispatched by your Observers in order to trigger updates in your observables.

There’s a much better 10 minute introduction to get you fired up with MobX and React on the MobX site.

Best for

• Small, experienced, teams.
• Rapid development.

Redux

Redux is a predictable state container for JavaScript apps.

OK that sounds a bit less confusing than MobX, but it doesn’t really tell us much.

Redux is a state container that stores all the data for your app. The Redux state is read only, it cannot be updated directly. The state is updated by a reducer, which takes the old state and an action, then creates a new state.

This creates a unidirectional data flow, which makes it easier to understand where your data is coming from or being modified.

Dan Abramov, one of the Redux creators, has a great tutorial on getting started with Redux.

Best for

• Large teams
• Complex apps.

Relay

A JavaScript framework for building data-driven React applications.

Relay is still pretty new on the scene, even though it has been around for a few years. Whilst Redux and MobX can be used with any view library, Relay is focused on React only. Both Redux and Relay are inspired by the Flux architecture.

Aside: Is is just me or do the developers at Facebook keep inventing new state management systems every couple of years?

Relay is pretty similar to Redux in that is has a central store containing the application data. The store is updated by dispatching mutations (instead of actions) and the data is passed down into your React components.

The major difference is that Relay doesn’t let you manage your own state. Components use GraphQL query fragments to declare their data needs and Relay gathers them all up into an API request before automagically populating your state.

Best for

• Large teams using GraphQL APIs.
• Facebook.

Apollo

Apollo Client is the ultra-flexible, community-driven GraphQL client for React, JavaScript, and native platforms.

Apollo is, like Relay, a GraphQL client for your React app. You can connect components to your GraphQL API at whatever level makes the most sense to you, then Apollo will control fetching the data, normalising it, and managing your state.

You can connect your components to your API and your state at the same time and Apollo will handle the data.

Coming from all the boilerplate of Redux, this really felt like a breath of fresh air.

Getting started with Apollo.

Best for

• Small teams using GraphQL APIs.
• If Relay didn’t work for your flow.

Unstated

State so simple, it goes without saying.

Unstated is a new state management library for React, made as a rebellion against the “crazy architecture and methodology” of the above methods.

Unstated is designed to build on top of the patterns already set out by React components and context.

Unstated has Container components that work like a Redux store, Subscribe components that connect to that store and Provider components that adds data to the tree via context.

Unstated is the setState of React state management.

Best for

• People confused by state management.
• Small teams who need a simple state solution.

Round up

There’s no “best way” to manage your state in React, which is why you get to choose from all these shiny tools.

Have a read up on each, and figure out what’s best for your team.

At Etch we build web software using a variety of tools from REST/Redux to GraphQL/Apollo.

Let’s see if we can help your team today hey@etch.co