Manejo de Estados Derivados en React con useState

¿Cómo manejar eficazmente el estado en React?

Manejar el estado es fundamental al desarrollar aplicaciones en React, y como desarrolladores, es vital conocer las diferentes maneras y paradigmas disponibles para hacerlo. En nuestra aplicación ToDoMachine, hemos utilizado estados independientes imperativos mediante React.useState. Sin embargo, llegará el momento en que podamos querer considerar el uso de estados derivados o compuestos para una gestión más eficiente.

¿Qué es un estado derivado y cómo implementarlo?

Un estado derivado se genera a partir de otros estados ya existentes. Esto significa que no se crea de manera independiente usando useState, sino que depende de las propiedades de otros estados para calcular su valor. Por ejemplo, variables como CompletedToDoos o TotalToDoos toman información de los ToDoos que ya existen para calcular sus valores, sin necesidad de definir nuevos estados.

Ejemplo de código

const completedToDoos = ToDoos.filter(todo => todo.completed).length;
const totalToDoos = ToDoos.length;

Esto asegura que no creamos estados innecesarios que solo repiten información derivada de otro estado. Sería un error común usar useState de la siguiente manera:

const [totalToDoos, setTotalToDoos] = useState(ToDoos.length); // No recomendado

En lugar de crear un estado independiente, simplemente utiliza variables derivadas, lo que es más eficiente y evita la duplicación de datos.

¿Cómo utilizar correctamente los custom hooks?

Un buen diseño de custom hooks es clave para un desarrollo de React efectivo y eficiente. En nuestro ejemplo, useToDoos es un custom hook que aprovecha otro hook personalizado useLocalStorage para gestionar los estados de localStorage:

Estructura de useToDoos

• Trae información almacenada en localStorage.
• Usa hooks como useState para manejar estados específicos como SearchValue y OpenModal.
• Calcula estados derivados para aspectos como búsqueda de ToDoos.

Estructura del custom hook

function useToDoos() {
  const [ToDoos, saveToDoos] = useLocalStorage('ToDoos', []);
  const [searchValue, setSearchValue] = React.useState('');
  
  const completedToDoos = ToDoos.filter(todo => todo.completed).length;
  const totalToDoos = ToDoos.length;
  
  return {
    ToDoos,
    searchValue,
    completedToDoos,
    totalToDoos,
    setSearchValue,
  };
}

¿Cuándo considerar el uso de estados compuestos o useReducer?

El uso de estados compuestos permite que distintas partes de tu aplicación compartan el mismo estado de manera eficiente. Esto se puede lograr mediante useReducer, que ofrece una manera más estructurada de manejar estados complejos en React.

Ventajas de useReducer:

• Mejor organización del código al agrupar lógica de actualización del estado.
• Mayor escalabilidad al manejar estados complejos y múltiples actualizaciones.
• Facilita la depuración al centralizar las actualizaciones de estado en una función reductora.

En resumidas cuentas, saber cuándo y cómo implementar estados derivados, custom hooks, y potencialmente useReducer, te lleva a una gestión más limpia y mantenible de tu aplicación React. Te animo a explorar estas posibilidades y evaluar dónde valdría la pena hacer cambios en tu propio código. ¡Sigue aprendiendo y perfeccionando el arte del estado en React!