React-devtools: useEffect causes unnecessary rerender

[arghav]

The following code when used with the Chrome extension causes unnecessary re-render of the App component when browsing the node structure provided by the dev tools.

import React, { useEffect } from "react";
import ReactDOM from "react-dom";

const App = () => {
  useEffect(() => {
    console.log("useEffect");
  });

  console.log("render");

  return <div>Hello, world</div>;
};

ReactDOM.render(<App />, document.getElementById("root"));

If I remove the useEffect() call it prevents the extra re-renders.

The version of the extension is 3.6.0. Tested on Chrome 72.0.3626.53 with [email protected] and [email protected].

Here's a video link to the issue for more clarity: https://streamable.com/q3rpn

[bvaughn]

The "unexpected re-render" isn't actually caused by useEffect specifically– but rather, it's the way DevTools "inspects" hooks values by re-rendering the function component in isolation.

While I understand that unexpected renders can indicate problems in some cases, this particular one shouldn't actually be a problem for several reasons:

• The renders aren't recursive. (Child components aren't rendered.)
• The renders only happen for users with DevTools installed, and even then– only impact a single component (the one currently selected in the tree).
• The renders don't have side effects (e.g. the DOM won't be updated).