Nextjs is rendering 4 times and is it normal?

Question

"use client";
import Dashboard from "./dashboard/page";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    localStorage.setItem("Hiii", "hmm2");
    console.log(localStorage.getItem("Hiii"));
    localStorage.removeItem("Hiii");
    console.log(localStorage.getItem("Hiii"));
  }, []);

  console.log("hmmm");

  // return <Dashboard />;
  return (
    <main className="overflow-x-auto  w-11/12 item-center mx-auto space-y-4"></main>
  );
}

I have this code but it renders twice

As you can see, it renders two times, and is this normal behavior?

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
    reactStrictMode: false,
  },
};

module.exports = nextConfig;

I also set reactStrictMode to false but it does not fix anything.

You're not disabling strict mode. `reactStrictMode` flag should be outside of the `experimental` flag. — ivanatias, Jan 30 '23 at 00:12
@ivanatias is right. An since Strict Mode is not deactivated, this might help: [Why useEffect running twice and how to handle it well in React?](https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react) — Youssouf Oumar, Jan 30 '23 at 07:30

score 0 · Answer 1 · answered Jan 30 '23 at 03:14

the solution to your question may have been answered in this link: UseEffect being called multiple times

quoting:

Your useEffect is executed only once per render cycle, but you have several state updates in your useEffect which cause a re-render. Hence you get a lot of alerts.

Also note that useEffect will

when you provide empty array dependency, your useEffect execute once
when you some value as dependency (eg: [name] ), your useEffect execute when name state/prop changes
useEffect executes on every re-render if you don't pass the dependency array. Read here on re-render

Nextjs is rendering 4 times and is it normal?

1 Answers1