Ao trabalhar no React, é comum ter um componente de lista que aceita dados e mapeia cada item para exibi-lo. No entanto, diferentes partes do seu aplicativo podem exigir renderizações diferentes para os mesmos dados. A melhor solução para isso é tornar seu componente de lista mais flexível usando um suporte de renderização para passar uma função de renderização personalizada.

Por que isso é necessário?

Imagine que você tem uma lista de usuários em seu aplicativo. Em algumas áreas, você deseja exibir apenas os nomes de usuário e, em outras, precisa mostrar informações mais detalhadas, como endereços de e-mail ou fotos de perfil. A criação de vários componentes de lista para cada caso de uso pode levar à duplicação de código e dificultar a manutenção do projeto.

Qual é a solução?

Uma solução simples e elegante é fazer com que seu componente de lista aceite uma função renderItem. Esta função pega um item individual (no nosso caso, um usuário) como argumento e retorna um nó React que pode ser renderizado da maneira que você desejar.

import React from 'react';

const List = ({ data, renderItem }) => {
  return (
    

{data.map((item) => (
• {renderItem(item)}
))}

Como usar este componente?

import List from './List';

const users = [
  { id: 1, name: 'John Doe', email: '[email protected]' },
  { id: 2, name: 'Jane Smith', email: '[email protected]' }
];

const UserList = () => {
  return (
     {user.name}}
    />
  );
};

// or 

const DetailedUserList = () => {
  return (
     (
        

          {user.name}
          
{user.email}
        
      )}
    />
  );
};

Por que este é um ótimo padrão?

Este padrão permite flexibilidade máxima com duplicação mínima de código. Em vez de criar um componente de lista diferente para cada caso de uso, você tem um componente de lista que pode lidar com qualquer requisito de renderização.

Se você trabalhou com React Native, esse padrão deve parecer familiar, pois é usado em componentes de lista, como FlatList. É uma solução comprovada e confiável para renderização de listas.

Ao permitir que seu componente de lista aceite uma propriedade renderItem, você pode criar facilmente componentes reutilizáveis ​​que se adaptam a diferentes partes do seu aplicativo. Essa abordagem simplifica sua base de código, facilita a manutenção e aprimora a escalabilidade de seu aplicativo.

Agora que você aprendeu esse padrão, experimente-o em seus projetos React e verá como ele é poderoso e flexível! Boa codificação?