Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – useEffect does not work in production build NextJS

useEffect does not work in production build. following is the code snippet

useEffect(() => {
    console.log("useeffect 1")
    return () => {
      console.log("useeffect 2")
    };
  }, [])

In development useEffect triggering multiple times and the result is

useeffect 1
useeffect 2
useeffect 1

but In Production build the result is

useeffect 1

is this expected or not

step 1
npx create-next-app@latest

step 2

'use client'
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    console.log("useeffect 1")
    return () => {
      console.log("useeffect 2")
    };
  }, [])
  return (
    <div>TEST</div>
  );
}

step 3 run in development mode
npm run dev

step 4 run production build
npm run build
npm run start

Tags:

2

Answers


  1. 0

    Yes, this is expected assuming you are using React 18 or above. There’s this video where the speaker mentions the same issue. Link to the video. I assume your clean-up is not called because your component is not unmounted otherwise this is not an expected behavior.

    Login or Signup to reply.
  2. 0

    In development mode (npm run dev), Next.js employs a hot module replacement (HMR) mechanism. When a component changes, the entire component tree is recreated, causing useEffect to run again. This leads to the repeated "useeffect 1" and "useeffect 2" logs. In production mode (npm run build followed by npm run start), Next.js pre-renders the components on the server during the build process. This static rendering optimizes performance but prevents useEffect from running on subsequent client-side re-renders, resulting in only the initial "useeffect 1" log.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search