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.
|
1 2 3 4 5 6 7 8 9 10 11 |
import { createContext } from "react"; const CartContext = createContext({ items: [], addItem: () => {}, removeItem: () => {}, }); export default CartContext; |
Repare que os valores default são irrelevantes, como você verá mais à frente na inicialização do contexto, mas são importantes para definir a estrutura do mesmo e com isso ajudar o code complete do editor de código.
Assim, aqui definimos que os itens do carrinho de compras ficarão em um array e que para adicionar itens vamos usar a função addItem, enquanto para remover vamos usar a função removeItem.
Agora para que esse contexto passe a valer, temos de importar e usar ele no ponto mais apropriado da nossa aplicação, envolvendo (wrapping) os elementos que vão precisar lidar com ele, neste exemplo na App.jsx como abaixo (ignore os arquivos Cart e ProductList que você não conhece ainda).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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 |
Repare primeiro que o uso de um contexto não elimina a necessidade de usarmos states. Isso é necessário para garantir que a atualização de dados reflita na aplicação imediatamente, o que é esperado em fronts React. Além disso, as funções que manipulam o state devem ficar sempre próximas do mesmo, como neste exemplo em que definimos as funções de adicionar e de remover itens no state.
Segundo, repare que o uso do contexto junto ao JSX é idêntico ao de um componente React comum, daqueles no estilo wrapper/container, onde englobam outros elementos no seu interior. Neste caso, temos de colocar todos os componentes que fazem parte do mesmo contexto, ou seja, que precisam dos dados do CartContext, sendo o Cart e o ProductList neste exemplo (que ainda veremos em detalhes). O único ponto importante de ser notado aqui é a prop value do CartContext, que deve receber o objeto com as referências aos states (apenas um neste caso) e às funções de manipulação dos mesmos.
Por fim, repare que nem Cart ou ProductList estão esperando props, ainda assim, elas vão usar items, addItem e/ou removeItem em seu interior, como veremos a seguir.
#3 – Consumindo um Contexto
O uso do contexto é ainda mais simples do que a sua definição e declaração. Em todos os componentes filhos (children) do contexto, você deve usar o hook useContext do React e importar também o contexto em si, para que, quando usados em conjunto, permitam ao componente acessar seu contexto-pai (parent). Veja abaixo um exemplo com o componente no arquivo Cart.jsx.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
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> ); } |
Veja como na desestruturação do contexto eu peguei apenas o que importa para o carrinho de compras: a lista de itens e a função de remoção deles. A adição de itens no carrinho de um ecommerce é feita através da listagem de produtos, que veremos a seguir.
O resto deste componente é muito direto, com a listagem baseada em items e a remoção no click do botão baseada em removeItem.
Agora vamos fazer o mesmo com o componente ProductList.jsx.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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> ); } |
Aqui já desconstruímos o state pegando somente addItem, já que os itens atualmente no carrinho ou a função de remoção deles não é relevante para a listagem de produtos. O restante do componente não tem nada de especial, com uma lista fake de produtos e o botão que chama a função de adição ao ser clicado.
Executando esta aplicação você terá uma aparência como a abaixo, onde inicialmente o carrinho está vazio, mas que você pode ir adicionando e removendo produtos nele, tudo através da Context API, sem props drilling.
Claro, em um exemplo simples como esse não se tem um ganho significativo no desenvolvimento frontend, mas é com boas práticas como essa que atingimos a excelência depois em projetos maiores.
Até a próxima!
Olá, tudo bem?
O que você achou deste conteúdo? Conte nos comentários.