O state management é um dos conceitos fundamentais no React que todo desenvolvedor precisa dominar. À medida que as aplicações se tornam mais complexas, entender os diferentes tipos de state e seus casos de uso apropriados torna-se crucial para construir aplicações sustentáveis e performáticas. Este guia explora as várias abordagens de state management no React, desde o state local simples até soluções externas complexas.

O state local representa a forma mais básica de state management no React, tipicamente gerenciado através do hook useState. Ao construir componentes que precisam lidar com seus próprios dados de forma independente, o state local oferece uma solução direta. Inputs de formulário servem como um exemplo perfeito - quando um usuário digita em um campo de texto, esse valor de input só precisa existir dentro do próprio componente do formulário. Da mesma forma, o status aberto/fechado de um modal ou a visibilidade de um indicador de carregamento frequentemente só importam para o componente que os exibe.

1	 function Counter() {
2	   const [count, setCount] = useState(0);
3	   
4	   return (
5	     <button onClick={() => setCount((count) => count + 1)}>
6	       Contador: {count}
7	     </button>
8	   );
9	 }
10	 

O state local se destaca em cenários onde os dados não precisam ser compartilhados entre componentes. Ele mantém a lógica do seu componente encapsulada e torna o código mais fácil de entender e manter. Considere usar state local quando seu componente precisa rastrear valores simples que não afetam outras partes da sua aplicação.

À medida que a lógica de states se torna mais complexa, gerenciar múltiplas atualizações de states relacionadas com useState pode se tornar difícil de manejar. O hook useReducer fornece uma abordagem mais estruturada, particularmente quando as atualizações de state dependem de múltiplos fatores ou quando uma ação deve disparar várias mudanças de state. Este padrão parecerá familiar para desenvolvedores que já trabalharam com Redux, pois segue princípios similares.

1	 function todoReducer(state, action) {
2	   switch (action.type) {
3	     case 'ADD_TODO':
4	       return [...state, action.payload];
5	     case 'REMOVE_TODO':
6	       return state.filter(todo => todo.id !== action.payload);
7	     case 'TOGGLE_TODO':
8	       return state.map(todo =>
9	         todo.id === action.payload
10	           ? { ...todo, completed: !todo.completed }
11	           : todo
12	       );
13	     default:
14	       return state;
15	   }
16	 }
17	 
18	 function TodoList() {
19	   const [todos, dispatch] = useReducer(todoReducer, []);
20	   
21	   const addTodo = (text) => {
22	     dispatch({
23	       type: 'ADD_TODO',
24	       payload: { id: Date.now(), text, completed: false }
25	     });
26	   };
27	 }
28	 

O padrão reducer se destaca quando você precisa manter transições de state previsíveis e quando sua lógica de state precisa ser compartilhada entre múltiplos componentes. Ele fornece um local centralizado para a lógica de mutação de state, tornando mais fácil depurar e testar sua aplicação.

O compartilhamento de state entre componentes pode ser abordado de duas maneiras principais: elevando o state e usando context. Quando componentes precisam compartilhar state, a primeira abordagem envolve mover esse state para o ancestral comum mais próximo. Este padrão, conhecido como "lifting state up", funciona bem para componentes intimamente relacionados que precisam permanecer sincronizados.

1	 function Parent() {
2	   const [shared, setShared] = useState('');
3	   
4	   return (
5	     <>
6	       <ChildA shared={shared} setShared={setShared} />
7	       <ChildB shared={shared} />
8	     </>
9	   );
10	 }
11	 

Para states que precisam ser acessados por muitos componentes em diferentes partes da sua aplicação, a Context API do React fornece uma solução mais elegante. O Context permite que você evite o "prop drilling" - o processo de passar props através de componentes intermediários que não precisam deles.

1	 const ThemeContext = createContext();
2	 
3	 function ThemeProvider({ children }) {
4	   const [theme, setTheme] = useState('light');
5	   
6	   return (
7	     <ThemeContext.Provider value={{ theme, setTheme }}>
8	       {children}
9	     </ThemeContext.Provider>
10	   );
11	 }
12	 

Lidar com operações assíncronas introduz desafios únicos no state management. Ao buscar dados de uma API, fazer upload de arquivos ou gerenciar conexões WebSocket, você precisa rastrear múltiplos valores de state simultaneamente: os próprios dados, status de carregamento e potenciais erros. Esta complexidade requer uma consideração cuidadosa da estrutura do state e tratamento de erros.

1	 function UserProfile() {
2	   const [data, setData] = useState(null);
3	   const [loading, setLoading] = useState(false);
4	   const [error, setError] = useState(null);
5	 
6	   useEffect(() => {
7	     const fetchUser = async () => {
8	       setLoading(true);
9	       try {
10	         const response = await fetch('/api/user');
11	         const userData = await response.json();
12	         setData(userData);
13	       } catch (err) {
14	         setError(err.message);
15	       } finally {
16	         setLoading(false);
17	       }
18	     };
19	 
20	     fetchUser();
21	   }, []);
22	 
23	   if (loading) return <div>Carregando...</div>;
24	   if (error) return <div>Erro: {error}</div>;
25	   if (!data) return null;
26	 
27	   return <div>{data.name}</div>;
28	 }
29	 

O state na URL desempenha um papel crucial em aplicações web ao manter o state da aplicação dentro da própria URL. Esta abordagem permite que os usuários marquem estados específicos da aplicação e compartilhem links que reproduzam exatamente as mesmas visualizações de páginas. O state na URL prova ser particularmente valioso para recursos como paginação, parâmetros de busca e configurações de filtro.

1	 import { useSearchParams } from 'react-router-dom';
2	 
3	 function ProductList() {
4	   const [searchParams, setSearchParams] = useSearchParams();
5	   const page = searchParams.get('page') || 1;
6	   const category = searchParams.get('category') || 'all';
7	 
8	   const updateFilters = (newCategory) => {
9	     setSearchParams({
10	       page: 1,
11	       category: newCategory
12	     });
13	   };
14	 
15	   return (
16	     <div>
17	       <select 
18	         value={category} 
19	         onChange={(e) => updateFilters(e.target.value)}
20	       >
21	         <option value="all">Todos</option>
22	         <option value="electronics">Eletrônicos</option>
23	         <option value="books">Livros</option>
24	       </select>
25	     </div>
26	   );
27	 }
28	 

Embora tecnicamente não seja "state" no React, refs fornecem uma maneira de manter valores mutáveis entre renderizações sem disparar re-renderizações. Isso os torna ideais para armazenar referências do DOM, gerenciar intervalos e timeouts, e rastrear valores que não devem causar atualizações de componentes.

1	 function StopWatch() {
2	   const intervalRef = useRef(null);
3	   const [time, setTime] = useState(0);
4	 
5	   const startTimer = () => {
6	     intervalRef.current = setInterval(() => {
7	       setTime(t => t + 1);
8	     }, 1000);
9	   };
10	 
11	   const stopTimer = () => {
12	     clearInterval(intervalRef.current);
13	   };
14	 }
15	 

O state management efetivo começa com o escopo adequado. Mantenha o state o mais próximo possível de onde ele é necessário, movendo-o para cima na árvore de componentes apenas quando necessário. Mantenha uma única fonte de verdade para seus dados, evitando duplicação de state que pode levar a problemas de sincronização.

Considere as implicações de performance das suas escolhas de state management. Nem todo dado precisa estar no state - valores derivados podem frequentemente ser calculados em tempo real. Ao implementar operações assíncronas, trate os estados de carregamento e erro de forma elegante para fornecer uma experiência de usuário suave.

O state na URL deve ser aproveitado para estados da aplicação compartilháveis, enquanto o state local é suficiente para elementos temporários da UI. Implemente error boundaries para lidar graciosamente com erros relacionados ao state e prevenir crashes da aplicação.

À medida que as aplicações crescem, bibliotecas externas de state management podem fornecer estrutura e capacidades adicionais. Redux oferece uma solução robusta para aplicações em larga escala com interações complexas de state, enquanto Zustand fornece uma alternativa mais leve com uma API mais simples. Jotai e Recoil se destacam no state management atômico, quebrando o state em peças menores e gerenciáveis.

Para aplicações fortemente focadas em state assíncrono, o TanStack Query (anteriormente React Query) oferece ferramentas especializadas para lidar com dados assíncronos, caching e sincronização com serviços backend. Cada solução tem seus pontos fortes, e escolher a certa depende das necessidades específicas da sua aplicação.

Aplicações React modernas frequentemente requerem uma combinação de abordagens de state management. Entender os pontos fortes e casos de uso apropriados para cada tipo de state permite que você construa aplicações mais sustentáveis e performáticas. Comece com a solução mais simples que atenda às suas necessidades e escale sua abordagem de state management conforme sua aplicação cresce.

Diferentes partes da sua aplicação podem se beneficiar de diferentes abordagens de state management - não existe uma solução única que sirva para todos os casos. Foque em escolher a ferramenta certa para cada requisito específico enquanto mantém a clareza do código e a performance. À medida que o ecossistema React continua evoluindo, mantenha-se informado sobre novos padrões e melhores práticas para garantir que sua estratégia de state management permaneça efetiva.

Siga a documentação oficial do React e mantenha-se atualizado com as melhores práticas conforme o ecossistema evolui.

• Padrões de Data Fetching no React
• Entendendo Derived State no React

1. React state management:

   • State: A Memória de um Componente
   • useState
   • useReducer
   • useRef

2. State na URL:

   • useSearchParams

3. Bibliotecas de state management:

   • Redux
   • Zustand
   • Jotai
   • Recoil

4. Bibliotecas de state management assíncrono:

   • Tanstack Query
   • SWR