Life without Redux: An existential exploration into React’s “new” context API

ex·is·ten·tial
/ˌeɡzəˈsten(t)SH(ə)l/
* Logic
(of a proposition) affirming or implying the existence of a thing.

React’s context API has always been a part of React — it’s just been buried deep within its code bowels. There was also strong encouragement from the React development team NOT TO USE IT EVER.

But the new context API allows you to use components to pass values to consumers, from providers, instead of either prop drilling or developing a custom context solution. This makes it much easier to work with. This also allows components that are farther downstream in the tree to re-render without relying on the shouldComponentUpdate lifecycle method and the lifecycles of their parent components.

It’s not that the context API will replace Redux completely. It’s just that in small applications that need some form of state management, prop drilling was pretty much the easiest solution to sharing prop values across nested components.

There are more than enough articles discussing this new API, so we won’t rehash old statements. For example:

Here,
Here,
and this one is really good.

Yeah, that last one was the official docs — it helps for the next part.

At Logojoy, we have lots of different repositories where something like this could be helpful, so we decided to take some time to play with this API in a practical solution that isn’t a theme or countdown clock, and that’s applicable to our needs.

So, we make logos — surprising I know — and one of our developers made a lovely playground that supports our painter library for drawing logos. This library takes in some logo ingredients and outputs a logo design.

In a nutshell, something like this:

Becomes:

Taking this simple playground as a starting point, we wanted to extend its UI to allow us to mutate the ingredients, or features in the ingredients, and see different logo variations as part of testing. So we needed to have a way to pass changes from this component to the canvas that draws the logo.

We have the above component tree and we only really care about passing an ingredients object between the component that mutates the ingredients to the canvas that draws the logo. Redux is overkill for something like this, but the context API works great to solve this problem.

We start off by making an AppProvider that acts as the store and pass the values to the context’s Provider component.

Our design canvas can easily receive the ingredients:

And our mutator can easily edit them:

As this UI grows in complexity, allowing us to alter isolated features in the ingredients, we can focus only on passing the values we need to components downstream of the IngredientsEditor, and re-rendering them only when their specific props change.