First Impressions: React Context API

Photo by Alex Knight on Unsplash

React came out with the new Context API about a month ago. The past few days I've been playing around with it and have developed some understanding of how it works. It introduces some new use cases to consider and helps with some old ones as well. This post I get into my thoughts on it and how ultimately I think our developer lives are better with the new Context API.

New API

The new Context API is made up of these three parts:

• React.createContext
• Provider
• Consumer

Using the above three pieces we can really do a lot now. Let's take a quick look at how they can be used.

import React from 'react';
import { render } from 'react-dom';

const theme = {
  buttonColor: 'blue'
};

const ThemeContext = React.createContext(theme);

const AppButton = () => (
  <ThemeContext.Consumer>
    {({ buttonColor }) => (
      <button style={{ background: buttonColor }}>App Button</button>
    )}
  </ThemeContext.Consumer>
);

const Container = () => (
  <div>
    <AppButton />
  </div>
);

const App = () => (
  <div>
    <h1>My App</h1>
    <ThemeContext.Provider value={theme}>
      <Container />
    </ThemeContext.Provider>
  </div>
);

render(<App />, document.getElementById('root'));

Above is a basic example of creating some context and then using it. Line 8 I create some context for the app theme. Creating the context gives me two new React components { Provider, Consumer }. On line 27 I use the Provider to allow for child components to have access to the theme context we created. Then on line 11 within my AppButton component I use the Consumer part of the context to gain access to the theme information. This example is small but illustrates the basic setup behind using the new Context API.

Familiarity

If you've ever setup a React Redux project then that Provider part of the API should look pretty familiar. I'm not sure of how the internals work specifically in either code base but it's clear that the intent is the same in React and Redux.

Where they differ is how both want children components to consume state. Redux is more opinionated on how state is updated through reducers and actions but React allows you to read and update state how you see fit.

Taking this a step further Redux exposes a higher order component to connect to the store but in React they expose the state through a child function. Both achieve the same goal but again Redux is a bit more prescriptive.

The broad strokes of this API should be somewhat familiar to you if you have had to deal with or setup a state management library before.

Roll Your Own State Management

With the Context API you can manage small application state much easier now. If you have a small single page application and it's just you or a small team working on it then I think using the Context API should be enough to manage all your app state.

That being said, you should come up with a pattern that you understand or pull concepts from things such as Redux or other state libs and try them out at your scale.

Ultimately it's about what makes you comfortable and works for the app. If Redux is your bread and butter then go for it. If you are just starting with React and find yourself wondering how to pass state over here and down there then check out the Context API for now.

If at some point you feel it's not enough, google "React state management libraries" and try a few.

I like Redux

I've been using Redux for awhile now and I like how it works. I like Redux so much that I've used it for projects that don't use React at all. Redux is a great state management library and does exactly what I need it to do. The only thing I didn't like with Redux was the excess files I would create for actions and reducers. I solved this by using Ducks. It's a nice pattern for Redux and my preferred approach. Check it out!

The Context API will make me reach for Redux a lot less now. In a team environment or on a project of medium to large size I'll still use Redux. At the end of the day you need to do what makes you and your team comfortable and ultimately makes your lives easier.

Final Thoughts

All in all I like the new Context API and think it provides a ton of value. For those just getting started with React it should be able to answer the global app state question much faster then passing props way down and learning a state management library.

Check out some links below to learn more about the Context API:

• React Context Docs
• New Context API by Kent C. Dodds

If you liked this article then please show some ❤️. If you didn’t then lets talk about it 😃.

Originally posted on my blog at johnstewart.io.