useState vs useReducer

•

🤷‍♂️ ¿Deberías usar `useState` o `useReducer`? ⁇ ¿Cómo decides que utilizar? 🙋 ¿Que ventajas tiene un hook sobre el otro? 🤔 Te cuento algunas razones para preferir `useReducer`

useState es el hook "básico". Permite que un componente almacene estado. `const [state, setState] = useState()` El estado puede tener cualquier forma: string, number, object, etc. Para actualizar el valor de `state` usas `setState` y el componente se re-renderizará.

useReducer también sirve para manejar el estado de un componente, pero implementa un patrón "reducer" (o incluso similar a una maquina de estados finita). `const [state, send] = useReducer(reducer, initialState)`

Utiliza una función `reducer`. Recibe el estado actual y una acción que define que cambio se hará al estado. Cuando quieres actualizar el estado usarás la función `send` que no es la que actualiza el estado como en el caso de `useState`, si no, que sólo enviará una acción.

useReducer vs useState 1️⃣ Separa las acciones de escritura y lectura del estado 2️⃣ Evitas algunas complejidades de useState, como el uso del "useState" funcional para actualizar el estado basado en un estado previo. 3️⃣ Es más testeable dado que la función reducer es **pura**

4️⃣ La actualización o escritura del estado se centraliza (en la función reducer) lo que usualmente es más sencillo de entender y mantener. 5️⃣ Es "sencillo" manejar estados relacionados. 6️⃣ Puedes mover el manejo de estado a otro archivo simplificando el componente.

En general `useReducer` te permite desacoplar la lógica de como actualizar el estado. Esto te permite reducer o remover dependencias innecesarias e incluso disminuir el uso de `useEffect`.

Una "regla" que me gusta seguir es: Si me encuentro usando 3 o más `useState` con estado relacionados, es entonces buen momento de usar `useReducer`.

Otro momento en que utilizo `useReducer` es dentro de un Context. Si el Contexto maneja un estado interno, entonces utilizo `useReducer` para manipularlo así los componentes hijos del reducer solo llamarán acciones: **declarativo**