React useeffect with empty dependency array running twice [duplicate]

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>
    );
}

`

Argha Shipan Sarker · Accepted Answer · 2022-11-14 06:13:51Z

1

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, 2022 at 6:13

Argha Shipan Sarker

1652 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Youssouf Oumar Over a year ago

Hi Argha! StrictMode is there for a really good reason. Do not remove it systematically. See stackoverflow.com/questions/72238175/…

Argha Shipan Sarker Over a year ago

Thank's for the information @yousoumar

DEVNTV · Accepted Answer · 2022-11-14 08:52:33Z

1

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, 2022 at 8:52

answered Nov 14, 2022 at 8:51

DEVNTV

112 bronze badges

Comments

Marat · Accepted Answer · 2022-11-14 05:46:23Z

0

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

answered Nov 14, 2022 at 5:46

Marat

6291 gold badge7 silver badges10 bronze badges

Collectives™ on Stack Overflow

React useeffect with empty dependency array running twice [duplicate]

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related