[DevTools Bug] When inspecting, hook values after `useDeferredValue` are offset

[Alduino]

Website or app

https://github.com/Alduino/React-useDeferredValue-DevTools-Reprod

Repro steps

1. Start the app in either dev or production mode.
2. Open the React dev tools
3. Click on the "App" component
4. The first Memo has the value 3.14 (the value that the second Memo should have) instead of 1.41

If you want it to throw an error instead of just looking at the values, you can set window.throwIfIncorrect = true before DevTools inspects the component.

I tried in CodeSandbox's embedded React dev tools as well - the issue happens in React 18.0 (though the first hook has no value and the second has the first hook's value) but it doesn't happen in 18.1.

How often does this bug happen?

Every time

DevTools package (automated)

react-devtools-extensions

DevTools version (automated)

4.24.0-82762bea5

Error message (automated)

First is 3.14 when it should be 1.41

Error call stack (automated)

I@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:14022:6
exports.inspectHooksOfFiber@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:14090:12
inspectElementRaw@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:8847:65
inspectElement@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:9130:38
agent_Agent/<@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:11002:56
emit@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:4137:18
Bridge/this._wallUnlisten<@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:4780:14
listener@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:12986:11
EventListener.handleEvent*listen@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:12989:14
Bridge@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:4778:31
setup@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:12979:18
welcome@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:12958:8
EventListener.handleEvent*@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:12961:8
__webpack_require__@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:20:30
@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:84:18
@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/react_devtools_backend.js:87:10

Error component stack (automated)

InspectedElementContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:39159:43
Suspense
ErrorBoundary_ErrorBoundary@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:37513:5
div
InspectedElementErrorBoundaryWrapper@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:38001:46
NativeStyleContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:40650:38
div
div
OwnersListContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:33491:37
SettingsModalContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:36112:40
Components_Components@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:42701:52
ErrorBoundary_ErrorBoundary@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:37513:5
div
div
ThemeProvider@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:37655:23
PortaledContent@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:37685:34
div
div
div
ThemeProvider@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:37655:23
TimelineContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:42881:35
ProfilerContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:42326:35
TreeContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:30393:31
SettingsContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:31015:35
ModalDialogContextController@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:38064:38
DevTools_DevTools@moz-extension://38b0497f-37d9-49e7-9147-393888469493/build/main.js:54073:27

GitHub query string (automated)

https://api.github.com/search/issues?q=First is 3.14 when it should be 1.41 in:title is:issue is:open is:public label:"Component: Developer Tools" repo:facebook/react

[mondaychen]

Hi! I'm a little confused. Are you trying to say this issue only exists when you have devtools open?

[Alduino]

Yeah, it only happens when the dev tools inspect the hooks of a component. It also doesn't seem to affect the actual value of the hooks outside of the devtools, just what the devtools display (using the reprod as an example, if you make the text be `<p>{first}</p>` it renders the correct value)

[mondaychen]

I tried to create a repro on codesandbox with your code, but everything works fine https://codesandbox.io/s/angry-bush-ziik01?file=/src/App.js:390-413

in firefox

Anything I missed?

[Alduino]

Interesting, that codesandbox works fine for me too, but running it through create-react-app causes the issue. Maybe codesandbox is doing something weird that somehow makes it work.

I've just tested in Chromium (with dev tools 4.24.6-ca7a38ae4) and it has the same result - works in the codesandbox but not if I run the code with CRA.

In Chromium:

[mondaychen]

Looks like this issue exist with react 18.1.0 but not with react 18.0.0?

[Alduino]

I'm not sure - in the codesandbox that you created, if you set it to React 18 it has the issue (although the first memo in that case has no value and the second memo has the first memo's value). Although the codesandbox works fine in 18.1 so it might be a different issue.

Using CRA though the issue doesn't happen with 18.0

[gaearon]

#24247 changed its implementation in 18.1 which may be the reason. Maybe something needs to be adjusted.

[gaearon]

DevTools implementation assumes the old code:

react/packages/react-debug-tools/src/ReactDebugHooks.js

Lines 313 to 317 in 3133dfa

	// useDeferredValue() composes multiple hooks internally.
	// Advance the current hook index the same number of times
	// so that subsequent hooks have the right memoized state.
	nextHook(); // State
	nextHook(); // Effect

But there is just one work-in-progress hook in the new code.

[gaearon]

I'm not sure how but it seems like we'd need to either break it for 18.0 or add version check and advance the hook index depending on the version. I suggest to check with @acdlite.

[Alduino]

I wonder why it works using codesandbox for 18.1 but not for 18.0? Maybe they've patched it but aren't version checking - it does look like it isn't advancing the hook index enough seeing as the values are offset once in the other direction:

[Alduino]

Nope, their dev tools calls nextHook() twice too