Como desenvolvedores do React, todos nós encontramos cenários em que precisamos renderizar listas de dados. Embora o método .map() funcione bem, repetir a mesma lógica sempre que renderizar uma lista pode se tornar exaustivo e levar à duplicação de código. Felizmente, existe uma maneira mais limpa e escalonável de lidar com isso, usando componentes reutilizáveis, componentes de ordem superior ou ganchos personalizados.

Neste artigo, compartilharei uma abordagem para melhorar a renderização de listas no React, garantindo que seu código permaneça SECO, reutilizável e mais fácil de manter.

Problema principal: Lógica .map() repetitiva

Imagine que você está construindo um painel para um aplicativo de comércio eletrônico. O painel inclui várias listas: pedidos recentes, produtos mais vendidos, comentários de usuários, etc. Você precisa renderizar cada lista usando uma função .map(). Aqui está um exemplo típico:

const orders = [...]; // Array of order data

return (
  
    {orders.map((order, index) => (
      
    ))}
  >
);

Agora, você pode ver a repetição da lógica .map() para cada lista, sobrecarregando seu componente com código semelhante. É aqui que o padrão reutilizável pode ser útil.

Solução: um ListComponent reutilizável

Para evitar a duplicação da lógica .map(), podemos criar um ListComponent reutilizável que abstrai a lógica de mapeamento e nos permite renderizar diferentes componentes com base nos dados.

function ListComponent({ data, renderItem }) {
  return (
    
      {data.map((item, index) => renderItem(item, index))}
    >
  );
}

Uso:

 (
    
  )} 
/>

Neste padrão:
renderItem: Uma função que define como cada item deve ser renderizado

Ao passar uma função renderItem diferente, podemos reutilizar ListComponent para qualquer lista. Isso resulta em um componente limpo e reutilizável, reduzindo a lógica .map() repetitiva.

Mais flexibilidade: componente de ordem superior (HOC)

Se vários componentes precisarem de renderização de lista, vamos levar esse padrão adiante criando um componente HigherOrder. Um HOC permite aprimorar qualquer componente com funcionalidades adicionais — neste caso, renderização de lista.

function withListRendering(WrappedComponent) {
  return function ListWrapper({ data, ...props }) {
    return (
      
        {data.map((item, index) => (
          
        ))}
      >
    );
  };
}

Uso:

const EnhancedOrderComponent = withListRendering(OrderComponent);

// Now render the component with any data array

Ao agrupar OrderComponent com o withListRendering HOC, adicionamos automaticamente o comportamento de renderização de lista sem modificar o componente original. Esse padrão mantém o código modular.

Para amantes de ganchos: gancho personalizado para renderização de lista

Os ganchos React oferecem uma maneira funcional de encapsular a lógica. Se você preferir usar ganchos, aqui está um exemplo de renderização de lista com um gancho personalizado.

function useListRenderer(data, renderItem) {
  return data.map((item, index) => renderItem(item, index));
}

Uso:

function OrdersDashboard({ orders }) {
  const orderList = useListRenderer(orders, (order, index) => (
    
  ));

  return {orderList}>;
}

Esta abordagem move a lógica .map() para o gancho, mantendo a lógica de renderização separada da estrutura do componente. É outra maneira de manter o componente enxuto e focado na apresentação.

Cenário do mundo real: um painel de comércio eletrônico

Vamos aplicar esse padrão a um cenário do mundo real. Imagine que você está construindo um painel de administração de comércio eletrônico onde várias listas de pedidos, produtos, avaliações, etc. precisam ser renderizadas.

Usando a abordagem ListComponent, você poderia renderizar uma lista de pedidos como esta:

 (
    
  )} 
/>

Quando precisamos renderizar uma lista diferente, como produtos, o mesmo ListComponent pode ser reutilizado com diferentes funções renderItem:

 (
    
  )} 
/>

Não há necessidade de reescrever a lógica .map() - apenas reutilize o ListComponent com diferentes dados e componentes. Isso torna a base de código mais sustentável à medida que cresce.

Conclusão: código limpo, reutilizável e escalonável

O padrão reutilizável ListComponent simplifica a renderização da lista React, abstraindo a lógica repetitiva .map(). Se você prefere usar a abordagem de componente básico, HOC ou gancho personalizado, esse padrão garante que o código seja limpo e reutilizável.

Construindo um componente React com múltiplas listas, considere usar um desses padrões para manter os componentes focados na apresentação enquanto separa a lógica da lista externamente.

Que outros padrões reutilizáveis ​​você achou úteis no React? Deixe-me saber nos comentários! e finalmente obrigado pela leitura