Dados em Tempo Real
Estado normalizado por ID + seletores memoizados por item = só o item alterado re-renderiza.
Definição
Estado normalizado é uma estrutura plana, organizada por ID, semelhante a uma tabela de banco de dados. Combinado com seletores memoizados (Reselect, useStore com selector), garante que apenas componentes cujos dados específicos mudaram re-renderizem.
Problema → Solução
Problema
Array de 1000 itens: atualizar 1 item cria novo array → todos os 1000 componentes re-renderizam.Solução
Normalizar estado em mapa por ID. Cada componente seleciona apenas seu slice via seletor memoizado.Dica de entrevista
Tip
Esse é o padrão do Redux Toolkit (createEntityAdapter) e de qualquer store que lida com listas grandes.Código
// Estado normalizado
const [byId, setById] = useState({
'1': { id:'1', price: 99 },
'42': { id:'42', price: 100 }
});
// Seletor por item
const ItemRow = React.memo(({ id }) => {
const item = useStore(s => s.byId[id]);
return <tr><td>{item.price}</td></tr>;
});Perguntas de entrevista
Q.Por que arrays são problemáticos para tempo real?▾
A.Porque qualquer mudança cria novo array (referência nova), causando re-render de todos os componentes que dependem dele. Mapas/objetos por ID permitem updates granulares.
Q.Como Zustand evita re-renders desnecessários?▾
A.O hook useStore aceita um seletor: useStore(s => s.byId[id]). Apenas re-renderiza quando esse pedaço específico do estado muda, comparado por Object.is.
Q.WebSocket vs polling para tempo real?▾
A.WebSocket: bidirecional, baixa latência, ideal para chat/dashboards live. Polling/SSE: mais simples, funciona em qualquer infra. Para Next.js, Server-Sent Events (SSE) costuma ser suficiente para a maioria dos casos.
16/122← →