"Why does the useEffect in Next.js fire each time I navigate to a new route

Question

"Why does the useEffect in Next.js fire each time I navigate to a new route

Currently, I have implemented a useEffect function within the Layout component. This function is responsible for fetching my userData and storing it in the redux-store. However, I have noticed that this function gets triggered every time there is a route change.

I would like the useEffect function to only run the first time and avoid triggering again when the routes are changed. This continuous triggering is resulting in unnecessary requests being sent to the server. How can I prevent this from happening?

Below is the code snippet of my Layout component:

import { useEffect, useState } from "react";
import Navbar from "../navbar/navbar";
import Footer from "../footer/footer";
import Head from "next/head";
import { useCookies } from "react-cookie";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { getUserData } from "../../redux/actions/Auth";

const Layout = ({ children }) => {
  const [cookie, setCookie] = useCookies(["token"]);
  const dispatch = useDispatch();

  useEffect(() => { // Issue: useEffect triggers on each route change
    const { token } = cookie;
    if (token) {
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
      dispatch({ type: "IS_LOGGED_IN" });
      dispatch(getUserData(token));
    }
  }, []);

  return (
    <div className="layout" dir="rtl">
      <Head>
        <meta name="description" content="" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link
          rel="preconnect"
          href="https://fonts.gstatic.com"
          crossOrigin="true"
        />
        <link
          href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap"
          rel="stylesheet"
        />
        <link
          rel="stylesheet"
          type="text/css"
          charset="UTF-8"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"
        />
        <link
          rel="stylesheet"
          type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
        />
      </Head>
      <Navbar />
      {children}
      <Footer />
    </div>
  );
};

export default Layout;

javascript next.js

Answer 1

Answer №1

The Issue:

Using the useEffect hook in a way that triggers on component mount and with every route change, which is the expected behavior when used in the Layout component.

Possible Solutions:

To address this issue, one solution is to implement the getUserData(token) function in a parent component of Layer, which remains unaffected by route changes.

Another approach involves using a separate state variable to manage the API call status. If you have an IS_LOGGED_IN action that alters your reducer, consider updating it as follows:

case IS_LOGGED_IN:
  return {
    ...state,
    isUserLoggedIn: true
  }

Subsequently, ensure to check the value of this property within the useEffect before dispatching getUserData:

const isLoggedIn = useSelector(state => state.user.isUserLoggedIn) // Retrieve isUserLoggedIn from the state

useEffect(() => { 
    if (!isLoggedIn) {  // -----> Call getUserData if the user is not logged in

      const {token} = cookie;     
      if (token) {
        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
        dispatch({ type: "IS_LOGGED_IN" });
        dispatch(getUserData(token));
      }
    }
  }, [isLoggedIn]);

Insight:

Upon utilizing the Layout component, the initial value of isLoggedIn is false (reflecting the user's non-logged-in state), prompting the execution of dispatch(getUserData(token)) to fetch data. Subsequently, once isLoggedIn changes to true, the conditional statement inside the useEffect prevents further invocation of getUserData.

Note: It may be necessary to introduce another action in the reducer to effectively toggle between the user being logged in or out within the application.

Answer 2

The Issue:

Using the useEffect hook in a way that triggers on component mount and with every route change, which is the expected behavior when used in the Layout component.

Possible Solutions:

To address this issue, one solution is to implement the getUserData(token) function in a parent component of Layer, which remains unaffected by route changes.

Another approach involves using a separate state variable to manage the API call status. If you have an IS_LOGGED_IN action that alters your reducer, consider updating it as follows:

case IS_LOGGED_IN:
  return {
    ...state,
    isUserLoggedIn: true
  }

Subsequently, ensure to check the value of this property within the useEffect before dispatching getUserData:

const isLoggedIn = useSelector(state => state.user.isUserLoggedIn) // Retrieve isUserLoggedIn from the state

useEffect(() => { 
    if (!isLoggedIn) {  // -----> Call getUserData if the user is not logged in

      const {token} = cookie;     
      if (token) {
        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
        dispatch({ type: "IS_LOGGED_IN" });
        dispatch(getUserData(token));
      }
    }
  }, [isLoggedIn]);

Insight:

Upon utilizing the Layout component, the initial value of isLoggedIn is false (reflecting the user's non-logged-in state), prompting the execution of dispatch(getUserData(token)) to fetch data. Subsequently, once isLoggedIn changes to true, the conditional statement inside the useEffect prevents further invocation of getUserData.

Note: It may be necessary to introduce another action in the reducer to effectively toggle between the user being logged in or out within the application.

"Why does the useEffect in Next.js fire each time I navigate to a new route

Answer №1

The Issue:

Possible Solutions:

Insight:

Similar questions

Having trouble accessing a React component class from a different component class

I experienced an issue with Firestore where updating just one data field in a document caused all the other data to be wiped out and replaced with empty Strings

Concealing the rear navigation button within the material carousel

Is your jQuery .on function failing to properly detect click events?

Implementing dynamic component swapping in Vue 3 using components from another component

Patience is key when it comes to waiting for a function to finish before moving on to the next step

Encountered a Dojo error of "TypeError {stack: (...), message: "undefined is not a function"}" when attempting to display a gif during an ajax load

Tips for detecting a new day with server-side JavaScript

Redirecting with Express js when the cookie is not found

When attempting to render a base64 string in an <img> tag using ReactJS, an error message ERR_INVALID_URL is displayed

executing several asynchronous requests upon loading the webpage in a single-page application

How can I convert an object array back into an iterated collection after using the find() method in MongoDB?

Why is it that a JSX element can take a method with parentheses or without as its child?

Error: Unable to interpret the URL provided in /api/posts/1

What steps are necessary to create an npm package utilizing three.js without any dependencies?

Automating button clicks after a component has loaded in Angular 2+ can be achieved by implementing a

Sending information from the parent component to the child Bootstrap Modal in Angular 6

Capturing numerous data points with JavaScript

Tips for expanding the content of a blogger page to fill the entire frame of the page

What is the method for altering the date format of a published article?