devterview_$ iniciar simulação

Como evitar re-renders desnecessários

MédioPlenoPerformance

Pergunta

Quais técnicas você usa para evitar re-renders desnecessários em uma árvore React grande?

Resposta esperada

React.memo evita re-render de um componente filho quando suas props não mudaram (comparação rasa). useMemo evita recalcular um valor caro entre renders. useCallback evita recriar uma função a cada render — útil principalmente quando essa função é passada como prop para um componente memoizado, senão o memo não faz efeito. Também vale mover estado para o nível mais baixo possível na árvore (state colocation), para que uma mudança de estado não force re-render de toda uma subárvore que não depende dele.

Por que perguntam isso

Pega o candidato que só decorou os hooks: pergunte por que useCallback sozinho, sem React.memo no filho, geralmente não muda nada — testa entendimento real, não vocabulário.

#react#performance
publicidade

Relacionadas