Forem: Kelvin Almeida

Gerenciamento de estado no Frontend: Entendendo Context API.

Kelvin Almeida — Thu, 08 May 2025 13:52:03 +0000

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.

State Management in the Frontend: Understanding the Context API

Kelvin Almeida — Thu, 08 May 2025 13:51:16 +0000

What is state management

State management is the process of controlling and managing the data of an application. In the frontend, it means keeping the information that influences the rendering of the interface up to date. For example, when we are typing in a form, whether a modal is open, or which items are in the shopping cart.

What is state in a frontend application?

State is any information that changes over time while interacting with the application. One example is the text typed in a search field; another example is when we click a button and a modal opens.

Difference between local state and global state

Local state is limited to a single component, such as a button that changes color when clicked.

Global state is shared by multiple components, such as user data that can be accessed throughout the application.

Simple example with useState

The counter state is local. It only affects the Counter component.

import { useState } from 'react';

function Counter() {
  const [counter, setCounter] = useState(0);

  return (
    <div>
      <p>You clicked {counter} times</p>
      <button onClick={() => setCounter(counter + 1)}>Click</button>
    </div>
  );
}

Why is useState sometimes not enough?

Now imagine an application with several components that need to access or modify the same data. This is where problems with useState begin, such as passing many props from one component to another. We need to lift the state to a common parent component, which makes the code structure hard to scale and maintain.

Simple example of the problem:

function App() {
  const [user, setUser] = useState(null);

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

If you need to modify user inside Dashboard, we will also need to pass setUser, and this is where things start to get messy in larger projects. That's why solutions like Context API, Redux, and Zustand come into play, as they solve these problems by providing global state in an organized manner.

How does the Context API solve the problem?

Going back to the previous example, where user had to be passed through props to multiple components, with the Context API, we can create a context, provide the context value in a parent component, and consume the value in any child component.

Basic example with Context API

Creating the UserContext.js context using createContext.

import { createContext } from 'react';

export const UserContext = createContext(null);

After creating our context, we wrap our root component with the provider, sharing the data via the value property.

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

function App() {
  const [user, setUser] = useState({ name: 'John' });

  return (
    <UserContext.Provider value={{ user, setUser }}>
      <Header />
      <Dashboard />
    </UserContext.Provider>
  );
}

Using in any component:

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

function Header() {
  const { user } = useContext(UserContext);

  return (
    <header>
      <p>Welcome, {user.name}!</p>
    </header>
  );
}

export default Header;

Advantages of using Context API

We don't need external libraries since it's native to React.
Great for simple shared data such as theme, language, and authentication.
We avoid passing props in a chain, keeping the application clean and organized.

Disadvantages and limitations

When the value of a context changes, all components that use that context will re-render, even if only part of the state has changed.
Lack of debugging tools, middlewares, and management of complex asynchronous actions such as API calls with loading and error states can become messy.
As we add more Context Providers to split the state into smaller pieces, our application can start to look like a mess of providers. For example:

<ThemeContext.Provider>
  <LanguageContext.Provider>
    <UserContext.Provider>
      <CartContext.Provider>
        <App />
      </CartContext.Provider>
    </UserContext.Provider>
  </LanguageContext.Provider>
</ThemeContext.Provider>

This can make the code harder to maintain and read.

Conclusion

State management is essential for maintaining consistency and smoothness in our frontend applications. The Context API is a great native solution for simple global states, but if we're dealing with very large or complex applications with many state updates, it might be better to use solutions like Zustand and Redux.