Performance

React.memo + areEqual

Evita re-renders comparando props por valor, não por referência.

Definição

React.memo é um Higher-Order Component (HOC) que memoiza um componente funcional. Por padrão, faz comparação rasa (===) das props. O segundo argumento (areEqual) permite comparação customizada — útil quando props são objetos/arrays.

Problema → Solução

Problema

Componente re-renderiza mesmo que os dados não mudaram — apenas a referência do objeto mudou.

Solução

Usar React.memo com função areEqual customizada para comparar valores reais, não referências.

Dica de entrevista

Tip

Use areEqual customizado quando suas props são objetos ou arrays. Para primitivos, React.memo padrão já basta.

Código

// ❌ Problema: novo objeto a cada render = nova ref = re-render
const user = { name: "Felipe" }; // recriado todo render

// ✅ Solução: React.memo + comparador de valor
const UserCard = React.memo(
  ({ user }) => <div>{user.name}</div>,

  (prevProps, nextProps) => {
    // true = NÃO re-renderiza
    return prevProps.user.name === nextProps.user.name
        && prevProps.user.id === nextProps.user.id;
  }
);

Perguntas de entrevista

Q.Qual a diferença entre React.memo, useMemo e useCallback?▾

A.React.memo memoiza o COMPONENTE inteiro (evita re-render). useMemo memoiza um VALOR computado (cache de cálculo). useCallback memoiza uma FUNÇÃO (mantém a mesma referência entre renders). Os três usam comparação rasa por padrão.

Q.React.memo sempre melhora performance?▾

A.Não. Tem custo próprio (a comparação roda a cada render do pai). Se o componente é trivial ou recebe props sempre diferentes, memo piora a performance. Sempre meça com React Profiler antes de aplicar.

Q.O que é comparação rasa?▾

A.Comparação por referência (===) para objetos/arrays e por valor para primitivos. { a: 1 } === { a: 1 } é false (referências diferentes), mas 1 === 1 é true.

1/122← →