Básico FE

Quando usar cada Hook

Guia de decisão: useState vs useReducer, useMemo vs useCallback, useEffect vs useLayoutEffect.

Definição

Cada hook tem um caso de uso preciso. useState para 1-2 valores simples. useReducer para estado com múltiplas transições interdependentes. useMemo para cálculo caro ou referência estável de objeto. useCallback para função passada a filho memoizado. useEffect para sincronizar com sistema externo. useLayoutEffect para ler/escrever DOM antes do paint.

Problema → Solução

Problema

Usar useState para tudo (deveria ser useReducer), useEffect para calcular valores derivados (deveria ser useMemo), ou useCallback em handlers locais sem filho memoizado (overhead puro).

Solução

Seguir o guia de decisão: se você pode calcular o valor durante o render sem side effect, não use useEffect — use useMemo ou calcule direto. Se useEffect atualiza estado baseado em outro estado, provavelmente é useMemo.

Dica de entrevista

Tip

Regra de ouro: se você pode calcular o valor durante o render sem side effect, não use useEffect. Se useEffect atualiza estado baseado em outro estado, provavelmente é useMemo.

Código

// ✅ useState: 1-2 valores simples
const [open, setOpen] = useState(false)

// ✅ useReducer: estado complexo com transições
const [state, dispatch] = useReducer(reducer, initialState)

// ✅ useMemo: valor derivado caro ou referência estável
const filtered = useMemo(() => items.filter(pred), [items])

// ✅ useCallback: função passada a filho React.memo
const onSave = useCallback((id) => save(id), [save])

// ✅ useEffect: sincronizar com sistema externo
useEffect(() => {
  const sub = store.subscribe(listener)
  return () => sub.unsubscribe()
}, [])

// ✅ useLayoutEffect: medir DOM antes do paint
useLayoutEffect(() => {
  const { height } = ref.current.getBoundingClientRect()
  setHeight(height) // sem flash visual
}, [])

Perguntas de entrevista

Q.Quando useReducer é melhor que useState?▾

A.Quando você tem 3+ valores de estado que mudam juntos, quando o próximo estado depende do atual de forma complexa, ou quando quer testar a lógica de transição isoladamente.

Q.useCallback sempre melhora performance?▾

A.Não. useCallback tem custo (alocação + comparação). Só vale quando a função é passada para filho memoizado com React.memo ou usada como dependência de outro hook. Em handlers locais sem filho memoizado, é puro overhead.

Q.Diferença de timing entre useEffect e useLayoutEffect?▾

A.useEffect roda após o browser pintar (assíncrono). useLayoutEffect roda após o commit mas antes do paint (síncrono). Use useLayoutEffect para evitar flash visual ao medir ou reposicionar elementos DOM.

Termos relacionados

50/122← →