State é qualquer dado que pode mudar ao longo do tempo e do qual a UI depende para ser renderizado. Quando o state muda, a UI é atualizada para refletir isso. É a "memória" de sua aplicação em qualquer momento.
✓ A counter value, a form's input text, a toggle (on/off)
✓ Whether a modal is open, the active tab, loading/error flags
✓ The logged-in user, items in a cart, fetched API data
✓ The current theme (dark/light), selected filters
function Counter() {
const [count, setCount] = useState(0); // `count` is state
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times {/* the UI is a function of state */}
</button>
);
}
A ideia central de frameworks modernos: UI = f(state). Você não atualiza o DOM manualmente; você muda o state e o framework re-renderiza a UI para corresponder. Clique no botão → count muda → o número exibido é atualizado automaticamente.
State: changes over time, drives re-renders (count, user, isOpen)
Constants: never change (PI, config URLs) — not state
Derived: computed FROM state (fullName from firstName + lastName) — don't store separately
Nem toda variável é state — apenas dados que mudam e afetam o que é renderizado. Valores que você pode calcular a partir do state existente não devem ser armazenados como state separado (isso corre o risco de ficarem fora de sincronização).
Local/UI state → belongs to one component (input text, isOpen)
Global state → shared app-wide (user, theme, cart)
Server state → data fetched from an API (cached remote data)
URL state → in the address bar (filters, page number)
Compreender state como "dados que mudam e impulsionam a UI" é o fundamento de todo desenvolvimento frontend.
O modelo mental UI = f(state) explica como React/Vue/Angular funcionam — você gerencia state e a view acompanha.
Reconhecer o que é e não é state (e não duplicar valores deriváveis) é o primeiro passo para gerenciá-lo bem; tudo em state management se constrói sobre este conceito.