Nextjs: useEffect only once (if I use Link component)-CodePudding

I use Link component for open pages without reload:

<Link href="/home"><a>Home</a></Link>
<Link href="/page"><a>Page</a></Link>

This in my home:

const loadedRef = useRef(false)
useEffect(() => {
    if(!loadedRef.current){
        console.log("run")
        loadedRef.current = true;
    }
}, []);

This work fine for first load.

If I click on page and click on home, useEffect run again!

I want only and only once load useEffect even click another pages and return to home

CodePudding user response：

useRef creates a value for this specific instance of the home component. If the instance unmounts, then that value goes away. If you want to make a global variable that persists even after the component has unmounted, do something like this:

import React, { useEffect } from 'react';

// Deliberately making this *outside* the component
let loaded = false;

const Home = () => {
  useEffect(() => {
    loaded = true;
  }, []);

  // ...
}

export default Home;