O gancho useState do React é uma ferramenta essencial para gerenciar o estado em componentes funcionais, mas é fácil tropeçar em algumas armadilhas comuns. Esteja você apenas começando com o React ou já trabalhando com ele há algum tempo, evitar esses erros pode salvá-lo de bugs inesperados e problemas de desempenho.

Vamos examinar 10 erros frequentes e como você pode evitá-los para escrever um código mais limpo e eficiente.

1. Tipo de estado inicial errado

Um dos problemas mais comuns surge quando o tipo de estado inicial não corresponde ao tipo esperado durante as atualizações de estado.

❌ Erro: incompatibilidade de tipo de estado inicial

const [count, setCount] = useState(0);
setCount("1"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'.

✅ Solução: Use TypeScript ou especifique o tipo explicitamente.

const [count, setCount] = useState(0);
setCount(1); // No issues now.

2. Não usar atualizações funcionais

Ao atualizar o estado com base no valor anterior, fazer referência direta ao estado atual pode levar a valores obsoletos, especialmente em operações assíncronas.

❌ Erro: usar o estado atual diretamente

setCount(count   1); // Can cause bugs in async scenarios.

✅ Solução: Use o formulário funcional para atualizações seguras.

setCount((prevCount) => prevCount   1); // Ensures you always have the latest value.

3. Armazenando Estado Derivado

Evite armazenar valores em estados que possam ser derivados de outros estados ou adereços. Isso pode levar a novas renderizações desnecessárias e problemas de sincronização.

❌ Erro: armazenar estado derivado

const [count, setCount] = useState(0);
const [doubleCount, setDoubleCount] = useState(count * 2);

✅ Solução: Derive o valor durante a renderização em vez de usar o estado.

const [count, setCount] = useState(0);
const doubleCount = count * 2; // No need to store this in state.

4. Atualizações de estado dentro da fase de renderização

Chamar setState dentro da fase de renderização é uma receita para loops infinitos e problemas de desempenho.

❌ Erro: configuração do estado durante a renderização

const [count, setCount] = useState(0);
setCount(1); // Infinite loop!

✅ Solução: acione mudanças de estado em manipuladores de eventos ou efeitos.

const handleClick = () => setCount(1);

5. Estado de mutação direta

O React não detectará alterações se você alterar o estado diretamente, especialmente com arrays ou objetos.

❌ Erro: estado de mutação direta

const [items, setItems] = useState([1, 2, 3]);
items.push(4); // Mutation happens here, React won’t re-render!

✅ Solução: Retorne um novo array ou objeto para acionar novas renderizações.

setItems((prevItems) => [...prevItems, 4]); // Spread to create a new array.

6. Tipos indefinidos ou incorretos para estado complexo

Ao lidar com estados complexos, não definir os tipos adequados pode causar problemas e confusão no tempo de execução.

❌ Erro: tipos implícitos podem levar a erros

const [user, setUser] = useState({ name: "", age: 0 });
setUser({ name: "John", age: "thirty" }); // Type error: Age should be a number.

✅ Solução: Defina a forma do estado com os tipos corretos.

type User = { name: string; age: number };
const [user, setUser] = useState({ name: "", age: 0 });

7. Usando estado para valores mutáveis ​​(como temporizadores)

Usar useState para valores que não afetam a renderização, como temporizadores, leva a novas renderizações desnecessárias.

❌ Erro: usar estado para valores mutáveis

const [timerId, setTimerId] = useState(null);

✅ Solução: Use useRef para valores mutáveis ​​​​que não precisam de nova renderização.

const timerIdRef = useRef(null);

8. Não mesclar objetos de estado corretamente

Ao contrário dos componentes de classe, useState não mescla atualizações automaticamente. Esquecer isso pode resultar na substituição de partes do seu estado.

❌ Erro: sobrescrevendo o estado em vez de mesclar

const [user, setUser] = useState({ name: '', age: 0 });
setUser({ age: 25 }); // The 'name' field is now lost!

✅ Solução: Use o operador spread para mesclar atualizações de estado.

setUser((prevUser) => ({ ...prevUser, age: 25 })); // Merges with existing state.

9. Usando estado para atualizações de alta frequência

O rastreamento de valores de alta frequência, como dimensões de janelas no estado, pode causar problemas de desempenho devido ao excesso de renderizações.

❌ Erro: usar o estado para atualizações frequentes

const [size, setSize] = useState(window.innerWidth);
window.addEventListener("resize", () => setSize(window.innerWidth));

✅ Solução: Use useRef ou debounce para reduzir o impacto no desempenho.

const sizeRef = useRef(window.innerWidth);
useEffect(() => {
  const handleResize = () => {
    sizeRef.current = window.innerWidth;
  };
  window.addEventListener("resize", handleResize);
  return () => window.removeEventListener("resize", handleResize);
}, []);

10. Presumindo que as atualizações de estado sejam síncronas

As atualizações do estado do React são assíncronas, mas muitos desenvolvedores assumem erroneamente que as alterações são aplicadas imediatamente.

❌ Erro: presumir que as mudanças de estado são imediatas

setCount(count   1);
console.log(count); // Logs the old value, not the updated one!

✅ Solução: Use useEffect para rastrear mudanças de estado e garantir que o valor mais recente seja usado.

useEffect(() => {
  console.log(count); // Logs the updated value after re-render.
}, [count]);

Considerações finais?

Evitar essas armadilhas de useState tornará seu código React mais robusto, legível e de alto desempenho. Compreender como funciona o mecanismo de estado do React e conhecer as melhores práticas economizará tempo na depuração e aprimorará sua experiência geral de desenvolvimento.

Você tem alguma dica ou erro de uso do estado para compartilhar? Deixe-os nos comentários abaixo! ?