Exercícios de Fixação – Aula 11 🚀

Exercício 01: React.memo

Crie um componente CardEstatico que recebe apenas um título. 1. No componente pai, crie um contador que atualiza a cada segundo. 2. Use o React.memo no CardEstatico para garantir que ele não renderize novamente em cada segundo, já que o título não muda.

Exercício 02: Lazy Loading de Rotas

No seu projeto com React Router: 1. Transforme as páginas Sobre e Contato em componentes carregados via lazy. 2. Use o Suspense para mostrar a mensagem "Carregando Página..." enquanto elas são baixadas.

🟡 Nível: Intermediário

Exercício 03: Diferindo o Carregamento de Imagens

Crie uma galeria de 10 imagens. 1. Adicione o atributo loading="lazy" em todas elas. 2. Use imagens de alta resolução do Unsplash. 3. Observe no Inspetor de Elementos (aba Network) que as imagens só são baixadas quando você faz scroll e se aproxima delas.

Exercício 04: Análise com Profiler

1. Abra o React DevTools no seu navegador.
2. Vá na aba "Profiler" e clique em gravar.
3. Realize algumas interações na sua lista filtrável da aula anterior.
4. Pare a gravação e identifique qual componente está levando mais tempo para renderizar.

📚 Gabarito e Soluções Comentadas

// Solução de referência para: No componente pai, crie um contador que atualiza a cada segundo.
function solucaoExercicio() {
    console.log("Executando validação de: Performance: React.memo e Lazy Loading");
    return true;
}

solucaoExercicio();