Aula 11 – Performance: React.memo e Lazy Loading 🚀

Uma aplicação profissional deve ser rápida e leve. Hoje vamos aprender como evitar renderizações inúteis e carregar apenas o necessário para o usuário.

🧠 1. React.memo: Evitando Re-renders

Por padrão, quando um componente pai renderiza, todos os seus filhos renderizam também. O React.memo impede isso se as props do filho não mudaram.

import { memo } from 'react';

const FilhoPesado = memo(({ dado }) => {
  return <div>{dado}</div>;
});

😴 2. Code Splitting e Lazy Loading

Por que carregar o código da página de "Configurações" se o usuário está na "Home"? O Lazy Loading divide seu código em pedaços menores.

import { lazy, Suspense } from 'react';

const PaginaConfig = lazy(() => import('./PaginaConfig'));

function App() {
  return (
    <Suspense fallback={<div>Carregando página...</div>}>
      <PaginaConfig />
    </Suspense>
  );
}

📸 3. Otimização de Imagens

Imagens pesadas matam a performance. No React, devemos: - Usar formatos modernos (WebP). - Adicionar o atributo loading="lazy" nas tags img. - Usar tamanhos adequados para cada tela.

🚀 Prática da Aula

Vamos otimizar uma aplicação "pesada".

Crie um componente pai que tem um contador.
Crie um componente filho que apenas exibe um texto estático.
Use o console.log para ver o filho renderizando sem necessidade.
Aplique o React.memo e veja a mágica acontecer.
Implemente o lazy e Suspense em uma das rotas do seu projeto anterior.

📊 Ferramentas de Análise

React DevTools (Profiler): Para ver quanto tempo cada componente leva para renderizar.
Lighthouse: Ferramenta do Chrome para medir a performance geral do site.

Dica: Virtualização

Para listas com milhares de itens, não use apenas .map. Procure sobre Windowing ou Virtualização (libs como react-window).