Projeto 10 – Analytics Dashboard Otimizado 📊
Neste projeto, você vai construir um painel de dados que lida com grandes volumes de informação simulada, aplicando hooks avançados para garantir 60 FPS (quadros por segundo).
🎯 Objetivo
Identificar gargalos de performance, aplicar useMemo e useCallback corretamente e gerenciar o DOM de forma imperativa com useRef.
🛠️ Requisitos
- Uso de useMemo para processamento de dados.
- Uso de useRef para focar elementos ou controlar bibliotecas externas (ex: Charts).
- Implementação de uma lista filtrável com mais de 100 itens.
📝 Passo a Passo
1. Mock de Dados
Crie uma função que gera 500 objetos de "Vendas" com: id, vendedor, valor e data.
2. Painel de Estatísticas
Crie 3 cards que mostram: Total de Vendas, Média de Valor e Maior Venda.
- Regra: Esses cálculos devem estar dentro de um useMemo que depende apenas da lista de vendas.
3. Filtro de Vendedores
Crie um input de busca por nome de vendedor. - A filtragem deve ser otimizada para não rodar se o usuário estiver apenas mudando o tema do site, por exemplo.
4. Foco Instantâneo
Ao clicar em um botão "Novo Filtro", o input de busca deve ser limpo e focado automaticamente através de uma ref.
✅ Critérios de Entrega
- O componente não deve "travar" ao digitar no campo de busca.
- Deve ser possível provar que as funções de cálculo não rodam fora de hora (via console.logs).
- O código deve estar limpo e bem documentado sobre o porquê de cada otimização.
Dica de Mestre
Use o Profiler do React DevTools para gravar uma interação e comprove que os componentes memorizados não estão renderizando sem necessidade!