Optimización de Custom Hooks en React sin UseReducer

¿Qué es UseReducer y realmente vale la pena usarlo?

UseReducer es una de las herramientas más poderosas en React para gestionar estados complejos de forma declarativa. Aunque proporciona beneficios significativos en la organización del código, no siempre es necesario implementarlo en cada situación. En ocasiones, mantener el código simple, especialmente en proyectos pequeños, puede ser la mejor decisión.

¿Cuándo es útil UseReducer?

• Cuando manejamos múltiples estados: Si tu aplicación tiene numerosos estados y actualizaciones, UseReducer puede ayudar a simplificar y organizar el código.
• Mejora la legibilidad: Para equipos o proyectos donde la estructura del estado necesita ser más clara y mantenible.
• Proyectos grandes y complejos: En aplicaciones grandes con muchos componentes, UseReducer puede ser una herramienta eficaz para manejar los estados.

Sin embargo, en proyectos donde la implementación de Un Reducer pueda ser más una carga que una solución, es aconsejable evaluar la necesidad antes de su implementación.

Análisis del código actual: ¿Debemos cambiarlo a UseReducer?

Antes de considerar cambios, es esencial evaluar el estado actual del código y considerar si el cambio a UseReducer aportará valor verdadero.

¿Cómo está estructurado el código actual?

En el ejemplo proporcionado, se observa un custom hook llamado UseToDoos que maneja múltiples estados y sus actualizaciones. Aunque está bien organizado, levantar una alerta sobre el gigantesco objeto de propiedades es clave. Este objeto contiene tanto estados como actualizadores del estado, y su envergadura puede ser abrumadora.

¿Cuál es el problema con el objeto gigante?

• Orden desorganizado: Propiedades y actualizadores están mezclados, dificultando la lectura y mantenimiento.
• Posibles escalones de crecimiento: A medida que crece el proyecto con más características, este objeto podría volverse inmanejable.

Propuesta de solución: Reordenar sin cambiar la herramienta

Si pasar a UseReducer no es la solución ideal, se sugiere simplemente organizar el código sin hacerlo más complejo.

¿Cómo podemos reorganizar el código existente?

A continuación, se presenta una posible solución que hace que el código sea más legible sin cambiar el enfoque actual:

1. Separar estados y actualizadores:
   • Crear un objeto para los estados.
   • Otro objeto para los actualizadores del estado.
   • Devolver ambos objetos en el hook, garantizando que cada parte tenga una clara responsabilidad.

Este enfoque no solo facilita la lectura, sino que también mantiene la simplicidad, evitando cambios en el paradigma o la introducción de nuevas herramientas.

Ejemplo de código para reordenar el return del hook

// Crear los objetos separados para estados y actualizadores
const states = {
  loading: loading,
  error: error,
  totalToDos: totalToDos,
  completeToDos: completeToDos,
  searchValue: searchValue,
  searchToDos: searchToDos,
  openModal: openModal,
};

const stateUpdaters = {
  deleteToDo: deleteToDo,
  setOpenModal: setOpenModal,
  synchronizeToDos: synchronizeToDos,
};

// Devolver los objetos separados
return { states, stateUpdaters };

Beneficios de esta reorganización

• Claridad: Incrementa la legibilidad al separar claramente la lógica de estado y actualización.
• Mantiene la simplicidad: No añade complejidad adicional ni requiere un cambio de herramienta.
• Facilita la responsabilidad del estado: Cada objeto tiene un propósito claro, lo cual puede ser crítico en el desarrollo y mantenimiento del código.

Recomendaciones finales

Más allá de las herramientas que domines como desarrollador, la clave está en saber cuándo utilizarlas. Tener una variedad de herramientas, como UseReducer en tu educación, te permitirá ser más flexible y alcanzar soluciones óptimas según cada situación. Siempre alienta la discusión entre tu equipo, evalúa y reflexiona sobre la necesidad de cambios antes de implementarlos. Continuar desarrollando estas habilidades permite una evolución continua en el mundo del desarrollo en React.