Renderização de Listas e Condicionais no React: Práticas Essenciais para Interfaces Dinâmicas

Criar interfaces dinâmicas em React exige o uso de técnicas para renderizar listas e mostrar ou ocultar elementos com base em condições. Esses conceitos são fundamentais para construir aplicativos interativos e escaláveis. Neste artigo, vamos entender como percorrer arrays, usar key corretamente e aplicar renderização condicional com exemplos práticos.

Renderizando Listas em React

Em React, podemos percorrer arrays usando o método .map(), transformando dados em elementos de interface.

Exemplo básico:

import React from 'react';

function ListaFrutas() {
  const frutas = ['Maçã', 'Banana', 'Laranja'];

  return (
    <ul>
      {frutas.map((fruta, index) => (
        <li key={index}>{fruta}</li>
      ))}
    </ul>
  );
}

export default ListaFrutas;

🔍 Destaques:

• O método .map() percorre cada item do array e gera um <li>.
• A key garante que o React identifique cada item de forma única, otimizando renderizações.

A Importância da Prop key

O uso de key é essencial quando renderizamos listas:

• Ela ajuda o React a identificar quais itens mudaram, foram adicionados ou removidos.
• Sempre que possível, use IDs únicos, não o índice do array.

<li key={user.id}>{user.name}</li>

Renderização Condicional

A renderização condicional permite exibir conteúdo apenas quando certas condições forem atendidas.

Exemplo com if:

function Saudacao({ usuario }) {
  if (!usuario) {
    return <h1>Bem-vindo, visitante!</h1>;
  }
  return <h1>Olá, {usuario}!</h1>;
}

Exemplo com operador ternário:

function StatusLogin({ logado }) {
  return (
    <div>
      {logado ? <p>Você está logado</p> : <p>Faça login para continuar</p>}
    </div>
  );
}

Renderização Condicional com Operador Lógico &&

Se quisermos exibir algo apenas quando uma condição for verdadeira:

function Aviso({ temAviso }) {
  return <div>{temAviso && <p>Você tem novas notificações!</p>}</div>;
}

Combinação de Listas e Condições

Podemos criar interfaces complexas combinando listas e condições.

import React from 'react';

function Tarefas({ tarefas }) {
  return (
    <div>
      <h1>Lista de Tarefas</h1>
      {tarefas.length === 0 ? (
        <p>Nenhuma tarefa pendente!</p>
      ) : (
        <ul>
          {tarefas.map((tarefa) => (
            <li key={tarefa.id}>{tarefa.nome}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default Tarefas;

Boas Práticas

1. Use IDs únicos em key sempre que possível.
2. Separe lógica de renderização complexa em funções auxiliares para manter o código limpo.
3. Evite renderizar listas muito grandes de uma vez: use paginação ou carregamento sob demanda.
4. Combine condições com clareza: ternários aninhados podem ser confusos; prefira if ou funções auxiliares.

Conclusão

Renderização de listas e condições é essencial para criar aplicativos React eficientes e fáceis de manter. Saber quando usar key, como percorrer arrays com .map() e como aplicar renderização condicional dá mais controle e flexibilidade às suas interfaces.

Conteúdo adaptado do livro “The Road to React”, de Robin Wieruch.