Au 08 - Front-end - React - Filtrando dados na lista - Mestres BEGIN

Objetivo da Aula

Criar um sistema de filtragem dinâmica onde:

Um slider (RangePriceFilter) controla a faixa de preço
A lista de produtos atualiza em tempo real
Os componentes se comunicam eficientemente

Arquitetura da Solução

ProductsPage (Estado Principal) ->  ProductSubHeader (Intermediário) ->  RangePriceFilter (Disparador)

O desafio técnico principal é o prop drilling, onde:

Dados precisam atravessar 3 níveis hierárquicos
Componentes intermediários repassam props sem usá-las
A manutenção torna-se complexa

Implementação com Callbacks

Solução através de comunicação ascendente:

1// Definição de tipos
2 interface RangePriceFilterProps {
3 value: number;
4 onPriceChange?: (value: number) => void;
5 }

Fluxo de Eventos:

Slider detecta mudança
Executa onPriceChange
ProductsPage atualiza estado
Lista refiltrada é renderizada

Componente Controlado

RangePriceFilter como componente totalmente controlado:

1const RangePriceFilter = ({ value, onPriceChange }: RangePriceFilterProps) => {
2 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
3 const newValue = parseInt(e.target.value); onPriceChange?.(newValue);
4 // Notifica o pai
5 }; return ( <input type="range" min="0" max="1000" value={value}
6 // Controlado externamente onChange={handleChange} /> ); };

Boas Práticas:

Single Source of Truth (valor controlado pelo pai)
Tipagem precisa com TypeScript
Tratamento seguro de callback opcional (?.)

Monitoramento com DevTools

Identificamos oportunidades de otimização:

Re-renders excessivos ao mover o slider
Componentes estáticos sendo recalculados
Possível uso de:
- React.memo para memoização
- useCallback para callbacks estáveis
- Debounce para eventos frequentes

Evolução da Arquitetura

Estágio Atual	Próximos Passos	Benefícios
Prop Drilling	Context API	Redução de props intermediárias
Re-renders globais	Componentes Memorizados	Renderização seletiva
Filtro instantâneo	Debounce (300ms)	Menos cálculos durante interação

Princípios Fundamentais

Fluxo Unidirecional

Dados fluem para baixo, eventos para cima

Single Source of Truth

Estado centralizado em ProductsPage

Separação de Responsabilidades

RangePriceFilter (UI) vs ProductsPage (Lógica)

Considerações Finais

"A simplicidade é pré-requisito para a confiabilidade."
- Edsger Dijkstra

Pontos Positivos

Implementação direta e didática
Fácil entendimento do fluxo de dados
Base sólida para evolução

Limitações Atuais

Prop drilling em aplicações maiores
Re-renders desnecessários
Dificuldade para adicionar múltiplos filtros

Próximas Melhorias

Implementar Context API para estado compartilhado
Adicionar mais campos de filtragem (categoria, marca)
Otimizar performance com memoização
Melhorar UI/UX da lista de produtos