useState oferece a um componente de função um pedaço de estado local e reativo. Retorna um par: o valor atual e uma função setter. Chamar o setter agenda uma nova renderização com o novo valor.
[count, setCount] = ();
(count + );
( c + );
useState oferece a um componente de função um pedaço de estado local e reativo. Retorna um par: o valor atual e uma função setter. Chamar o setter agenda uma nova renderização com o novo valor.
[count, setCount] = ();
(count + );
( c + );
1. As atualizações são assíncronas / em lote. count não muda na linha após setCount; tem o novo valor na próxima renderização. Assim, isto incrementa apenas uma vez:
setCount(count + 1);
setCount(count + 1); // both read the SAME stale `count` → +1 total
Use o functional updater quando o próximo valor depende do anterior, porque React passa o valor mais recente:
setCount(c => c + 1);
setCount(c => c + 1); // +2 total — each gets the up-to-date value
2. O valor inicial é usado apenas na primeira renderização. Para um padrão custoso, passe uma função para que seja executada uma vez (inicialização preguiçosa):
const [data] = useState(() => expensiveInit()); // runs once, not every render
O estado é o que torna um componente interativo — React executa a função novamente e renderiza a interface de usuário novamente sempre que o estado muda.
Trate o estado como imutável: crie um novo array/objeto em vez de mutar, por exemplo setItems([...items, x]), caso contrário React pode não detectar a mudança.