CODEWITHSUNDEEP
reactjsreact-hooksuse-effectrerender
Ritesh
Ritesh

Reputation: 4756

Why useEffect re-rendering when nothing has changed?

I have 2 react functional components like this :

const Test = function (props) {
    console.log("rendered");
    useEffect(() => {}, []);

    return <div>Testing</div>;
}

const Parent = function () {
    return <div>Component: <Test /></div>;
}

As we can see above, there is no state or props change still browser console showing "rendered" twice but if i am commenting the useEffect it'll print only once. I tried to google it but didn't find any proper reason of this.

Upvotes: 0

Views: 666

Answers (2)

Bruno Paulino
Bruno Paulino

Reputation: 5810

This is due to React.StrictMode.
From the React Docs - Detecting unexpected side effects

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

  • Class component constructor, render, and shouldComponentUpdate methods
  • Class component static getDerivedStateFromProps method
  • Function component bodies
  • State updater functions (the first argument to setState)
  • Functions passed to useState, useMemo, or useReducer

When building your project for production, this should not happen.

Upvotes: 1

Zachary Haber
Zachary Haber

Reputation: 11047

It's because of React.StrictMode. If there's no useEffect (or any statefulness), react might not render it twice in StrictMode because it doesn't need to. StrictMode renders components twice to make sure that everything works properly and there are no deprecated lifecycle methods or other practices that are problematic. It's whole purpose is to make sure that your application will work well with the more stringent requirements for concurrent mode. It only runs these checks in development mode so as not to impact performance in your production builds.

In this CodeSandbox, you can see that the strict-mode renders twice for the same components, while the normal mode doesn't.

Upvotes: 1

Related Questions