[DevTools Bug]: useEffect hook incorrectly labelled as reason for component rendering

[steinybot]

Website or app

https://codesandbox.io/s/react-devtools-useeffect-incorrect-render-reason-x3inwg

Repro steps

1. Start profiling
2. Click the button
3. Stop profiling
4. Check the reasons for rendering

It is incorrect to say that hook 2 is why this rendered. Hook 1 is why it rendered. Hook 2 was rescheduled during that render. These really need to be separated as they are completely different things. In a component with a lot of effects it can be tedious to find which hook was the one that caused it to render (especially with transpilling, minifying etc where hooks are not always shown nicely).

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[lunaruan]

Hey! Thanks for reporting this issue and sorry for the inconvenience. We used to be able to detect the difference between a state update and an effect, but due to React reconciler changes, this seems to have broken. We're working a way to better insulate React DevTools from reconciler, and this is definitely a good candidate to add to this effort. Thanks!

[lunaruan]

Hey! Looking at this more, isEffect is actually working. We updated this to only report stateful hooks that changed between renders. Thanks for reporting, and closing this issue!