Solución:
Si lo entiendo correctamente, desea imitar el comportamiento “en el componente montado” de los componentes de reacción basados en clases regulares a través de useEffect(), de modo que la devolución de llamada del efecto solo se active una vez en el primer renderizado.
Para lograr ese comportamiento, puede pasar una matriz vacía al segundo argumento de useEffect() al igual que:
useEffect(() => {
loadMessages();
}, []); /* <-- add this */
El segundo argumento de matriz le permite especificar qué prop variables desencadenan el useEffect() devolución de llamada (si corresponde) cuando cambian sus valores.
Al pasar una matriz vacía, esto significa que useEffect() no se activará por ningún cambio en la entrada prop variables y, a su vez, solo se llamará una vez, durante el primer renderizado.
Para obtener más información sobre este segundo argumento, consulte esta documentación y esta documentación
useEffect() es un gancho de reacción para componentes funcionales que cubre la funcionalidad de los ganchos del ciclo de vida de los componentes de la clase. useEffect() combina componentDidMount(), componentDidUpdate() y componentWillUnmount() de los componentes de la clase, lo que significa que se ejecutará cuando se monte el componente, cuando cambie el estado del componente y cuando se desmonte el componente del DOM.
Verifique el siguiente ejemplo,
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
});
El código / alerta anterior se ejecuta cuando el componente está montado / renderizado inicial, cuando el estado del componente cambia y cuando el componente se desmonta del DOM.
Para hacer que el código anterior se ejecute con menos frecuencia, podemos pasar una matriz de valores como segundo argumento, como las dependencias para ese efecto. Si una de las dependencias cambia, el efecto se ejecutará nuevamente.
Considere que tenemos una matriz de personas pasada a los accesorios del componente funcional y queremos que la alerta se ejecute solo cuando la matriz de personas cambie.
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, [props.persons]);
Esto ejecutará el código durante el procesamiento inicial y cuando props.persons cambios.
Entonces, para ejecutar el código solo durante el procesamiento inicial / montaje del componente, puede pasar una matriz vacía, lo que significa que no se especifican dependencias cuando se debe ejecutar el efecto. Por lo tanto, se ejecuta durante el renderizado inicial y cuando se desmonta el componente.
useEffect(() => {
setTimeout(() => {
alert("data saved");
}, 1000);
}, []);
Puede modificar su useEffect() gancho como se muestra a continuación para llamarlo solo una vez para obtener datos de API,
useEffect(() => {
loadMessages();
}, []);