Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add useSyncExternalStore and useTransition to getPrimitiveStackCache #28399

Merged
merged 2 commits into from
Feb 22, 2024

Conversation

jamesbvaughan
Copy link
Contributor

Summary

This solves the problem of the devtools extension failing to parse hook names for components that make use of useSyncExternalStore or useTransition.

See #27889

How did you test this change?

I tested this against my own codebases and against the example repro project that I linked in #27889.

To test, I opened up the Components tab of the dev tools extension, selected a component with hooks that make use of useSyncExternalStore or useTransition, clicked the "parse hook names" magic wand button, and observed that it now succeeds.

@facebook-github-bot
Copy link

Hi @jamesbvaughan!

Thank you for your pull request.

We require contributors to sign our Contributor License Agreement, and yours needs attention.

You currently have a record in our system, but the CLA is no longer valid, and will need to be resubmitted.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

@react-sizebot
Copy link

react-sizebot commented Feb 20, 2024

Comparing: a515d75...d712e72

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.min.js = 176.85 kB 176.85 kB = 55.14 kB 55.14 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 178.85 kB 178.85 kB = 55.72 kB 55.72 kB
facebook-www/ReactDOM-prod.classic.js = 591.91 kB 591.91 kB = 104.47 kB 104.47 kB
facebook-www/ReactDOM-prod.modern.js = 575.20 kB 575.20 kB = 101.47 kB 101.47 kB
test_utils/ReactAllWarnings.js Deleted 66.90 kB 0.00 kB Deleted 16.40 kB 0.00 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.production.min.js +1.63% 9.07 kB 9.22 kB +0.72% 3.21 kB 3.24 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js +1.63% 9.07 kB 9.22 kB +0.72% 3.21 kB 3.24 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js +1.63% 9.07 kB 9.22 kB +0.72% 3.21 kB 3.24 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js +0.93% 27.66 kB 27.92 kB +0.34% 7.36 kB 7.39 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js +0.93% 27.66 kB 27.92 kB +0.34% 7.36 kB 7.39 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js +0.93% 27.66 kB 27.92 kB +0.34% 7.36 kB 7.39 kB
test_utils/ReactAllWarnings.js Deleted 66.90 kB 0.00 kB Deleted 16.40 kB 0.00 kB

Generated by 🚫 dangerJS against d712e72

Copy link
Contributor

@hoxyq hoxyq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks for fixing this. I will double-check this by testing it manually later this week and merge this.

@hoxyq hoxyq merged commit 47beb96 into facebook:main Feb 22, 2024
36 checks passed
@jamesbvaughan
Copy link
Contributor Author

Thanks @hoxyq! Do you know when we can expect this to be released?

@hoxyq
Copy link
Contributor

hoxyq commented Feb 22, 2024

Thanks @hoxyq! Do you know when we can expect this to be released?

I expect this to be available in a public release next week.

hoxyq added a commit that referenced this pull request Feb 22, 2024
Full list of changes (not a public CHANGELOG):

* feature[REMOVED][devtools]: turn off / hide location based component
filters ([hoxyq](https://github.com/hoxyq) in
[#28417](#28417))
* Add useSyncExternalStore and useTransition to getPrimitiveStackCache
([jamesbvaughan](https://github.com/jamesbvaughan) in
[#28399](#28399))
* chore[devtools]: use react-window from npm and bump
react-virtualized-auto-sizer to ^1.0.23
([hoxyq](https://github.com/hoxyq) in
[#28408](#28408))
* Pass ref as normal prop ([acdlite](https://github.com/acdlite) in
[#28348](#28348))
* Combine createElement and JSX modules
([acdlite](https://github.com/acdlite) in
[#28320](#28320))
* [Debug Tools] Always use includeHooksSource option
([sebmarkbage](https://github.com/sebmarkbage) in
[#28309](#28309))
* Revert "[Tests] Reset modules by default"
([acdlite](https://github.com/acdlite) in
[#28318](#28318))
* Switch <Context> to mean <Context.Provider>
([gaearon](https://github.com/gaearon) in
[#28226](#28226))
* [Debug Tools] Introspect Promises in use()
([sebmarkbage](https://github.com/sebmarkbage) in
[#28297](#28297))
* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root
case support ([hoxyq](https://github.com/hoxyq) in
[#28145](#28145))
* fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode
and synchronous act ([hoxyq](https://github.com/hoxyq) in
[#28296](#28296))
* chore: gate legacy apis for react-devtools-shell
([hoxyq](https://github.com/hoxyq) in
[#28273](#28273))
* DevTools: Add support for use(Context)
([eps1lon](https://github.com/eps1lon) in
[#28233](#28233))
* Remove __self and __source location from elements
([sebmarkbage](https://github.com/sebmarkbage) in
[#28265](#28265))
* chore: use versioned render in inspectedElement test
([hoxyq](https://github.com/hoxyq) in
[#28246](#28246))
* chore: use versioned render in TimelineProfiler test and gate some for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28218](#28218))
* [Tests] Reset modules by default
([rickhanlonii](https://github.com/rickhanlonii) in
[#28254](#28254))
* chore: use versioned render in preprocessData test and gate some for …
([hoxyq](https://github.com/hoxyq) in
[#28219](#28219))
* chore: use versioned render in storeStressSync test and gate them for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28216](#28216))
* Patch devtools before running useMemo function in strict mode
([gsathya](https://github.com/gsathya) in
[#28249](#28249))
* chore: use versioned render in storeComponentFilters test
([hoxyq](https://github.com/hoxyq) in
[#28241](#28241))
* chore: use versioned render in profilerContext test
([hoxyq](https://github.com/hoxyq) in
[#28243](#28243))
* chore: use versioned render in profilingCommitTreeBuilder test and
gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28236](#28236))
* chore: use versioned render in profilingHostRoot test and gate some
for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[#28237](#28237))
* chore: use versioned render in profilingCache test
([hoxyq](https://github.com/hoxyq) in
[#28242](#28242))
* chore: use versioned render in ownersListContext test
([hoxyq](https://github.com/hoxyq) in
[#28240](#28240))
* chore: use versioned render in editing test
([hoxyq](https://github.com/hoxyq) in
[#28239](#28239))
* chore: use versioned render in treeContext test
([hoxyq](https://github.com/hoxyq) in
[#28245](#28245))
* chore: use versioned render in store test
([hoxyq](https://github.com/hoxyq) in
[#28244](#28244))
* chore: use versioned render in profilerStore test
([hoxyq](https://github.com/hoxyq) in
[#28238](#28238))
* chore: use versioned render in profilingCharts test
([hoxyq](https://github.com/hoxyq) in
[#28235](#28235))
* chore: use versioned render in profilerChangeDescriptions test
([hoxyq](https://github.com/hoxyq) in
[#28221](#28221))
* chore: use versioned render in storeOwners test
([hoxyq](https://github.com/hoxyq) in
[#28215](#28215))
* chore: use versioned render in componentStacks test
([hoxyq](https://github.com/hoxyq) in
[#28214](#28214))
* chore: use versioned render in console test
([hoxyq](https://github.com/hoxyq) in
[#28213](#28213))
* chore: use versioned render in useEditableValue test
([hoxyq](https://github.com/hoxyq) in
[#28212](#28212))
* chore: use versioned render in FastRefreshDevToolsIntegration test
([hoxyq](https://github.com/hoxyq) in
[#28211](#28211))
* chore: add versioned render implementation for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28210](#28210))
* chore: add single versioned implementation of act for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[#28186](#28186))
* DevTools: Add support for useFormState
([eps1lon](https://github.com/eps1lon) in
[#28232](#28232))
* DevTools: Add support for useOptimistic Hook
([eps1lon](https://github.com/eps1lon) in
[#27982](#27982))
* Add stable React.act export ([acdlite](https://github.com/acdlite) in
[#28160](#28160))
* [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in
[#27871](#27871))
* fix[devtools/e2e]: add fallback for act in integration tests
([hoxyq](https://github.com/hoxyq) in
[#27842](#27842))
* Add stable concurrent option to react-test-renderer
([jackpope](https://github.com/jackpope) in
[#27804](#27804))
* Update act references in tests ([gnoff](https://github.com/gnoff) in
[#27805](#27805))
* Flow: make more objects exact ([kassens](https://github.com/kassens)
in [#27790](#27790))
@hoxyq
Copy link
Contributor

hoxyq commented Feb 29, 2024

Thanks @hoxyq! Do you know when we can expect this to be released?

Hey @jamesbvaughan, I've decided to wait a bit, we will wait for #28471 to be merged, and publish it along with v5.0.2 in public. Because currently, without these changes, the element source inspection is broken.

If this bug is blocking you, I am happy to attach a custom build of 5.0.1 (or give you instructions of how to build it yourself)

@jamesbvaughan
Copy link
Contributor Author

Thanks @hoxyq! Do you know when we can expect this to be released?

Hey @jamesbvaughan, I've decided to wait a bit, we will wait for #28471 to be merged, and publish it along with v5.0.2 in public. Because currently, without these changes, the element source inspection is broken.

If this bug is blocking you, I am happy to attach a custom build of 5.0.1 (or give you instructions of how to build it yourself)

Thanks for the update - it's not blocking me.

EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
…acebook#28399)

<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This solves the problem of the devtools extension failing to parse hook
names for components that make use of `useSyncExternalStore` or
`useTransition`.

See facebook#27889 

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

I tested this against my own codebases and against the example repro
project that I linked in facebook#27889.

To test, I opened up the Components tab of the dev tools extension,
selected a component with hooks that make use of `useSyncExternalStore`
or `useTransition`, clicked the "parse hook names" magic wand button,
and observed that it now succeeds.
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
Full list of changes (not a public CHANGELOG):

* feature[REMOVED][devtools]: turn off / hide location based component
filters ([hoxyq](https://github.com/hoxyq) in
[facebook#28417](facebook#28417))
* Add useSyncExternalStore and useTransition to getPrimitiveStackCache
([jamesbvaughan](https://github.com/jamesbvaughan) in
[facebook#28399](facebook#28399))
* chore[devtools]: use react-window from npm and bump
react-virtualized-auto-sizer to ^1.0.23
([hoxyq](https://github.com/hoxyq) in
[facebook#28408](facebook#28408))
* Pass ref as normal prop ([acdlite](https://github.com/acdlite) in
[facebook#28348](facebook#28348))
* Combine createElement and JSX modules
([acdlite](https://github.com/acdlite) in
[facebook#28320](facebook#28320))
* [Debug Tools] Always use includeHooksSource option
([sebmarkbage](https://github.com/sebmarkbage) in
[facebook#28309](facebook#28309))
* Revert "[Tests] Reset modules by default"
([acdlite](https://github.com/acdlite) in
[facebook#28318](facebook#28318))
* Switch <Context> to mean <Context.Provider>
([gaearon](https://github.com/gaearon) in
[facebook#28226](facebook#28226))
* [Debug Tools] Introspect Promises in use()
([sebmarkbage](https://github.com/sebmarkbage) in
[facebook#28297](facebook#28297))
* fix[devtools/useModalDismissSignal]: use getRootNode for shadow root
case support ([hoxyq](https://github.com/hoxyq) in
[facebook#28145](facebook#28145))
* fix: define IS_ACT_ENVIRONMENT global for tests with concurrent mode
and synchronous act ([hoxyq](https://github.com/hoxyq) in
[facebook#28296](facebook#28296))
* chore: gate legacy apis for react-devtools-shell
([hoxyq](https://github.com/hoxyq) in
[facebook#28273](facebook#28273))
* DevTools: Add support for use(Context)
([eps1lon](https://github.com/eps1lon) in
[facebook#28233](facebook#28233))
* Remove __self and __source location from elements
([sebmarkbage](https://github.com/sebmarkbage) in
[facebook#28265](facebook#28265))
* chore: use versioned render in inspectedElement test
([hoxyq](https://github.com/hoxyq) in
[facebook#28246](facebook#28246))
* chore: use versioned render in TimelineProfiler test and gate some for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[facebook#28218](facebook#28218))
* [Tests] Reset modules by default
([rickhanlonii](https://github.com/rickhanlonii) in
[facebook#28254](facebook#28254))
* chore: use versioned render in preprocessData test and gate some for …
([hoxyq](https://github.com/hoxyq) in
[facebook#28219](facebook#28219))
* chore: use versioned render in storeStressSync test and gate them for
legacy rendering ([hoxyq](https://github.com/hoxyq) in
[facebook#28216](facebook#28216))
* Patch devtools before running useMemo function in strict mode
([gsathya](https://github.com/gsathya) in
[facebook#28249](facebook#28249))
* chore: use versioned render in storeComponentFilters test
([hoxyq](https://github.com/hoxyq) in
[facebook#28241](facebook#28241))
* chore: use versioned render in profilerContext test
([hoxyq](https://github.com/hoxyq) in
[facebook#28243](facebook#28243))
* chore: use versioned render in profilingCommitTreeBuilder test and
gate some for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[facebook#28236](facebook#28236))
* chore: use versioned render in profilingHostRoot test and gate some
for legacy rendering ([hoxyq](https://github.com/hoxyq) in
[facebook#28237](facebook#28237))
* chore: use versioned render in profilingCache test
([hoxyq](https://github.com/hoxyq) in
[facebook#28242](facebook#28242))
* chore: use versioned render in ownersListContext test
([hoxyq](https://github.com/hoxyq) in
[facebook#28240](facebook#28240))
* chore: use versioned render in editing test
([hoxyq](https://github.com/hoxyq) in
[facebook#28239](facebook#28239))
* chore: use versioned render in treeContext test
([hoxyq](https://github.com/hoxyq) in
[facebook#28245](facebook#28245))
* chore: use versioned render in store test
([hoxyq](https://github.com/hoxyq) in
[facebook#28244](facebook#28244))
* chore: use versioned render in profilerStore test
([hoxyq](https://github.com/hoxyq) in
[facebook#28238](facebook#28238))
* chore: use versioned render in profilingCharts test
([hoxyq](https://github.com/hoxyq) in
[facebook#28235](facebook#28235))
* chore: use versioned render in profilerChangeDescriptions test
([hoxyq](https://github.com/hoxyq) in
[facebook#28221](facebook#28221))
* chore: use versioned render in storeOwners test
([hoxyq](https://github.com/hoxyq) in
[facebook#28215](facebook#28215))
* chore: use versioned render in componentStacks test
([hoxyq](https://github.com/hoxyq) in
[facebook#28214](facebook#28214))
* chore: use versioned render in console test
([hoxyq](https://github.com/hoxyq) in
[facebook#28213](facebook#28213))
* chore: use versioned render in useEditableValue test
([hoxyq](https://github.com/hoxyq) in
[facebook#28212](facebook#28212))
* chore: use versioned render in FastRefreshDevToolsIntegration test
([hoxyq](https://github.com/hoxyq) in
[facebook#28211](facebook#28211))
* chore: add versioned render implementation for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[facebook#28210](facebook#28210))
* chore: add single versioned implementation of act for DevTools tests
([hoxyq](https://github.com/hoxyq) in
[facebook#28186](facebook#28186))
* DevTools: Add support for useFormState
([eps1lon](https://github.com/eps1lon) in
[facebook#28232](facebook#28232))
* DevTools: Add support for useOptimistic Hook
([eps1lon](https://github.com/eps1lon) in
[facebook#27982](facebook#27982))
* Add stable React.act export ([acdlite](https://github.com/acdlite) in
[facebook#28160](facebook#28160))
* [flow] upgrade to 0.225.1 ([kassens](https://github.com/kassens) in
[facebook#27871](facebook#27871))
* fix[devtools/e2e]: add fallback for act in integration tests
([hoxyq](https://github.com/hoxyq) in
[facebook#27842](facebook#27842))
* Add stable concurrent option to react-test-renderer
([jackpope](https://github.com/jackpope) in
[facebook#27804](facebook#27804))
* Update act references in tests ([gnoff](https://github.com/gnoff) in
[facebook#27805](facebook#27805))
* Flow: make more objects exact ([kassens](https://github.com/kassens)
in [facebook#27790](facebook#27790))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
…28399)

<!--
  Thanks for submitting a pull request!
We appreciate you spending the time to work on these changes. Please
provide enough information so that others can review your pull request.
The three fields below are mandatory.

Before submitting a pull request, please make sure the following is
done:

1. Fork [the repository](https://github.com/facebook/react) and create
your branch from `main`.
  2. Run `yarn` in the repository root.
3. If you've fixed a bug or added code that should be tested, add tests!
4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch
TestName` is helpful in development.
5. Run `yarn test --prod` to test in the production environment. It
supports the same options as `yarn test`.
6. If you need a debugger, run `yarn test --debug --watch TestName`,
open `chrome://inspect`, and press "Inspect".
7. Format your code with
[prettier](https://github.com/prettier/prettier) (`yarn prettier`).
8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only
check changed files.
  9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`).
  10. If you haven't already, complete the CLA.

Learn more about contributing:
https://reactjs.org/docs/how-to-contribute.html
-->

## Summary

<!--
Explain the **motivation** for making this change. What existing problem
does the pull request solve?
-->

This solves the problem of the devtools extension failing to parse hook
names for components that make use of `useSyncExternalStore` or
`useTransition`.

See #27889

## How did you test this change?

<!--
Demonstrate the code is solid. Example: The exact commands you ran and
their output, screenshots / videos if the pull request changes the user
interface.
How exactly did you verify that your PR solves the issue you wanted to
solve?
  If you leave this empty, your PR will very likely be closed.
-->

I tested this against my own codebases and against the example repro
project that I linked in #27889.

To test, I opened up the Components tab of the dev tools extension,
selected a component with hooks that make use of `useSyncExternalStore`
or `useTransition`, clicked the "parse hook names" magic wand button,
and observed that it now succeeds.

DiffTrain build for commit 47beb96.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[DevTools Bug]: Hook parsing fails if a hook uses useSyncExternalStore
4 participants