SOLID y Refactorización de Hooks

¿Qué es el principio SOLID en el desarrollo de software?

El principio SOLID se refiere a un conjunto de cinco principios de diseño de software destinados a mejorar la calidad del código, haciéndolo más mantenible y escalable. Aquí se presentan con ejemplos de la vida cotidiana:

• S (Single Responsibility Principle - Responsabilidad única): Un componente debe tener una sola responsabilidad. Por ejemplo, en un restaurante, un chef solo debería encargarse de cocinar, no de limpiar o cobrar.

• O (Open/Closed Principle - Abierto/Cerrado): El software debe ser abierto para ser extendido, pero cerrado para su modificación, permitiendo añadir nuevas características sin alterar el código existente. Es como añadir aplicaciones a tu celular sin afectar las actuales.

• L (Liskov Substitution Principle - Sustitución de Liskov): Los objetos deben ser reemplazables por sus subtipos sin alterar el comportamiento del sistema. Similar a solicitar un taxi, cualquier conductor puede ofrecer el servicio.

• I (Interface Segregation Principle - Segregación de Interfaces): Los clientes no deben estar obligados a depender de interfaces que no utilizan. Mejor una interfaz simple, como un control remoto básico de televisión, a una confusa universal.

• D (Dependency Inversion Principle - Inversión de Dependencias): Los componentes de alto nivel no deben depender de los de bajo nivel, sino de abstracciones. Es como conectar una USB en cualquier puerto compatible.

Estos principios son esenciales para mantener una estructura de proyecto limpia, tanto en el desarrollo de software en general como en el testing.

¿Cómo mejorar la estructura del código en React?

Una mejor estructura del código facilita el mantenimiento y la comprensión del proyecto. En React, esto se puede lograr separando la lógica del componente de su interfaz. Un método recomendado es mediante el uso de custom hooks.

¿Cómo crear un custom hook en React?

Un custom hook permite encapsular lógica reutilizable y abstraerla fuera de los componentes. Vamos a crear un hook para gestionar órdenes:

1. Crear la carpeta y archivo de hook:

   • En tu proyecto, dentro de src, crea la carpeta hooks.
   • Dentro de hooks, crea el archivo useOrders.js.

2. Extraer lógica del componente:

   • Identifica y mueve la lógica del componente que deseas encapsular al hook (estados, proveedores, ciclos de vida, funciones).

3. Inicializar el hook:

   const useOrders = () => {
       // Mover lógica aquí
   };
   

4. Realizar las importaciones necesarias:

   • Importa dependencias requeridas, como useState, useEffect, useCallback desde React y cualquier otra biblioteca o proveedor de servicios.

5. Retornar los estados y funciones necesarios:

   return { user, orders, loading, error };
   

¿Cómo integrar y probar un custom hook?

Después de crear el custom hook, debe ser integrado y probado en el componente original:

• Integrar el hook en el componente:

  • Elimina las importaciones de lógica que has movido al hook.
  • Importa el custom hook y utiliza sus valores retornados dentro del componente.

  import useOrders from 'path/to/hooks/useOrders';
  
  const OrdersComponent = () => {
      const { user, orders, loading, error } = useOrders();
      // Renderizar componente
  };
  

• Probar que el refactor funciona:

  • Ejecuta el comando yarn start para verificar que la aplicación se comporta como antes.
  • Utiliza yarn test y proporciona la ruta del componente a probar, asegurando que las pruebas no se han visto afectadas por el cambio.

Adoptar estas prácticas no solo refina tu código, sino que también facilita las pruebas y garantiza que el desarrollo sea más eficiente y ágil. Además, te prepara para escribir código más limpio y mantener un alto nivel en tu carrera como desarrollador. ¡Sigue adelante!