Gerenciamento de estado no Frontend: Entendendo Context API.

O que é o gerenciamento de estado?

Gerenciamento de estado é o processo de controlar e gerenciar os dados de uma aplicação. No frontend, significa manter atualizada as informações que influenciam a renderização da interface. Exemplo, quando estamos digitado em um formulário, se um modal está aberto, ou quais itens estão no carrinho de compras.

O que é estado em uma aplicação frontend?

O estado é qualquer informação que muda com o tempo enquanto o interagimos com a aplicação. Um exemplo é o texto digitado em um campo de busca, um outro exemplo é quando clicamos em um botão e abre um modal.

Diferença entre estado local e estado global

O estado local se limita apenas em um único componente, um botão que muda de cor quando clicamos nele.

O estado global é compartilhado por multiplos componentes, dados do usuário logado acessados por toda a aplicação.

Exemplo simples com useState

O estado contador é local. Ele só afeta o componente Contador.

import { useState } from 'react';

function Contador() {
  const [contador, setContador] = useState(0);

  return (
    <div>
      <p>Você clicou {contador} vezes</p>
      <button onClick={() => setContador(contador + 1)}>Clique</button>
    </div>
  );
}

Por que useState às vezes não é suficiente?

Imagine agora uma aplicação com vários componentes que precisam acessar ou modificar os mesmos dados. Aí começam os problemas com useState, como passar muitas props de um componente para o outro, precisamos levantar o estado para um componente pai comum, com isso a estrutura do código se torna difícil de escalar e manter.

Exemplo simples do problema:

function App() {
  const [usuario, setUsuario] = useState(null);

  return (
    <>
      <Header usuario={usuario} />
      <Sidebar usuario={usuario} />
      <Dashboard usuario={usuario} />
    </>
  );
}

Se você precisar modificar usuario dentro de Dashboard, vamos precisar passar também setUsuario e dessa forma começa a bagunçar tudo em projetos maiores.
Por isso, entram soluções como Context API, Redux e Zustand, que resolvem esses problemas ao fornecer estado global de forma organizada.

Como a Context API resolve o problema?

Voltando ao exemplo anterior, onde usuario precisava ser passado por props para vários componentes, com a Context API, podemos criar um contexto, fornecer o valor do contexto em um componente pai e consumir o valor em qualquer componente filho.

Exemplo básico com Context API

Criando o contexto UsuarioContext.js usando createContext.

import { createContext } from 'react';

export const UsuarioContext = createContext(null);

Apos criar nosso contexto vamos envolver no nosso componente raiz com o provider, compartilhados os dados via a propriedade value.

// App.js
import { useState } from 'react';
import { UsuarioContext } from './UsuarioContext';
import Header from './Header';
import Dashboard from './Dashboard';

function App() {
  const [usuario, setUsuario] = useState({ nome: 'João' });

  return (
    <UsuarioContext.Provider value={{ usuario, setUsuario }}>
      <Header />
      <Dashboard />
    </UsuarioContext.Provider>
  );
}

Usando em qualquer componente:

//components/Header.js
import { useContext } from 'react';
import { UsuarioContext } from '../context/UsuarioContext';

function Header() {
  const { usuario } = useContext(UsuarioContext);

  return (
    <header>
      <p>Bem-vindo, {usuario.nome}!</p>
    </header>
  );
}

export default Header;

Vantagens de usar Context API

• Não precisamos de bibliotecas externas, pois ela é nativa do React.
• Ótima para dados simples compartilhados como por exemplo, tema, idioma e autenticação.
• Evitamos passar props em cadeia e não vamos ter uma aplicação bagunçada.

Desvantagem e limitações

• Quando o valor de um contexto muda, todos os componentes que usam esse contexto serão re-renderizados, mesmo que só uma parte do estado tenha mudado.
• Falta de ferramentas de debug, middlewares e gerenciar ações assíncronas complexas como chamadas API com loading e erro, pode virar uma bagunça.
• Cinforme adicionamos mais Context.Providers para dividir o estado em partes menores, nossa aplicação pode começar a parecer uma bagunça de providers, exemplo:

<ThemeContext.Provider>
  <IdiomaContext.Provider>
    <UsuarioContext.Provider>
      <CarrinhoContext.Provider>
        <App />
      </CarrinhoContext.Provider>
    </UsuarioContext.Provider>
  </IdiomaContext.Provider>
</ThemeContext.Provider>

Isso pode dificultar a manutenção e leitura do código.

Conclusão

O gerenciamento de estado é essencial para manter a consistência e a fluidez das nossas aplicações front-end. A Context API é uma ótima solução nativa para estados globais simples, mas se estivermos lidando com um aplicações muito grandes, complexas ou com muitas atualizações de estados, talvez seja melhor usar soluções como Zustand e Redux.