A medida que React continúa dominando el ecosistema front-end, dominar sus patrones de diseño puede mejorar significativamente la eficiencia y escalabilidad de sus aplicaciones. Los patrones de diseño de React ofrecen mejores prácticas para organizar y estructurar componentes, gestionar el estado, manejar accesorios y mejorar la reutilización. En este blog, exploraremos algunos patrones de diseño clave de React que pueden hacer que su proceso de desarrollo pase de bueno a excelente.

1. Componentes de presentación y de contenedor

Uno de los patrones fundamentales en React es el patrón Componentes presentacionales y de contenedor, que trata de separar preocupaciones:

• Componentes presentacionales: Estos componentes son responsables de cómo se ven las cosas. Reciben datos y devoluciones de llamadas a través de accesorios, pero no tienen lógica propia. Su único propósito es representar la interfaz de usuario.

• Componentes de contenedor: Estos componentes administran cómo funcionan las cosas. Contienen la lógica, administran el estado y manejan la obtención de datos o el manejo de eventos. Los componentes del contenedor pasan datos a los componentes de presentación.

// Presentational Component
const UserProfile = ({ user }) => (
  

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

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: '[email protected]' });

  return ;
};

Este patrón fomenta la separación de preocupaciones, lo que hace que el código sea más fácil de mantener y probar.

2. Componentes de orden superior (HOC)

Los componentes de orden superior (HOC) son ​​un poderoso patrón de diseño para reutilizar la lógica de los componentes. Un HOC es una función que toma un componente y devuelve un nuevo componente con un comportamiento mejorado o funcionalidad agregada.

Este patrón se usa comúnmente para cuestiones transversales como autenticación, temática o recuperación de datos.

// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return 
You need to log in!
;
    }

    return ;
  };
};

// Usage
const Dashboard = () => 
Welcome to the dashboard
;
export default withAuth(Dashboard);

Los HOC promueven los principios DRY (No te repitas) al permitir una lógica reutilizable en múltiples componentes.

3. Accesorios de renderizado

El patrón Render Props implica pasar una función como accesorio a un componente, lo que permite la representación dinámica del contenido en función de esa función. Esto es particularmente útil para compartir lógica con estado entre componentes sin usar HOC.

// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      

        {this.props.render(this.state)}
      
    );
  }
}

// Usage
const App = () => (
  
Mouse position: {x}, {y}
} />
);

Este patrón le brinda flexibilidad al separar la lógica de la interfaz de usuario, lo que hace que los componentes sean más reutilizables y personalizables.

4. Componentes compuestos

El patrón Componente compuesto se usa comúnmente en bibliotecas como reaccionar-select o reaccionar-table. Permite que un componente principal controle un grupo de componentes secundarios. Este patrón promueve la flexibilidad en la creación de interfaces dinámicas y reutilizables.

// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    

      

        {children.map((child, index) => (
           setActiveTab(index)}>
            {child.props.title}
          
        ))}
      
      
{children[activeTab]}
    
  );
};

// Usage
Content of Tab 1
  
Content of Tab 2
;

Este patrón proporciona una API limpia para la comunicación entre padres e hijos y al mismo tiempo mantiene los componentes flexibles y personalizables.

5. Componentes controlados versus no controlados

React proporciona dos formas de administrar las entradas del formulario: componentes controlados y componentes no controlados.

• Componentes controlados: Estos componentes tienen su estado totalmente controlado por React a través de accesorios, lo que los hace más predecibles.

• Componentes no controlados: Estos componentes dependen de referencias para manipular directamente el DOM, lo que proporciona menos control pero potencialmente más rendimiento.

// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return  setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return ;
};

La elección entre estos patrones depende de si necesitas un control detallado u optimizaciones de rendimiento ligeras.

6. Ganchos personalizados

React Hooks nos permite crear lógica personalizada de forma reutilizable. Al extraer la lógica común en enlaces personalizados, podemos evitar la duplicación de código y hacer que nuestra base de código sea más modular.

// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return 
Error: {error.message}
;
  if (!data) return 
Loading...
;

  return 
{data.someField}
;
};

Los enlaces personalizados permiten una mejor separación de inquietudes y la reutilización de funcionalidades comunes de manera declarativa.

Conclusión

Los patrones de diseño son una parte fundamental para escribir aplicaciones React limpias, mantenibles y escalables. Al aprovechar patrones como componentes de presentación y contenedores, HOC, accesorios de renderizado, componentes compuestos y ganchos personalizados, puede asegurarse de que su código sea flexible, reutilizable y fácil de entender.

Comprender e implementar estos patrones puede mejorar drásticamente su flujo de trabajo de desarrollo, haciendo que sus proyectos de React sean más organizados y eficientes. ¡Intenta incorporarlos en tu próximo proyecto y experimenta la diferencia tanto en la calidad del código como en la facilidad de mantenimiento!