Patrón Container/Presentational

El patrón de diseño contenedor y presentación es una forma de estructurar componentes en aplicaciones de React para separar la lógica de negocio y el manejo del estado (contenedor) de la lógica de presentación (presentacional).

Tipos de componentes

Contenedor (stateful)

Los componentes contenedores son aquellos que se encargan de manejar la lógica de negocio administrando los estados de manera global o específica en una parte de la aplicación.

En este tipo de contenedores se realizan las siguientes acciones.

• Se realizan peticiones a API's.
• Únicamente renderizan otros componentes.
• Realizan la separación de código a nivel de renderizado.

import React, { useState, useEffect } from 'react';
import TodoList from './TodoList'; // Asegúrate de que la ruta sea correcta

const TodoApp = () => {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    // Simula una llamada a una API para obtener datos
    setTodos([
      { id: 1, text: 'Aprender React' },
      { id: 2, text: 'Aplicar patrones de diseño' },
    ]);
  }, []);

  const handleTodoClick = (id) => {
    // Lógica para manejar el clic en un todo
    console.log(`Todo con id ${id} fue clicado`);
  };

  return (
    <TodoList
      todos={todos}
      onTodoClick={handleTodoClick}
    />
  );
};

export default TodoApp;

Presentador (stateless)

Este tipo de componentes se enfocan en el contenido que se va a renderizar, no cuentan con estado propio, se reduce en gran medida la implementación de lógica dentro del componente y reciben el estado por propiedades.

Los componentes de presentación fácilmente testeables debido a su naturaleza, además de seperar el código en pequénos bloques.

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id} onClick={() => onTodoClick(todo.id)}>
        {todo.text}
      </li>
    ))}
  </ul>
);

Reutilización

Entre los beneficios que este tipo de patrón de diseño nos ofrece, el que más resalta es la reutilización de código. Al tener componentes que únicamente requiren propiedades permite que cualquier componente padre pueda reutilizar un componente de presentación, reduciendo considerablemente código.

Temas a considerar

Prop Drilling: Pasar datos a través de múltiples niveles de componentes puede ser tedioso. En estos casos, considerar el uso de context API o state management libraries como Redux.