Projeto 11 – Galeria de Mídia de Próxima Geração ⚡
O objetivo deste projeto é construir uma aplicação de mídia que carregue instantaneamente, mesmo com centenas de itens, utilizando todas as técnicas de performance aprendidas.
🎯 Objetivo
Reduzir o "Tamanho do Bundle", evitar re-renderizações desnecessárias e otimizar o carregamento de recursos externos.
🛠️ Requisitos
- Uso de React.lazy e Suspense para rotas.
- Uso de React.memo em componentes de card.
- Otimização de carregamento de imagens (Lazy Load nativo).
- Divisão de componentes em "pedaços" (Splitting).
📝 Passo a Passo
1. Roteamento Inteligente
Configure pelo menos 3 rotas (Home, Galeria, Sobre).
As rotas Galeria e Sobre devem ser carregadas via lazy.
2. Cards Memorizados
Crie um componente FotoCard. Ele deve ser envolvido em memo.
Passe um ID e uma URL de imagem. Adicione um contador no componente pai e prove que os cards não renderizam quando o contador muda.
3. Esqueleto de Carregamento (Skeleton)
Em vez de um texto "Carregando...", crie um componente de Skeleton (uma div cinza animada) para mostrar enquanto as fotos ou as páginas não carregam.
4. Análise de Build
Rode o comando npm run build e observe o terminal para ver o tamanho dos arquivos gerados antes e depois do lazy loading.
✅ Critérios de Entrega
- A aplicação deve pontuar alto no Lighthouse (aba Performance).
- Não deve haver "piscadas" bruscas de conteúdo ao trocar de página.
- O uso de memo e lazy deve ser justificado no código através de comentários.
Bônus
Use a biblioteca react-intersection-observer para criar uma animação de "surgimento" das imagens conforme entram na tela!