Estado local pertence a um único componente (ou uma pequena subárvore) e não é necessário em outro lugar. Estado global é compartilhado entre muitos componentes, frequentemente distantes, em toda a aplicação.
() {
[query, setQuery] = ();
;
}
O estado local vive dentro do componente (useState, ref, data()). Exemplos: valores de entrada, se um dropdown está aberto, um estado de hover, um rascunho de formulário. Nenhum outro componente se importa com isso.
// the logged-in user is needed by the navbar, profile page, settings, checkout...
const user = useUserStore(s => s.user); // from a global store/context
O estado global é dados que muitos componentes não relacionados devem ler ou atualizar consistentemente: o usuário autenticado, tema, carrinho de compras, notificações da aplicação. Ele vive em um Context, uma store (Redux/Zustand/Pinia), ou similar.
Ask: "How many components need this, and how far apart are they?"
One component (or parent+child) → LOCAL state
Many unrelated components / whole app → GLOBAL state
// ❌ putting a single form's input in global state — unnecessary complexity
globalStore.setFormInput(value);
// ✅ keep it local — only this form uses it
const [value, setValue] = useState("");
Tornar tudo global adiciona boilerplate, acopla componentes e pode prejudicar o desempenho (mais re-renderizações). A melhor prática é manter o estado o mais local possível, e apenas elevá-lo para global quando o compartilhamento genuinamente o exigir.
Escolher entre local e global é uma das decisões de estado mais consequentes.
Manter o estado local mantém os componentes simples, auto-contidos e eficientes; recorrer ao estado global apenas quando os dados são verdadeiramente compartilhados evita complexidade desnecessária.
O anti-padrão frequente — colocar tudo em uma store global "só por precaução" — leva a aplicações inchadas e fortemente acopladas.
A regra orientadora: localize por padrão, globalize apenas quando o compartilhamento o exigir.