useContext

useContext

The useContext hook helps components share data with each other.

It is very common to have:

  1. a nested tree of components

  2. a need for components to share data across branches of the tree

In such scenarios we would lift state up to a common parent and pass the data down as props. With a deeply nested component tree however, this results in having to pass the prop through multiple layers of components even if those layers don't need that prop at all. The useContext hook gives us an alternative to this "prop drilling". It creates a direct portal between the component that provides the state (context) and the components that need to consume that state.

import { useState, useContext, createContext } from "react";

const CartContext = createContext([]);

const App = () => {
  const [cartItems, setCartItems] = useState([])

  return (
    <CartContext.Provider value={cartItems}>
      <NavBar />
      <Checkout />
    </CartContext.Provider>
  );
};

const NavBar = () => {
  const { cartItems } = useContext(CartContext)
  return (
    <p>{cartItems.length}</p>
  );
}

const Checkout = () => {
  const { cartItems } = useContext(CartContext)
  return (
    <ul>
      {cartItems.map(item) => (<li>{item.title}</li>)}
    </ul>
  )
}

References

PreviousDay 1: useContextNextDay 2: Styling React

Last updated