A Guide to the React Context API by@redbird

A Guide to the React Context API

When you want to pass some states within components, you need to pass them via props. This is where the **React Context API comes in. A `Context` is a general state that can be used anywhere. You access it with the `useContext` hook. Every component inside `UserProvider` will be able to use the context. The `user` state is retrieved with the use of the useContext(useState) hook. It is then declared as a props and passed to each component where you use it.
image
Redbird HackerNoon profile picture

Redbird

Learn Web Development


When you want to pass some states within components, you need to pass them via props:


image

function HomePage() {
  const [user, setUser] = useState({
    name: 'John Smith',
    email: '[email protected]',
  })

  return (
    <div>
      <Cart user={user} />
      <Profile />
    </div>
  )
}

function Cart({ user }) {
  return (
    <div>
      <h1>Welcome to your cart {user.name}</h1>
      <Checkout user={user} />
      <Items />
    </div>
  )
}

// You do not use `user` here but it must be declared as a props because you use it in the `Order` child component.
function Checkout({ user }) {
  return <Order user={user} />
}

function Order({ user }) {
  return <p>Contact email: {user.email}</p>
}


As you can, the user state in used everywhere in the above snippet. It is annoying to always have to create a user props and pass them to each component where you want to use the user state.


This is where the React Context API comes in.


image


A Context is a general state that can be used anywhere. You access it with the useContext hook.


To use it you have to create a Context and a Provider:


// providers.jsx
import { createContext, useEffect, useState } from 'react'

// Create a context object
export const UserContext = createContext({
  name: '',
  email: '',
})

// Define a provider
export function UserProvider({ children }) {
  const [user, setUser] = useState({
    name: 'John Smith',
    email: '[email protected]',
  })

  return <UserContext.Provider value={user}>{children}</UserContext.Provider>
}


Once done, you must include the children's components within UserProvider. Every component inside UserProvider will be able to use the context:


export default function HomePage() {
  return (
    <UserProvider>
      <Cart />
      <Profile />
    </UserProvider>
  )
}

function Cart() {
  // Retrieve the user from the global UserContext
  const user = useContext(UserContext)

  return (
    <div>
      <h1>Welcome to your cart {user.name}</h1>
      <Checkout />
      <Items />
    </div>
  )
}

function Checkout() {
  return <Order />
}

function Order() {
  const user = useContext(UserContext)
  return <p>Contact email: {user.email}</p>
}


As you can see, we do not need to pass the user props anymore.


The user state is retrieved with:


const user = useContext(UserContext)


react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!