es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El hook useRef de React, ¿cuándo se borra?

31 Jul, 2023 Programación

Estoy utilizando funciones de react como componentes y hooks. En particular useRef. Aquí está la jerarquía:
{Página, hijos: [{onboarding, hijos: [{usuario}]}]}
La función Usuario utiliza useRef de la siguiente manera:

const fetchProfileCalled = useRef(false);
console.log("-- rendering --");

// Se omite useState y fetch de datos rest en useEffect…

useEffect(() => {
  if (!fetchProfileCalled.current) {
    console.log("loading profile");
    fetchProfileCalled.current = true;
    fetchProfile();
  }
}, []);
// ... se omite alguna lógica de renderizado aquí

Y esto es lo que veo registrado al refrescar la página:

--rendering--
loading profile
--rendering--
--rendering--
loading profile
--rendering--
--rendering--
--rendering--

Esperaba ver solo un “loading profile”.
Uso useRef para evitar el rerenderizado.

Además del comportamiento de este código, no puedo encontrar información sobre el ciclo de vida de los hooks. Por ejemplo, cuándo un hook de estado pierde su valor guardado, lo mismo ocurre con el hook useRef, u otros hooks que son stateful.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    A partir del código proporcionado, parece que el hook useRef se está utilizando correctamente para evitar renders innecesarios. Sin embargo, no está evitando que el hook useEffect se llame más de una vez. Esto se debe a que la matriz de dependencias está vacía, lo que significa que el hook useEffect solo se ejecutará una vez en el montaje del componente. Dado que la referencia fetchProfileCalled se está mutando, el hook useEffect seguirá ejecutándose en renders posteriores, aunque el componente no se vuelva a montar.

    Para solucionar este problema, la referencia fetchProfileCalled debería agregarse como una dependencia en el hook useEffect. Esto garantizará que el hook solo se ejecute cuando cambie el valor de la referencia. Aquí está el código actualizado:

    const fetchProfileCalled = useRef(false);
console.log("-- rendering --");

// algunos useState, y fetch de datos rest en useEffect omitidos...

useEffect(() => {
  if (!fetchProfileCalled.current) {
    console.log("cargando perfil");
    fetchProfileCalled.current = true;
    fetchProfile();
  }
}, [fetchProfileCalled]);
// ... algo de lógica de renderizado omitida aquí

    En cuanto al ciclo de vida de los hooks, es importante tener en cuenta que no tienen el mismo ciclo de vida que los componentes de clase. Con componentes funcionales y hooks, no hay concepto de montaje, actualización o desmontaje como lo hay con los componentes de clase. En su lugar, los hooks se llaman en cada renderizado y se pueden utilizar para gestionar el estado, manejar efectos secundarios y realizar otras tareas lógicas. La única excepción es el hook useEffect, que se puede configurar para que se ejecute solo una vez o en dependencias específicas.

Comments are closed.