Middle React Frontend — Perguntas de entrevista React

Quando o useMemo realmente ajuda, e quando é ruído?

Ajuda quando o cálculo é genuinamente caro, ou quando o valor é dependência de outro hook ou de um filho memoizado, onde uma referência nova a cada render derrota a memoização. É ruído em operações baratas, porque a comparação e o valor retido também custam algo. Envolver todo valor em useMemo torna o código mais difícil de ler sem ganho mensurável.

Um componente re-renderiza muito mais do que o esperado. Como você descobre por quê?

Abra o Profiler, grave uma interação, e use "why did this render" para ver se foi props, state ou o pai. As causas usuais são um objeto ou arrow function criado inline no pai, um context cujo valor é um objeto novo a cada render, ou state que vive mais acima na árvore do que precisa. Corrija a causa em vez de recorrer ao React.memo, que só a esconde.

Que problema o Context resolve, e onde ele se torna a ferramenta errada?

Context evita ter que passar um valor por componentes que não se importam com ele — tema, idioma, o usuário atual. Ele se torna errado para estado que muda com frequência, porque cada consumidor re-renderiza quando o valor muda e não há seletor para assinar apenas uma parte dele. Nesse ponto você quer uma lib de estado com assinaturas em vez de um context que carrega tudo.

Por que você precisa de uma lib de dados como TanStack Query em vez de useEffect com fetch?

Porque a versão ingênua deixa de fora tudo que torna dados de servidor difíceis: cache, deduplicar requests idênticos, refetch quando a janela recupera o foco, retries, e não escrever em um componente desmontado. Reescrever isso em cada tela é onde vivem os bugs. A mudança de mentalidade é que dados de servidor são um cache que você sincroniza, não state que você possui.

Qual é a diferença entre useEffect e useLayoutEffect?

useEffect roda depois que o navegador pintou, então o usuário pode ver brevemente o estado anterior. useLayoutEffect roda sincronamente depois das mutações do DOM mas antes de pintar, o que previne esse flash ao custo de bloquear. Use useLayoutEffect só quando você mede o DOM e muda algo imediatamente com base na medição — uma posição de tooltip, um ajuste de scroll.

Como você lida com um erro lançado durante o render?

Um error boundary o captura e mostra um fallback em vez de uma página em branco, já que um erro de render não capturado desmonta toda a árvore. Boundaries não capturam erros em event handlers ou código async, que é a parte que as pessoas esquecem — isso precisa de try/catch comum. Coloque boundaries ao redor de seções significativas para que um widget quebrado não derrube a tela inteira.

Onde você colocaria code splitting em uma app React?

No nível de rota primeiro, porque um usuário que chega a uma tela não deveria baixar o resto da app. Depois ao redor de componentes genuinamente pesados e raramente usados — uma lib de gráficos, um editor de texto rico, um modal que a maioria dos usuários nunca abre. Dividir mais miúdo que isso adiciona overhead de requests e estados de carregamento em troca de kilobytes.