Uma das principais características do ReactJS é a de trabalhar com a componentização ao se construir interfaces complexas. Assim, conseguimos diluir a complexidade geral em pequenos componentes mais simples, muitas vezes indo ainda mais longe e construindo arquiteturas baseadas em micro-frontends. O problema é que muitas vezes o agrupamento e hierarquia de componentes acaba exigindo o compartilhamento de estados, que precisam ser passados via props entre diferentes componentes, causando o que chamamos de Prop Drilling (algo como “Perfuração de Propriedades”).

O Prop Drilling em frontends complexos pode chegar a tal ponto em que diversas vezes, dada a hierarquia de componentes, o state é passado entre componentes sem sequer ser utilizado, apenas para chegar no destino onde será necessário. Esse tipo de situação cria um acoplamento absurdamente alto dos componentes, dificultando sua manutença, diminuindo o reuso e porque não dizer, dizendo seu frontend mais sensível a mudanças.

Para resolver o Prop Drilling precisamos usar técnicas mais avançadas de gestão de estado do que apenas passar states via props. Uma dessas técnicas vem através do uso da Context API do ReactJS, que veremos como usar neste tutorial de hoje.

Esse é um tutorial para quem já tem uma base de ReactJS, algo ensinado nesta série. Se preferir, pode acompanhar ele em vídeo.

Vamos lá!

#1 – O que é a Context API?

A Context API, como o próprio nome sugere, é uma API para criação e consumo de contextos. Um contexto é basicamente um wrapper no qual todos os conteúdo dentro do mesmo têm acesso a dados e comportamentos em comum. Assim, se você tem por exemplo 3 componentes que precisam todos receber a mesma informação, você não precisa passar ela via props para os três. Basta criar um contexto, envolver (“wrap”) os 3 componentes dentro do contexto e, dentro de cada componente, carregar a informação a partir do respectivo contexto.

Trazendo para um exemplo prático, imagine esta hierarquia de componentes, podendo ser de um ecommerce por exemplo, onde diferentes componentes precisam saber os itens adicionados no carrinho de compras, logo, eles tem de ser passados via props para eles a partir da aplicação (root) para baixo.

Agora, com Context API, você cria o contexto e todos os componentes filhos (children) daquele contexto podem acessar seus valores, sem a necessidade de passar via props, mas usando um hook apropriado somente quando necessário.

Além desse exemplo de ecommerce é fácil de pensar em situações ligadas à autenticação (dados do usuário logado costumam ser necessários em diversos componentes), configurações de tema (light vs dark influenciam vários componentes) e muito mais.

É importante frisar que Context API não é a única forma de state management profissional para ReactJS, mas para muitos casos até média complexidade, é indiscutivelmente a mais utilizada. Uma opção muito popular para frontends extremamente complexos é Redux.

#2 – Criando um Contexto

Parto do pressuposto aqui que você tem um projeto React criado com Vite. Não importa tanto se você vai usar JS ou TS, fica a seu critério. Vamos fazer um exemplo simples de ecommerce, onde um carrinho de compras, bem como o comportamento de adicionar e remover itens dele, fará parte de um contexto que usaremos depois.

Para criar um contexto você deve primeiro criar um arquivo específico para o mesmo, como um CartContext.jsx, por exemplo. Dentro dele você vai começar a importando a função createContext do React e usando ela para inicializar um, com a estrutura que bem entender e seus valores default, como abaixo.

import { createContext } from "react";
 
const CartContext = createContext({
    items: [],
    addItem: () => {},
    removeItem: () => {},
});
 
export default CartContext;

import { useState } from 'react';
import CartContext from './CartContext';
import Cart from './Cart';
import ProductList from './ProductList';
 
function App() {
  const [cartItems, setCartItems] = useState([]);
 
  const addItem = (item) => {
    setCartItems((prevItems) => [...prevItems, item]);
  };
 
  const removeItem = (item) => {
    setCartItems((prevItems) => prevItems.filter((i) => i !== item));
  };
 
  return (
    <CartContext.Provider value={{ items: cartItems, addItem, removeItem }}>
      <Cart />
      <hr />
      <ProductList />
    </CartContext.Provider>
  );
}
 
export default App

import { useContext } from "react";
import CartContext from "./CartContext";
 
export default function Cart() {
    const { items, removeItem } = useContext(CartContext);
 
    return (
        <div>
            <h2>Cart</h2>
            {items.length === 0 ? (
                <p>Your cart is empty</p>
            ) : (
                <ul>
                    {items.map((item, index) => (
                        <li key={index}>
                            {item} <button onClick={() => removeItem(item)}>Remove</button>
                        </li>
                    ))}
                </ul>
            )}
        </div>
    );
}

import { useContext } from "react";
import CartContext from "./CartContext";
 
export default function ProductList() {
 
    const { addItem } = useContext(CartContext);
 
    return (
        <div>
            <h2>Product List</h2>
            {["Apple", "Banana", "Orange"].map((product) => (
                <div key={product}>
                    {product} <button onClick={() => addItem(product)}>Add to Cart</button>
                </div>
            ))}
        </div>
    );
}