Beginners Guide to React’s Context API

Disclaimer: This guide is for anyone who wants to learn state management in React or anyone who want to transition from redux to a much simpler option.

That being said, Let’s forge on.

HERE’S WHAT WE’LL BE BUILDING

You can find the source code on my github repo.

PREREQUISITES:

1. React Hooks.
2. react-router-dom (For basic routing in react)
3. Node
4. React

I assume you have all these installed and know how they work. If you don’t , please go take a tutorial or two then head back.

GETTING STARTED

I assume you already have React, Node and NPM installed in your computer. Let’s start by creating our react app. Run the following commands.

We just created a react app in a directory named context-api-tutorial and we moved into that directory.

Next, open your react app in your favourite text editor. I’ll be using VSCode.

Create a file named context.js inside your src folder.

src/context.js

Here’s what is happening above. We import createContext from React. createContext as you’ve guessed right is used to create a context I named my context AppContext but you can name yours whatever. We create a functional component name AppProvider which returns AppContext.Provider. For those coming from redux, AppContext.Provider is the same thing as Provider and it takes in a value props. Whatever we pass into the value prop will be available throughout our app. If you’re familiar with react hooks, you already know the other part of the code.

Next, we go into our index.js file and make the following changes.

index.js

Here, we only imported our AppProvider and wrapped it around our App. Like i said earlier, that makes our value available throughout our app.

Next, open your App.js file and make the following changes.

App.js

Here, I am creating basic routes for my react app. If you don’t know what’s going on here, please take a tutorial on react routing.

Next, create a directory named components to store all our apps components. Our app will have just two components; Home and Dashboard. Inside our components folder, create a file named Home.js and paste in the following code.

I know how you feel right now. Trust me , I do. Just give me a moment to

explain what’s going on . We imported useContext from react. useContext basically tells react the context we want to use. For us, that will be AppContext. We then destructure what we passed into our value props ( which was passed into AppProvider ). After getting an input from the user, we then set the state of our displayName with setDisplayName. We can then use display anywhere in our app.

Finally, we create a Dashboard.js file in our components directory and paste the following code.

src/components/Dashboard.js

By now, i’m sure you get the hang of what’s going on here. If you don’t, we tell react what context we want to use ( using useContext ). We destructure displayName from our AppContext because that’s all we need. Finally, we display the result of displayName.

Wrap Up

This example is fairly simple and i hope you’ve been able understand how to handle State in React using the context API.

Don’t forget to try new examples yourself.

Happy Coding :)