Limpie useEffect en React.js siempre que sea posible - Amit Merchant - Un blog sobre PHP, JavaScript, etc.

El gancho useEffect en React.js es el que usaría para ejecutar efectos secundarios para un componente en particular.

Sin embargo, hay un pequeño problema.

Índice
  1. El problema
  2. La función de limpieza
  3. La explicación
  4. En conclusión

El problema

Por ejemplo, si desea ejecutar algunos efectos secundarios solo una vez cada vez que se procesa un componente (o, en otras palabras, cuando se monta el componente), así es como puede hacerlo.

useEffect(() => {
  // This runs only on mount (when the component appears)
}, []);

Como puede ver, dejaría la matriz de dependencias vacía en este caso, y ahora todo lo que hay dentro useEffect solo se ejecutaría una vez en cada render.

Esto debería funcionar bien, pero considere el siguiente escenario en el que renderizaría un cuadro de diálogo mientras renderiza el componente.

Así es como se vería.

useEffect(() => {
    const dialog = dialogRef.current;
    dialog.showModal();
}, []);

Puede pensar que esto funcionaría perfectamente bien, pero pensemos en una situación en la que, digamos que su aplicación es una aplicación de una sola página (SPA) y navega a la otra página mientras el cuadro de diálogo aún está abierto y regresa una vez más a la misma página.

En este caso, lo anterior useEffect volvería a correr y el <dialog> El elemento generaría un error porque la instancia anterior del cuadro de diálogo aún está abierta.

La función de limpieza

Para mitigar esto, podemos escribir una función de limpieza en este useEffect quien cierra el dialog ejemplo.

Así es como se vería.

useEffect(() => {
    const dialog = dialogRef.current;
    dialog.showModal();

    // the cleanup function
    return () => dialog.close();
}, []);

La explicación

Dado que la función de limpieza se ejecutaría antes de ejecutar la función real useEffect lógica, primero cerraría la instancia inicial del diálogo y abriría una nueva instancia del diálogo en situaciones donde el useEffect funcionaría varias veces como mencioné antes.

Aquí está la secuencia de cómo funcionan las cosas.

  • los <dialog> está abierto
  • los <dialog> está cerrado por la función de limpieza cuando useEffect corre de nuevo
  • los <dialog> luego abre

Finalmente, la función de limpieza vuelve a ejecutarse cuando el componente se desmonta (elimina).

En conclusión

Como puede ver, para evitar que ocurran este tipo de problemas, siempre es recomendable utilizar el useEffect gancho con una función de limpieza que eventualmente desharía el useEffect al volver a montar el componente.

Si quieres conocer otros artículos parecidos a Limpie useEffect en React.js siempre que sea posible - Amit Merchant - Un blog sobre PHP, JavaScript, etc. puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas