Recientemente tuve un problema con React useEffect siendo llamado dos veces en strictMode . Me gustaría mantener el modo estricto para evitar problemas, pero no veo ninguna buena manera de asegurarme de que algunos efectos específicos solo se ejecuten una vez. Esto es en un entorno next.js , donde específicamente quiero que el código solo se ejecute en el cliente una vez.

Por ejemplo, dado el siguiente componente:

 import React, { useState, useEffect } from "react"; import ky from "ky"; const NeedsToRunOnce: React.FC = () => { const [loading, setLoading] = useState(false); const doSomethingThatOnlyShouldHappenOnce = (data: any) => { // Do something with the loaded data that should only happen once console.log(`This log appears twice!`, data); }; useEffect(() => { if (loading) return; console.log("This happens twice despite trying to set loading to true"); setLoading(true); const fetchData = async () => { const data = await ky.get("/data/json_data_2000.json").json(); setLoading(false); doSomethingThatOnlyShouldHappenOnce(data); }; fetchData(); }, []); return <div></div>; }; export default NeedsToRunOnce;

useEffect se llamará dos veces, y ambas veces la loading seguirá siendo falsa. Esto se debe a que strictMode hace que se llame dos veces con el mismo estado. La solicitud se ejecutará dos veces y llamará a doSomethingThatOnlyShouldHappenOnce dos veces. Todas las llamadas de console.log anteriores aparecerán dos veces en la consola.

Dado que no puedo modificar el estado para que mi componente sepa que la solicitud ya comenzó a realizarse, ¿cómo puedo evitar que la solicitud de obtención ocurra dos veces y luego llamar al código que solo quiero que me llamen una vez? (Para el contexto, estoy inicializando una biblioteca externa con los datos cargados en useEffect , y esta biblioteca solo debe inicializarse una vez).

Encontré un problema de GitHub sobre esto donde Dan Abramov dice:

Por lo general, querrá tener algún tipo de limpieza para su efecto. Debería cancelar su recuperación o asegurarse de ignorar su resultado configurando una variable dentro de su efecto. Una vez que haga esto, no debería haber una diferencia real en el comportamiento.

Si cancela su búsqueda en la limpieza efectiva, solo se completará una solicitud en desarrollo. Sin embargo, tampoco importa si se activa otra solicitud. Se está ignorando de todos modos, y la prueba de estrés solo ocurre en el desarrollo.

Si bien estoy de acuerdo en principio, esto es tedioso en la práctica. Ya llegué a dos casos de uso diferentes en mi aplicación en los que tengo una llamada o solicitud de biblioteca que solo debe realizarse una vez en el cliente.

¿Cuál es una forma confiable de asegurarse de que un fragmento de código en useEffect solo se ejecute una vez aquí? Usar un estado para realizar un seguimiento de que ya se ha ejecutado no ayuda, ya que react llama al componente dos veces seguidas con el mismo estado.