Gestión de estado más sencilla con UseImmer en React

El manejo de State en React a veces puede ser un desafío, especialmente cuando se trata de entender las mutaciones y el manejo adecuado de las referencias. Al utilizar el setter de useState, a menudo tienes que crear nuevos arrays u objetos para garantizar que React reconozca tus cambios. Esto puede volverse confuso rápidamente y requerir mucho código. Una alternativa es useImmer, que te permite modificar el State de una manera mucho más intuitiva. En esta guía, vamos a pasar paso a paso por el proceso de cómo puedes utilizar useImmer en lugar de useState.

Principales conclusiones

• useImmer es un reemplazo de useState que facilita el manejo de State mutable en React.
• Con useImmer puedes realizar cambios directamente en arrays y objetos sin necesidad de crear manualmente nuevas referencias.
• Las mutaciones se convierten automáticamente en nuevos estados inmutables, lo que simplifica considerablemente el manejo.

Guía paso a paso

Instalación de useImmer

Primero asegúrate de que useImmer esté instalado. Esto se logra mediante el comando de terminal:

npm install immer

Una vez completada la instalación, verifica que el paquete aparezca correctamente en tu archivo package.json. Deberías ver immer en la lista de dependencias.

Uso de useImmer

Ahora que useImmer está instalado, puedes usarlo en tu proyecto. Solo tienes que importarlo en el archivo donde deseas administrar el State:

import { useImmer } from 'use-immer';

Introducción al uso de useImmer

Comparado con useState, la estructura de tu código permanece casi igual. En lugar de useState, usas useImmer para obtener tu State actual y una función para cambiar el State.

const [videos, setVideos] = useImmer(initialVideos);

En este ejemplo, initialVideos es el valor inicial de tu State. Ahora puedes utilizar setVideos para realizar cambios en tu State.

Mutaciones con useImmer

Con useImmer tienes la flexibilidad de mutar directamente el State. Esto significa que puedes utilizar métodos como push o splice sin necesidad de crear manualmente un nuevo array u objeto. Aquí tienes un ejemplo de cómo agregar un nuevo vídeo:

setVideos(draft => { draft.push(newVideo); // newVideo es el objeto a agregar
});

En este caso, draft será una representación mutable de tu State. Cualquier cambio que realices en él automáticamente resultará en la creación de un nuevo State inmutable.

Modificación de entradas existentes

Si deseas modificar una entrada existente, también es sencillo con el uso de useImmer. Solo necesitas encontrar la entrada en el array y realizar los cambios deseados:

setVideos(draft => { const videoToEdit = draft.find(video => video.id === targetId); if (videoToEdit) { videoToEdit.title = newTitle; // Cambia el título videoToEdit.source = newSource; // Cambia la fuente }
});

En este caso, puedes acceder a un video específico en el array draft y realizar los cambios deseados. Estos cambios se tratarán automáticamente como nuevas referencias.

Eliminación de una entrada

Eliminar una entrada también se vuelve más sencillo. Puedes utilizar filter o splice para eliminar el elemento deseado. Aquí tienes un ejemplo con splice:

setVideos(draft => { const index = draft.findIndex(video => video.id === targetId); if (index!== -1) { draft.splice(index, 1); // Eliminar vídeo }
});

Esto elimina el video con la ID correspondiente del array de borradores.

Integración en proyectos existentes

Reemplazar useState con useImmer puede simplificar y hacer tu código más legible. Solo asegúrate de que donde hayas utilizado useState, puedas introducir useImmer.

Es importante tener en cuenta que el uso de useImmer no afecta negativamente al rendimiento. Sin embargo, siempre debes asegurarte de que tu código permanezca claro y bien estructurado.

Resumen

En este tutorial has aprendido cómo utilizar useImmer en tu proyecto de React para simplificar la gestión del estado. Ahora puedes tener acceso directo a las mutaciones, lo que hace que el desarrollo sea más eficiente y agradable. Gracias a la conversión automática en estados inmutables, React mantiene el control y asegura que todos los cambios se detecten correctamente.