Estado de uso vs. useReducer en React: elegir el gancho de administración de estado correcto

Si desea obtener un trabajo de desarrollo web, tendrá más posibilidades de éxito si aprende la biblioteca React JavaScript. React es una de las bibliotecas más utilizadas en la industria. Y una de las características más interesantes de la biblioteca React es el concepto de ganchos.

Los ganchos son simplemente funciones de JavaScript que aíslan y le permiten reutilizar la lógica en una aplicación React. Para la gestión estatal, hay dos ganchos principales a su disposición: el useState gancho y el usarreductor gancho.

Descripción general del gancho useState

El useState hook es la forma más común de manejar el estado en React. La siguiente sintaxis ilustra cómo usar este enlace en su aplicación:

constante [estado, setState] = useState (initialStateValue);

En el bloque de código anterior, el estado La variable contiene datos en la memoria entre renderizaciones. Y establecerestado es la función "establecedor" que manipula el estado variable.

El useState gancho devuelve una matriz con exactamente dos elementos. También toma un valor inicial para la variable de estado.

Por ejemplo, si quieres definir una variable de estado que represente la edad del usuario, con un valor inicial de 17, así lo harías:

constante [EdadUsuario, establecerEdadUsuario] = usarEstado(17);

El establecerEdadUsuario función es responsable de modificar la edad del usuario variable de estado.

establecerEdadUsuario(19);

Es importante tener en cuenta que la actualización del estado, activa la representación de un componente y la actualización incorrecta de una variable de estado puede generar un bucle infinito que puede romper el código.

En React, no es recomendable modificar el estado directamente (como se muestra en el bloque de código a continuación), porque los cambios en las variables que no son de estado no persisten entre los renderizados de los componentes.

edad del usuario = 19;

El estado es local al componente que lo define. Si tiene los mismos componentes representados en la pantalla varias veces, cada componente tendrá su propio estado independiente.

funciónaplicación(){
devolver (




 </div>
 )
}

En el bloque de código de arriba, hay dos Cambiar componentes, pero cada componente maneja su propio estado y no depende del otro componente a menos que un componente comparta su estado con el otro componente.

React maneja las actualizaciones de estado por lotes. Esto significa que cuando llama a la función de establecimiento de una variable de estado, la variable de estado no se actualiza hasta la siguiente representación.

Descripción general del gancho useReducer

useReducer es un gancho React eso puede ser útil siempre que desee manejar varios estados relacionados al mismo tiempo. La sintaxis para usarreductor se parece a esto:

constante [estado, envío] = useReducer (reductor, estado inicial)

En comparación con useState, en usarreductor, hay un estado variable y una despacho función que envía acciones hasta el reductor función que maneja las cargas útiles y actualiza la estado.

Por ejemplo, supongamos que está creando una aplicación de contador simple con botones que pueden restablecer el contador, aumentar el valor del contador o disminuir el valor del contador. Usando useState su código se verá algo como esto:

funciónEncimera(){
constante [contar, establecerCuenta] = usarEstado(0);
devolver(


 El conteo es: {contar}


 setCount (contar + 1)}>Aumentar recuento</button>
 establecerCuenta(0)}>Reiniciar</button>
 setCount (recuento - 1)}>Reducir recuento</button>
 </div>
 </div>
 )
}

La implementación anterior funciona perfectamente. Pero también puede lograr los mismos resultados con la ayuda del usarreductor gancho.

Este ejemplo simplemente pretende demostrar cómo el usarreductor gancho funciona. En una aplicación del mundo real, usarreductor es excesivo para este escenario.

usarreductor hace que sea más fácil manejar estados relacionados y lógica compleja basada en el tipo pasado en el despachado acción objeto.

Por ejemplo, la función de envío podría enviar un acción objeto que se parece a esto:

{tipo:"tipo de acción", carga útil:estado * 2}

Primero importa el usarreductor enganche, luego defina el reductor función con los parámetros: estado y lo desestructurado acción objeto.

importar {usarReductor} de"reaccionar";
funciónreductor(estado, {tipo, carga útil}) {
si (tipo 'cuentaIncremento') {
devolver carga útil;
 } demássi (tipo 'cuentaDisminuir') {
devolver carga útil;
 } demássi (tipo 'reiniciar cuenta') {
devolver carga útil;
 } demás {
devolver estado;
 }
}

Después de definir el reductor función, puede construir el Encimera componente con el usarreductor gancho.

funciónEncimera() {
constante [contar, enviar] = useReducer (reductor, 0);
devolver (


 El conteo es: {contar}


 despacho({ tipo: 'cuentaIncremento', carga útil: cuenta + 1 })}>
 Aumentar conteo
 </button>
 despacho({ tipo: 'reiniciar cuenta', carga útil: 0 })}>
 Restablecer conteo
 </button>
 despacho({ tipo: 'cuentaDisminuir', carga útil: contar - 1 })}>
 Aumentar conteo
 </button>
 </div>
 </div>
 );
}

En el bloque de código anterior, el primer botón envía una acción de tipo contarIncrementar con una carga de contar + 1. Esta acción es responsable de incrementar el valor de conteo.

El segundo botón envía una acción de tipo contarReiniciar con una carga útil de 0 que restablece el valor de conteo a 0.

El tercer botón despacha una acción de tipo contarDecrementar con una carga de contar - 1 que disminuye el valor de conteo en 1.

Elegir entre useState y useReducer Hooks

Ahora que entiendes cómo usar useState y usarreductor anzuelos, es importante saber cuándo utilizar el adecuado.

Si su estado no requiere una lógica compleja, obviamente usando usarreductor puede ser excesivo.

Si tu estado es cualquier cosa menos Primitivos de JavaScript como números, cadenas y valores booleanos, debes usar el useState gancho. Y si el tipo de estado es un objeto o una matriz, entonces debería considerar usar usarreductor en cambio.

A medida que su aplicación crece en complejidad, se vuelve difícil manejar el estado con solo el useState y usarreductor manos.

Esto es cuando puedes usar bibliotecas externas como Redux, Jotai y Zustand. Estas bibliotecas facilitan el manejo de cambios de estado en varios componentes.

Facilitando la gestión de estado con bibliotecas de JavaScript

Las bibliotecas como React, Vue y Svelte tienen sus propias formas de manejar el estado. Manejar la administración del estado por su cuenta con JavaScript estándar es definitivamente algo que puede intentar, pero es mucho más fácil y conveniente usar una biblioteca de JavaScript probada en batalla.

Si está creando una aplicación compleja usando React donde necesita administrar varios componentes, Redux podría ser la mejor opción para usted.