Next js routing triggers useEffect

Question

I'm trying to fetch data inside useEffect using axios but it fetches the data everytime I change the page. Is there a way to not trigger useEffect when changing the page? I tried to use shawllow push but it didn't work. I can't fetch on server side because I use next/router inside axios interceptor.

   import { useRouter } from 'next/router';
   const router = useRouter();
   router.push('/', '/', { shallow: true })

With the above code, it will trigger useEffect when switching routes.

  useEffect(() => {
    fetch.get('/endpoint').then(response => {
     // do stuff
    });
  }, []);

Answer 1

If you have something in useEffect that you only want to run once, add an empty array as the dependency array.

Example:

  useEffect(() => {
      // your axios fetch here
  }, []);

Empty array as the dependencies means the effect is run once. If you don't specify the dependencies, the effect will run after every render.