Enlaces
Los enlaces son un patrón común en marcos en los que los valores cambian o se producen otros eventos. De forma centralizada, insertan su propio código para ejecutarse cuando el estado cambia o en otras fases del ciclo de vida de una aplicación.
Enlace Effect
En esta unidad, nos centraremos en el enlace Effect. Este enlace se genera siempre que se establece el valor de estado. Se genera cuando se establecen el valor inicial y todas las actualizaciones posteriores.
El enlace Effect permite ejecutar código en respuesta a la configuración del valor. El código que ejecuta puede tener efectos secundarios, por lo que se pueden actualizar los valores según sea necesario.
Cuándo usar el enlace Effect
Puede usar el enlace Effect siempre que necesite centralizar el código para responder a un cambio de estado. Imagine un formulario complejo que incluye muchos valores. Normalmente, se debe deshabilitar el botón Enviar hasta que los datos que se tienen que enviar al servidor estén en un estado válido. Supongamos que tiene eventos para valores individuales que se cambian en los datos. Después de que un usuario seleccione un país o una región en la aplicación, se debe recuperar una lista de provincias del servidor.
No querrá que cada escucha de eventos examine el estado para ver si los datos están listos para enviarse al servidor. Esta configuración sería ineficaz. En su lugar, puede usar un enlace Effect. Un enlace Effect puede crear una función que examina los datos. Si los datos están en un estado válido, puede habilitar el botón Enviar.
useEffect
A fin de registrar un cliente de escucha para el enlace Effect, use useEffect. useEffect acepta una función sin parámetros que se va a ejecutar cuando cambie el estado.
useEffect(() => {
// code goes here
});
De forma predeterminada, useEffect se ejecuta siempre que se cambia el estado en cualquier objeto con estado. Puede proporcionar una dependencia para habilitar el enlace solo para un grupo determinado de objetos.
useEffect(() => {
// code goes here
}, [ someStatefulObject ]);