Filter & Sort Lists Filtrando e ordenando listas
Última atualização: 2026-11-03
Filter & Sort Lists Filtrando e ordenando listas
Filtrar e ordenar uma lista não altera o array original; em vez disso, você deriva um novo com filter, sort e métodos afins e renderiza esse. Manter os dados de origem intactos e calcular a visualização no momento do render é a ideia central da abordagem do React para listas. Isso também evita o bug clássico de ordenar um array de estado e corrompê-lo silenciosamente.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
const shown = products
.filter((p) => p.price < 100) // Filter → um novo array
.sort((a, b) => a.price - b.price) // Sort (na cópia produzida pelo filter)
{shown.map((p) => <li key={p.id}>{p.name}</li>)}Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Uma lista de produtos com dois controles: marcar "Under 100 only" deixa apenas o mouse, e clicar no botão de preço alterna entre ordem decrescente e crescente enquanto a lista se reordena ao vivo — o array original nunca é modificado.💡 Pontos-chave
💡 Dica Filtre antes de ordenar: filter devolve um novo array, então ordenar essa cópia no lugar nunca toca no array de estado.
⚠️ Aviso sort altera o array! Copie-o com [...arr] — ou filtre antes — antes de ordenar um array de estado diretamente.
ℹ️ Informação As condições de filtro e a direção da ordenação normalmente ficam no estado, enquanto o resultado exibido é calculado durante o render, então não há necessidade de guardar um "estado derivado" separado.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Como filtro e ordeno uma lista no React?
R Filtre e ordene os dados antes de renderizar para obter um novo array e depois mapeie-o para JSX. Mantenha as condições de filtro no estado e calcule o resultado durante o render.
P O sort modifica o array original?
R Sim, o sort ordena no lugar. Você precisa copiar o array de estado do React antes de ordená-lo ([...arr].sort, ou filtre antes), senão o array de estado é corrompido.
P O resultado filtrado deve ser guardado no estado?
R Não. O resultado filtrado é derivado dos dados originais mais as condições, então calcule-o durante o render; guardar uma segunda cópia facilmente deixa duas versões fora de sincronia.
