Uso el componente de Link para abrir páginas sin recargar:
<Link href="/home"><a>Home</a></Link> <Link href="/page"><a>Page</a></Link>Esto en mi casa:
const loadedRef = useRef(false) useEffect(() => { if(!loadedRef.current){ console.log("run") loadedRef.current = true; } }, []);Esto funciona bien para la primera carga.
Si hago clic en la page y hago clic en home , useEffect ejecutar de nuevo!
Quiero solo y solo una vez cargar useEffect incluso hacer clic en otras páginas y volver a casa
useRef crea un valor para esta instancia específica del componente de inicio. Si la instancia se desmonta, ese valor desaparece. Si desea crear una variable global que persista incluso después de que el componente se haya desmontado, haga algo como esto:
import React, { useEffect } from 'react'; // Deliberately making this *outside* the component let loaded = false; const Home = () => { useEffect(() => { loaded = true; }, []); // ... } export default Home;