Fix indices of hooks in devtools when using useSyncExternalStore by blazejkustra · Pull Request #34547 · react/react

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

blazejkustra · 2025-09-20T20:45:51Z

Summary

This PR updates getChangedHooksIndices to account for the fact that useSyncExternalStore internally mounts two hooks, while DevTools should treat it as a single user-facing hook.

It introduces a helper isUseSyncExternalStoreHook to detect this case and adjust iteration so the extra internal hook is skipped when counting changes.

Before:

before.mov

After:

after.mov

How did you test this change?

I used this component to reproduce this issue locally (I followed instructions in packages/react-devtools/CONTRIBUTING.md).

functionTest(){// 1React.useSyncExternalStore(()=>{},()=>{},()=>{},);// 2const[state,setState]=useState('test');return(<><divonClick={()=>setState(Math.random())}style={{backgroundColor: 'red'}}>{state}</div></>);}

hoxyq

The change makes sense, thank you for working on this.

Please address the comments that I've left, I think we can land this afterwards. Feel free to just tag me on all similar pull requests for other hooks, like useTransition(), useFormState(), useActionState().

hoxyq · 2025-10-15T02:47:05Z

+ }
+ }
+
+ index++;


Why did you move this increment there?

By mistake, moving it back 👍

hoxyq · 2025-10-15T02:48:39Z

+ if (next.next !== null) {
+ next = next.next;
+ prev = prev.next;
+ }


We probably don't want to check on next.next presence here, it should be implied if the hook object is actually an internal representation of useSyncExternalStore().
I would prefer it to crash instead, if this ever happens, so we spot the gap in our hook parsing logic first.

Makes sense to me as well!

blazejkustra · 2025-10-15T14:16:21Z

Back to you @hoxyq!

blazejkustra · 2025-10-15T15:37:14Z

As for the other hooks you mentioned, I'm interested in implementing it, though I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState. If you have any guidance, please let me know 😄

hoxyq · 2025-10-16T14:06:28Z

Thanks for updating the PR!

We have a feature that parses hook names, and I believe it is based on hooks indexes. I will double-check if this change actually breaks it, and will follow up here soon.

blazejkustra · 2025-10-20T17:23:50Z

I will double-check if this change actually breaks it, and will follow up here soon.

Just checking if you had a chance to look into this @hoxyq

hoxyq

Works well, apologies for the delay.

For posterity, we don't use hooks indexes for hook names parsing. We just use the actual stack frame and then try to symbolicate it.

Also, we have 2 different implementations of fetching hook indexes:

The first one lives in the renderer, which is used by the Profiler tab. This is the one that is updated in this PR.
The second one lives in react-debug-tools/src/ReactDebugHooks.js, where we already correctly traverse the hook tree. This logic is used for displaying the "hooks" pane in the InspectedElement view.

useSyncExternalStore shim in react-debug-tools/src/ReactDebugHooks.js:
https://github.com/facebook/react/blob/ea0c17b0952e2b866a1f0dd4b5ac28c7df9d8518/packages/react-debug-tools/src/ReactDebugHooks.js#L462-L482

hoxyq · 2025-10-21T12:59:13Z

I'm unsure how to reliably identify (during traversal) if a hook is useTransition, useFormState, or useActionState

We don't store any identifiers on hooks, so I am not sure if there is a way to distinguish useTransition() from useState(); useCallback(). I will take a look once I have more time.

blazejkustra · 2025-10-21T16:50:05Z

Thanks for merging!! 🚀 (it's my first)

blazejkustra · 2025-10-21T16:50:46Z

I am not sure if there is a way to distinguish useTransition() from useState(); useCallback()

After comparing these hooks, it does seem quite difficult to tell them apart 🤔

We don't store any identifiers on hooks

Could you discuss it with the team, maybe it's worth considering to add hook identifiers/type to each hook?

I created a draft PR for this, I think it should work but haven't tested it thoroughly. Let me know what do you think @hoxyq!

blazejkustra · 2025-11-03T11:45:28Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

hoxyq · 2025-11-07T18:24:04Z

Hey @hoxyq, just checking in. Any thoughts on the draft PR idea? 😄

That would make things easier for React DevTools, but at a cost of additional runtime / memory footprint of React, even in production.

There is a different way for React DevTools to override React's internals through dispatcher, which allows us to recreate the hook tree in a call order. This is what we are doing during component inspection on Components panel, but I believe we don't do it when recording a trace with Profiler panel. This should probably be the way.

blazejkustra · 2025-11-08T11:57:46Z

Makes sense, I'll dig in this week 👍

andreisilviudragnea · 2025-12-25T12:29:19Z

Hello @blazejkustra @hoxyq I created a PR trying to fix this issue too back in September, but I got no response from React team: #34427

My solution tried to add multiple entries to the Component view for each internal hook node of a composite hook, so the index showed by "Hook X changed" returns correct values.

I am leaving this message here to consider this possible option for fixing the counter bug. As a new React dev who tried to learn React, this bug made everything way more complicated because I could not understand why the debugger was lying, so fixing this bug completely will help everyone, including newcomers like me.

…ore (react#34547)" This reverts commit 39c6545.

@hoxyq

## Summary cc @hoxyqFixes#28584. Follow up to PR: #34547 This PR updates getChangedHooksIndices to account for the fact that `useSyncExternalStore`, `useTransition`, `useActionState`, `useFormState` internally mounts more than one hook while DevTools should treat it as a single user-facing hook. Approach idea came from [this](#34547 (comment)) comment 😄 Before: https://github.com/user-attachments/assets/6bd5ce80-8b52-4bb8-8bb1-5e91b1e65043 After: https://github.com/user-attachments/assets/47f56898-ab34-46b6-be7a-a54024dcefee ## How did you test this change? I used this component to reproduce this issue locally (I followed instructions in `packages/react-devtools/CONTRIBUTING.md`). <details><summary>Details</summary> ```ts import * as React from 'react'; function useDeepNestedHook() { React.useState(0); // 1 return React.useState(1); // 2 } function useNestedHook() { const deepState = useDeepNestedHook(); React.useState(2); // 3 React.useState(3); // 4 return deepState; } // Create a simple store for useSyncExternalStore function createStore(initialValue) { let value = initialValue; const listeners = new Set(); return { getSnapshot: () => value, subscribe: listener => { listeners.add(listener); return () => { listeners.delete(listener); }; }, update: newValue => { value = newValue; listeners.forEach(listener => listener()); }, }; } const syncExternalStore = createStore(0); export default function InspectableElements(): React.Node { const [nestedState, setNestedState] = useNestedHook(); // 5 const syncExternalValue = React.useSyncExternalStore( syncExternalStore.subscribe, syncExternalStore.getSnapshot, ); // 6 const [isPending, startTransition] = React.useTransition(); // 7 const [formState, formAction, formPending] = React.useActionState( async (prevState, formData) => { return {count: (prevState?.count || 0) + 1}; }, {count: 0}, ); const handleTransition = () => { startTransition(() => { setState(Math.random()); }); }; // 8 const [state, setState] = React.useState('test'); return ( <> <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: '10px', }}> <div onClick={() => setNestedState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {nestedState} </div> <button onClick={handleTransition} style={{padding: '10px'}}> Trigger Transition {isPending ? '(pending...)' : ''} </button> <div style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button onClick={() => syncExternalStore.update(syncExternalValue + 1)} style={{padding: '10px'}}> Trigger useSyncExternalStore </button> <span>Value: {syncExternalValue}</span> </div> <form action={formAction} style={{display: 'flex', gap: '10px', alignItems: 'center'}}> <button type="submit" style={{padding: '10px'}} disabled={formPending}> Trigger useFormState {formPending ? '(pending...)' : ''} </button> <span>Count: {formState.count}</span> </form> <div onClick={() => setState(Math.random())} style={{backgroundColor: 'red', padding: '10px', cursor: 'pointer'}}> State: {state} </div> </div> </> ); } ``` </details> --------- Co-authored-by: Ruslan Lesiutin <28902667+hoxyq@users.noreply.github.com>

Fix indices of hooks ind evtools when using useSyncExternalStore
16e77a3

meta-claBot added the CLA Signed label Sep 20, 2025

blazejkustra mentioned this pull request Sep 20, 2025
[DevTools Bug]: React Profiler reports higher hook numbers than shown in Components #28584
Closed

Clean the code a bit
0dd8c60

blazejkustra marked this pull request as ready for review September 22, 2025 17:38

hoxyq self-requested a review October 15, 2025 02:39

hoxyq mentioned this pull request Oct 15, 2025
[Devtools] Fix DevTools hook indexing for useSyncExternalStore #34843
Closed

hoxyq reviewed Oct 15, 2025
View reviewed changes

blazejkustra added 2 commits October 15, 2025 15:17

Move back line with increment
bd16801

Remove next.next presence check in traversal logic
aa0e125

blazejkustra requested a review from hoxyq October 15, 2025 13:21

hoxyq approved these changes Oct 21, 2025
View reviewed changes

hoxyq merged commit 39c6545 into react:mainOct 21, 2025
240 of 241 checks passed

blazejkustra mentioned this pull request Oct 21, 2025
Repro for mismatch of changed hook and used hook #28587
Closed

nextjs-bot mentioned this pull request Oct 21, 2025
Upgrade React from 2bcbf254-20251020 to 71b3a03c-20251021vercel/next.js#85177
Closed

blazejkustra mentioned this pull request Oct 21, 2025
Add type identifier to every hook #34933
Closed

This was referenced Oct 22, 2025
Upgrade React from 2bcbf254-20251020 to 71b3a03c-20251021vercel/next.js#85229
Closed
Upgrade React from 2bcbf254-20251020 to 6160773f-20251023vercel/next.js#85277
Merged
Upgrade React from 2bcbf254-20251020 to 408b38ef-20251023vercel/next.js#85406
Closed

blazejkustra mentioned this pull request Nov 13, 2025
Improve the detection of changed hooks #35123
Merged

andreisilviudragnea added a commit to andreisilviudragnea/react that referenced this pull request Dec 25, 2025
Revert "Fix indices of hooks in devtools when using useSyncExternalSt…
7fead02
…ore (react#34547)" This reverts commit 39c6545.

coderabbitaiBot mentioned this pull request Aug 10, 2026
refactor(frontend): standardize design system v4 abhij1306/Invoro#86
Merged