useEffect causes unnecessary rerender
Closed this issue · 1 comments
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 react@16.8.1
and react-dom@16.8.1
.
Here's a video link to the issue for more clarity: https://streamable.com/q3rpn
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).