Add useSyncExternalStore and useTransition to getPrimitiveStackCache #28399
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
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. ProcessIn 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 If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Comparing: a515d75...d712e72 Critical size changesIncludes critical production bundles, as well as any change greater than 2%:
Significant size changesIncludes any change greater than 0.2%: Expand to show
|
jamesbvaughan
force-pushed
the
james/devtools-hook-parsing
branch
from
14eb5e9
to
d712e72
Compare
hoxyq
approved these changes
Feb 21, 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))
huozhi
added a commit
to vercel/next.js
that referenced
this pull request
Feb 26, 2024
### React upstream changes - facebook/react#28438 - facebook/react#28436 - facebook/react#25954 - facebook/react#28434 - facebook/react#28433 - facebook/react#28432 - facebook/react#28415 - facebook/react#27903 - facebook/react#28430 - facebook/react#28424 - facebook/react#28400 - facebook/react#28422 - facebook/react#28423 - facebook/react#28412 - facebook/react#28418 - facebook/react#28421 - facebook/react#28417 - facebook/react#28399 - facebook/react#28408 - facebook/react#28350 - facebook/react#28387 - facebook/react#28403 - facebook/react#28384 - facebook/react#28409 - facebook/react#28398 - facebook/react#28405 - facebook/react#28328 - facebook/react#28402 - facebook/react#28386 - facebook/react#28388 - facebook/react#28379 - facebook/react#28383 - facebook/react#28390 - facebook/react#28389 - facebook/react#28382 - facebook/react#28348 Closes NEXT-2600
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This solves the problem of the devtools extension failing to parse hook names for components that make use of
useSyncExternalStoreoruseTransition.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
useSyncExternalStoreoruseTransition, clicked the "parse hook names" magic wand button, and observed that it now succeeds.