Introduction to React’s Context API

State management is a big part of web apps. It is in fact the bloodline of modern web development.

There are several ways to manage state in react but I prefer using the context API. The context API, unlike it counterparts( i won't mention names 😂) doesn't add unnecessary complexities to your code and is relatively easy to get started with

Disclaimer: This tutorial is for anyone who wants to learn state management in React which pulling his/her hair or anyone who wants to transition from redux to a much simpler option.

That being said, Let’s forge on.

PREREQUISITES:

A basic knowledge of the following is required as this tutorial doesn't cover how to get started with them.

• React Hooks.
• React

You can find the source code on my github repo.

GETTING STARTED

I assume you already have React, Node and NPM installed on your computer. If you don't have them installed, you're on your own 😂😂

First, let’s start by creating a react app.

npx create-react-app context-api
cd context-api

Then ,create a file named context.js in your srcfolder and type the following code (I'll explain what's happening in a bit.)

import React, { createContext } from "react";

export const AppContext = createContext()

const AppProvider = ({children}) => {
    const name = "John doe"

    return (
        <AppContext.Provider value={name}>
            {children}
        </AppContext.Provider>
    )
}

export default AppProvider

We import createContext from react. createContext is used to create a context. Then ,we create a functional component named AppProvider which takes in a value prop and returns AppContext.Provider. Whatever you pass into the value prop will be available throughout our app.

Next, make the following changes to your index.js file.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import AppProvider from "./context"


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

Here, we import AppProvider and wrap it around our App to make it available throughout our app.

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

import React, {useContext} from 'react'
import {AppContext} from './context'

const App = () => {
// destructuring
const [name] = useContext(AppContext)

return (
     <div>
        <h1>Hello , my name is {name}
    </div>

) }

export default App

Here, we import useContext from react. As the name implies, useContext tells react what context to use. The name variable was destructured because it was passed into the value props of AppProvider

Summary

• createContext is used to create a context
• AppContext.Provider takes in a value prop which is available throughout your app
• useContext tells react what context to use

Conclusion

The Context API is one of multiple ways to manage state in react. Feel free to check out other state management tools available.

Don’t forget to try new examples yourself.

Feel free to reach out to me on twitter if you have any questions or just want to be my friend😊

Happy Coding :)