React useeffect with empty dependency array running twice

Question

I am rendering a simple react app component but I am not able to understand why "Inside useeffect hook." is being printed on console twice. Should it not just be printed once after the component is rendered, since there is no state change and the dependency array is also empty? Below is the code: `

export default function App(){
    const [count, setCount] = React.useState(0);
    useEffect(()=>{
        console.log("Inside useeffect hook.")
    },[]);

    return(
        <h1>hey.</h1>
    );
}

`

score 0 · Answer 1 · answered Nov 14 '22 at 05:46

This is expected behavior of StrictMode added in React 18. You can read about it here in the docs. It unmounts and mounts again every component when it's mounted for the first time (only in dev environment), that's why your useEffect callback gets called twice

score 0 · Answer 2 · answered Nov 14 '22 at 06:13

0

When we create our React app, using npx create-react-app, it creates our project with React.StrictMode. In the index.js file you can see this,

root.render(<React.StrictMode><App /></React.StrictMode>);

Just Remove the React.StrictMode and it will solve your problem.

root.render(<><App /></>);

answered Nov 14 '22 at 06:13

Argha Shipan Sarker

135
1
8

Hi Argha! `StrictMode` is there for a really good reason. Do not remove it systematically. See https://stackoverflow.com/questions/72238175/useeffect-is-running-twice-on-mount-in-react – Youssouf Oumar Nov 14 '22 at 08:53
Thank's for the information @yousoumar – Argha Shipan Sarker Nov 14 '22 at 09:48

DEVNTV · Answer 3 · 2022-11-14T08:52:33.173

0

remove React.StrictMode in the index.js file

react strictMode only work in develop env

see more infor: https://reactjs.org/docs/strict-mode.html

edited Nov 14 '22 at 08:52

answered Nov 14 '22 at 08:51

DEVNTV

1
1

React useeffect with empty dependency array running twice

3 Answers3