O useMemo é um Hook que atua dentro do seu componente. Seu objetivo é memorizar um valor específico— seja ele o resultado de um cálculo complexo, um objeto, ou um array.
Por que usar?
Ele impede que cálculos caros ou a recriação de referências (como novos arrays ou objetos) ocorram a cada renderização, economizando poder de processamento. Você diz ao React: "Execute isso apenas se as dependências mudarem."
🛡️ O Foco do React.memo: Memorizar Componentes
O React.memo é um High-Order Component (HOC) que você usa para envolver o seu componente funcional. Seu objetivo é memorizar o componente inteiro e controlar suas re-renderizações.
Por que usar?
Ele atua como um guardião. Se as props passadas para o componente não mudarem (após uma comparação superficial), ele impede que o componente re-execute e re-renderize, mesmo que o componente pai tenha sido renderizado novamente.
🏆 Conclusão: A Estratégia de Memorização Completa
Para uma otimização eficaz, muitas vezes, você precisará dos dois:
Use useMemo no componente pai para garantir que os dados (valores) passados como props (ex: um objeto de configuração ou lista de dados) tenham uma referência estável.
Use React.memo no componente filho para garantir que ele só re-renderize se essa referência estável realmente mudar.
Dominar essa dupla é essencial para construir aplicações React mais rápidas e eficientes!
Top comments (0)