La creación de aplicaciones escalables en React requiere algo más que una lógica empresarial sólida. La arquitectura de sus componentes juega un papel importante en el mantenimiento, el rendimiento y la flexibilidad de su aplicación a medida que crece. Una de las tareas fundamentales en muchas aplicaciones web es el manejo de listas de datos. Ya sea que se trate de mostrar listados de productos, tablas o paneles, a menudo encontrará escenarios que exigen estructuras de listas repetibles y reutilizables.

Al crear componentes de lista reutilizables, puede reducir significativamente la complejidad de su código base y al mismo tiempo mejorar la mantenibilidad y la escalabilidad. Esta publicación de blog explorará cómo crear componentes de lista reutilizables en React, por qué es importante para escalar aplicaciones y proporcionará ejemplos de código extensos para guiarlo a través del proceso.

Por qué es importante la reutilización para escalar aplicaciones React

La reutilización es clave cuando se trata de escalar aplicaciones de React. En lugar de duplicar código para manejar diferentes componentes de lista en su aplicación, crear componentes de lista reutilizables le permite abstraer la lógica común y la estructura de la interfaz de usuario en componentes independientes. Esto permite que sus componentes de React crezcan de forma modular y evita la duplicación de código, lo que puede generar posibles errores y problemas de mantenimiento a medida que su aplicación se expande.

Al crear componentes reutilizables, puede pasar varios accesorios para controlar la representación de listas, lo que hace que su aplicación sea más dinámica y flexible sin tener que reescribir la misma lógica para cada caso de uso. Este enfoque no solo hace que su aplicación sea escalable, sino que también mejora la experiencia del desarrollador al simplificar la legibilidad y el mantenimiento del código.

Conceptos básicos de los componentes de listas reutilizables

Para crear componentes de lista reutilizables y escalables, es necesario comprender varios conceptos de React:

Props y Estado: Le permiten pasar datos a sus componentes y controlar el comportamiento interno de sus componentes, respectivamente.

Métodos de matriz: métodos como .map(), .filter() y .reduce() son esenciales para transformar matrices en componentes de React.

Composición sobre herencia: en React, se prefiere el patrón de composición a la herencia. Puedes crear interfaces de usuario complejas combinando componentes más pequeños y reutilizables.

IU basada en accesorios: los componentes de la lista reutilizables deben estar controlados por accesorios. Esto le permite pasar diferentes datos, lógica de representación e incluso estilos de los componentes principales.

Ejemplo 1: Un componente de lista reutilizable simple

Comencemos creando un componente de lista simple y reutilizable que pueda aceptar una serie de elementos como accesorios y representarlos dinámicamente:

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    

{items.map((item, index) => (
• {item}
))}

En este ejemplo, SimpleList acepta una propiedad de elementos, que es una matriz. Usamos la función .map() para iterar a través de la matriz y representar cada elemento dentro de una lista desordenada (

). Cada elemento está envuelto en un elemento
• . La propiedad clave garantiza que React pueda actualizar eficientemente el DOM cuando cambia la lista.

  Ejemplo de uso:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      
  
        
  Fruit List
        
    );
  };
  
  export default App;
  

  Este ejemplo muestra una lista básica de frutas. El componente es lo suficientemente flexible como para poder pasarle cualquier conjunto de datos.

  Mejora de la reutilización del componente de lista

  Si bien el ejemplo anterior es funcional, es muy limitado. En aplicaciones del mundo real, a menudo es necesario manejar requisitos más complejos, como representar elementos de lista de forma condicional, aplicar estilos personalizados o agregar detectores de eventos a elementos individuales.

  Hagamos que nuestra SimpleList sea más reutilizable permitiendo una lógica de renderizado personalizada a través de un accesorio de renderizado.

  Ejemplo 2: uso de accesorios de renderizado para renderizado de listas personalizadas

  Los accesorios de renderizado son un patrón en React que te permite controlar lo que se renderiza dentro de un componente. A continuación se explica cómo puede utilizar este patrón para permitir la representación personalizada de elementos de la lista:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      

  {items.map((item, index) => (
  • {renderItem(item)}
  ))}
  ); };

  En este caso, el componente reutilizableList acepta una propiedad renderItem, que es una función que toma un elemento y devuelve JSX. Esto proporciona una forma flexible de controlar cómo se representa cada elemento de la lista.

  Ejemplo de uso:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  En este ejemplo, la propiedad renderItem nos permite personalizar cómo se muestra cada usuario. Ahora podemos reutilizar el mismo componente de lista para cualquier estructura de datos, representándolo según el caso de uso específico.

  Ejemplo 3: hacer que los componentes de la lista sean extensibles con componentes de orden superior

  Otro patrón poderoso en React es el componente de orden superior (HOC). Un HOC es una función que toma un componente y devuelve un nuevo componente con funcionalidad adicional.

  Por ejemplo, si quisiéramos mejorar nuestra lista reutilizable con comportamientos adicionales como la obtención de datos o la representación condicional, podríamos usar un HOC.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return 
  Loading...
  ;
      return ;
    };
  };
  

  Aquí, withLoading HOC agrega comportamiento de carga a cualquier componente. Apliquémoslo a nuestra ListaReutilizable:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      
  
        
  User List
         (
            
  
              
  {user.name}
              
  Age: {user.age}
            
          )}
        />
      
    );
  };
  

  En este ejemplo, withLoading HOC envuelve reutilizableList y le agrega administración del estado de carga. Este patrón promueve la reutilización de código al mejorar los componentes con lógica adicional sin modificar el componente original.

  Ejemplo 4: Componentes de lista avanzada con ganchos

  Con los ganchos de React, podemos llevar los componentes de la lista reutilizables a otro nivel integrando lógica con estado directamente en los componentes. Creemos una lista reutilizable que pueda manejar la paginación.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage   1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  El gancho usePagination encapsula la lógica de paginación. Ahora podemos usar este enlace dentro de nuestro componente de lista.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      
  
        
  
          {currentItems.map((item, index) => (
            
  {renderItem(item)}
          ))}
        
  
          
            Previous
          
          
            Next
          
        
      
    );
  };
  

  Ejemplo de uso:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i   1}`);
  
    return (
      
  
        
  Paginated List
        
  {item}
  }
        />
      
    );
  };
  

  Este ejemplo muestra una lista paginada donde los usuarios pueden navegar a través de páginas de elementos. El gancho maneja toda la lógica de paginación,

  haciéndolo reutilizable en diferentes componentes.

  Conclusión

  Crear componentes de lista reutilizables en React es una práctica fundamental para crear aplicaciones escalables. Al abstraer la lógica común y utilizar patrones como accesorios de renderizado, componentes de orden superior y enlaces, puede crear componentes de lista flexibles, extensibles y fáciles de mantener que se adapten a diferentes casos de uso.

  A medida que su aplicación React crece, la adopción de componentes reutilizables no solo simplifica su base de código sino que también mejora el rendimiento, reduce la redundancia y permite una iteración rápida de nuevas funciones. Ya sea que maneje listas simples o requisitos de interfaz de usuario más complejos, invertir tiempo en la creación de componentes reutilizables dará sus frutos a largo plazo.

  Referencias

  Reaccionar documentación oficial
  
  Reaccionar accesorios de renderizado
  
  Reaccionar componentes de orden superior
  
  Ganchos de reacción