[DevTools]: Confusing "Why did this render?" with hooks

[Andarist]

Website or app

https://codesandbox.io/s/elegant-paper-5lhxd?file=/src/App.js

Repro steps

1. visit https://5lhxd.csb.app/
2. start recording profile
3. click a button (to update the context value)
4. check the report:

Problem

The list of hooks that were changed is correct. However, this list is not really the reason why this component has been rendered. The only thing that changed and led to this rerender is the context value.

I think the list of changed hooks is useful but this should be listed separately. For the "Why did this render?" only context and state (and maybe useSyncExternalStore snapshots) should be listed. As only those actually cause rerenders.

On a separate note - it's a bummer that contexts are not counted within the changed hooks list and the only report we get is that "context has changed". If I use multiple contexts in a component this information is often not enough because I can't easily check which context has been updated.

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

[eps1lon]

If I use multiple contexts in a component this information is often not enough because I can't easily check which context has been updated.

This would be a nice separate feature request. Since we have display names for context we could leverage that to separate them.

I think the separation between context and hooks is technical because hook changes are only tracked for stateful hooks. For useContext the state lives in the actual Context not the hook.

[Andarist]

This would be a nice separate feature request. Since we have display names for context we could leverage that to separate them.

Agreed. I was creating this issue late, before hitting the bed and I got lazy 😉 Gonna try to create an issue about this sometime later.

I think the separation between context and hooks is technical because hook changes are only tracked for stateful hooks. For useContext the state lives in the actual Context not the hook.

Yep, I understand the technical context here - but there is still room for improvement from the UX PoV.

[eps1lon]

Fixed in #24189 which is live in 4.24.3