Como o hook useState funciona?

Question

Accepted Answer

`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.

```jsx
const [count, setCount] = useState(0); // 0 is the initial value
setCount(count + 1);   // value form
setCount(c => c + 1);  // functional form (preferred when based on previous)
```

## Duas coisas que surpreendem iniciantes

**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:

```jsx
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:

```jsx
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):

```jsx
const [data] = useState(() => expensiveInit()); // runs once, not every render
```

## Por que isso importa

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.