[DevTools] Fix hooks indexes counting

[andreisilviudragnea]

Summary

Fixed hooks indexes counting to reflect the ones shown in Why did this render? Hook <index> changed. The problem is that the index logic at https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/backend/fiber/renderer.js#L1951 (used by Why did this render? messages) counts all nodes in the hooks linked list of a fiber, but the index logic based on this array https://github.com/facebook/react/blob/main/packages/react-debug-tools/src/ReactDebugHooks.js#L54 (used by indexes shown in Component hooks inspector) does not push an element in the hookLog array for each node added to the hooks linked list of a fiber for some composite React hooks:

• useTransition
• useSyncExternalState
• useFormState
• useActionState

This is the reason why, when profiling re-renders for Components having useSyncExternalState inside them (coming from zustand, for example), the indexes shown in Why did this render? messages do not match the indexes shown by the Component hooks inspector.

The changes in this PR add elements to the hookLog array corresponding to the hook linked list nodes created by the 4 composite hooks above.

This bug exists probably because the changed hook indexes were added when composite hooks did not exist yet, apart from useTransition:

• id in HooksNode in 28.02.2019 - bb2939c
• useTransition added in 18.10.2019 - 685ed56
• add changed hook indices in 17.03.2021 - 119736b
• useSyncExternalStore added in 07.09.2021 - 77912d9
• useFormState added in 05.02.2024 - 56cd10b
• useActionState added in 22.03.2024 - 5c65b27

How did you test this change?

I needed to fix this problem in order to debug re-render issues in a React Native app. I tested this fix by compiling the React Native app with a custom react-native build which uses a custom react-devtools-core build based on this branch.

[react-sizebot]

Comparing: 8943025...0e9630b

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.68 kB	6.68 kB	=	1.83 kB	1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	=	530.65 kB	530.65 kB	=	93.49 kB	93.49 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.69 kB	6.69 kB	=	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	=	658.12 kB	658.12 kB	=	115.77 kB	115.77 kB
facebook-www/ReactDOM-prod.classic.js	=	682.25 kB	682.25 kB	=	119.81 kB	119.80 kB
facebook-www/ReactDOM-prod.modern.js	=	672.68 kB	672.68 kB	=	118.11 kB	118.11 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+4.70%	33.29 kB	34.86 kB	+1.45%	5.92 kB	6.01 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.js	+4.63%	29.70 kB	31.08 kB	+1.41%	5.80 kB	5.88 kB

Generated by 🚫 dangerJS against 0e9630b

[andreisilviudragnea]

I tried running yarn test on main branch and this PR branch and I get failed tests in both cases, but I cannot understand why the yarn test run on main is not fully green.

[andreisilviudragnea]

I fixed the unit tests too, but not sure if this is the right solution or if the index logic at

react/packages/react-devtools-shared/src/backend/fiber/renderer.js

Line 1959 in 8ad773b

index++;

should be fixed to detect correct indexes for composite hooks.

@bvaughn @lunaruan @acdlite @eps1lon @rickhanlonii What do you think about this bug fix? I think it is important to fix this, as it helped me a lot as a React learning tool.

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[andreisilviudragnea]

bump