Receita de bolo para criar contextos no React

Por que utilizar Contextos?

Quando começamos a construir aplicações mais complexas no React, é cada vez mais necessário fazer uso das propriedades, ou props de um componente ou página. Utilizamos muito as props pois precisamos passar dados de um componente para outro, e a maneira mais comum de fazer isso é passando os dados de um componente pai para um filho. No entando, existem diversas situações em que só isso não é suficiente, e é aí que entra o Context.

De forma resumida, um contexto é um componente onde podemos adicionar diversos recursos (funções, estados, etc) que poderão ser usados em todos os componentes da nossa aplicação, apenas importando o contexto dentro desses componentes. Nem precisa dizer que o contexto facilita e muito o compartilhamento de dados numa aplicação. Agora, vamos aprender a criar um.

Criando Contexto

Geralmente criamos um contexto dentro de uma rota /contexts. Neste caso, irei chamar o meu contexto de CartContext e escreverei o código em TypeScript, para deixar algumas coisas mais claras e bem definidas.

Dentro do /contexts/CartContext.tsx fazemos:

import { createContext } from "react";

interface CartItem {
  price: number;
  id: number; 
  name: string;
  description: string;
  image: string;
  quantity: number;
}

interface CartContextType {
  cartItems: CartItem[];
}

export const CartContext = createContext({} as CartContextType)

O código acima se refere a um contexto para o gerenciamento de um carrinho de compras, onde dizemos que o contexto do carrinho vai ser do tipo CartContextType, que incialmente vai receber uma lista de itens, em que cada item é do tipo CartItem, que recebe algumas propriedades específicas. Agora, para utilizar o contexto na nossa aplicação precisamos de um Provider, que como o nome sugere, vai prover os dados armazenados no contexto para toda nossa aplicação.

Configurando Provider

Ainda dentro do /contexts/CartContext.tsx precisamos exportar uma função com o nome do nosso Provider, e dentro dele criamos todas as funções ou estados que vamos querer compartilhar com toda nossa aplicação.

// adicionamos a importação do useState do React, já que vamos utilizá-lo nesse caso.
import { useState, ReactNode } from "react";

// aqui, precisamos criar uma tipagem para o children do nosso Provider
// devemos dizer que ele pode ser qualquer tipo de componente
interface CartContextProviderProps {
  children: ReactNode;
}

export function CartContextProvider({ children }: CartContextProviderProps) {
  // dentro do nosso Provider, podemos passar quaisquer tipo de dados que quisermos, assim como um estado
  const [ cartItems, setCartItems ] = useState<cartItem[]>([]);

  return (
     // o value indica quais elementos queremos que o Provider compartilhe
    <CartContext.Provider value={{ cartItems }}>
      {children}
    </CartContext.Provider>
  )
}

Agora, é ideal que, ainda no CartContext.tsx criemos um hook cutomizado para utilizar em qualquer lugar da aplicação.

Esse hook vai deixar a importação de dados, que vão vir de dentro do contexto, mais simples.

import { useContext } from "react";

export function useCart() {
  const context = useContext(CartContext);

  return context;
}

Por fim, vamos precisar ir no nosso App e confirgurar o Provider lá.

Dentro do seu App.jsx, App.tsx, _app.tsx ou como seja, coloque o Provider por volta de todos os elementos.

function App() {
  return (
    <CartContextProvider>
      ...
    </CartContextProvider>
  )
}

Agora vamos utilizar o contexto dentro de um de nossos componentes.

Utilizando o hook do contexto

Dentro da nossa página Home, por exemplo, podemos importar o hook e utilizar os dados que vêm de dentro dele à vontade, assim como no Exemplo abaixo.

import { useCart } from "../../contexts/CartContext.tsx";

export default function Home() {

const { cartItems } = useCart();

  return (
    <div>
      {cartItems.map((item) => {
        return (
          <div className="Item" key={item.id}>
            <img src={item.image} />
            <h1>{item.name}</h1>
            <p>{item.description}</p>
            <p>{item.price}</p>
          </div>
        )
      })}
    </div>
  )
}

Existem diversas possibilidades para ir se trabalhando com contextos, ainda mais quando se trata de uma aplicação mais complexa. Você deve identificar uma necessidade que consiga ser atendida usando contextos e ir em frente. Isso vai deixar tudo mais simples e conectado.

Gostou do post? considere ver outros posts que podem ser úteis para você. 👇