useLayoutEffect
Como useEffect, mas executa síncronamente ANTES do browser pintar.
Timing: render → commit → useLayoutEffect → PAINT → useEffect. Por ser síncrono, bloqueia o paint até concluir. Tem acesso ao DOM já atualizado.
Leituras de layout que precisam ser antes do paint: posicionar tooltips/dropdowns, scroll restoration, medir elementos, ajustar posição sem flash.
Side effects que não precisam do DOM. SSR (não há DOM). Operações lentas (bloqueia o paint). Para 90% dos casos, useEffect é suficiente.
Hook básico para estado local do componente.
Roda side effects após o React commitar mudanças no DOM.
Memoiza o RESULTADO de uma computação. Recomputa apenas quando as deps mudam.
Memoiza uma FUNÇÃO. Mantém a mesma referência entre renders enquanto deps não mudam.
Cria objeto { current } mutável que persiste entre renders sem causar re-render quando alterado.
Alternativa ao useState para estado complexo com múltiplas transições.
Lê o valor do Context Provider mais próximo na árvore. Re-renderiza quando value muda.