Performance

Formulários Lentos

Dividir em seções memoizadas isola re-renders — apenas a seção do campo alterado re-renderiza.

Definição

Formulários complexos sofrem com re-render em cascata: ao digitar em um campo, todos os outros re-renderizam. A solução é isolar campos em componentes memoizados ou usar bibliotecas que isolam re-render por campo (react-hook-form).

Problema → Solução

Problema

Formulário com 50 campos: cada keystroke re-renderiza todos os 50 campos desnecessariamente.

Solução

Agrupar campos em seções com React.memo. Ao digitar em uma seção, apenas ela re-renderiza.

Dica de entrevista

Tip

Alternativa ainda melhor: react-hook-form — isola re-renders por campo nativamente, sem memo manual.

Código

const SecaoPessoal = React.memo(({ dados, onChange }) => (
  <fieldset>
    <input value={dados.nome} onChange={e => onChange('nome', e.target.value)} />
    <input value={dados.email} onChange={e => onChange('email', e.target.value)} />
  </fieldset>
));

Perguntas de entrevista

Q.react-hook-form vs Formik?▾

A.react-hook-form usa refs (uncontrolled), evitando re-render por keystroke. Formik usa state controlado, re-render em cada digitação. RHF é significativamente mais performático em forms grandes.

Q.Como validar sem re-render?▾

A.Validação com schema (Zod, Yup) executa apenas no submit ou onBlur. Validações que precisam ser em tempo real podem ser debouncadas. Em RHF: mode: 'onBlur' ou 'onSubmit'.

Q.Quando usar useReducer em forms?▾

A.Quando os campos têm dependências entre si (mudar A reseta B). useReducer centraliza a lógica e evita múltiplos useState entrelaçados.

12/122← →