Skip to content

Devtools: Display actual pending state when inspecting useTransition#28499

Merged
eps1lon merged 3 commits intofacebook:mainfrom
eps1lon:devtools/use-transition-is-pending
Mar 6, 2024
Merged

Devtools: Display actual pending state when inspecting useTransition#28499
eps1lon merged 3 commits intofacebook:mainfrom
eps1lon:devtools/use-transition-is-pending

Conversation

@eps1lon
Copy link
Collaborator

@eps1lon eps1lon commented Mar 5, 2024

Summary

We used to always return false for is pending and display undefined as the values in the inspect panel. Now we return the actual pending state and display that in the value instead.

How did you test this change?

  • Added test (check by-commit to highlight the change in observable behavior)
  • Added showcase to devtools fixture
Screen.Recording.2024-03-05.at.22.49.18.mov

@facebook-github-bot facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Mar 5, 2024
eps1lon
eps1lon commented Mar 5, 2024
View reviewed changes
packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
React.useMemo(() => 'hello', []);
React.useMemo(() => 'not used', []);

// Otherwise we capture the version from the react-debug-tools dispatcher.
Copy link
Collaborator Author

@eps1lon eps1lon Mar 5, 2024

Choose a reason for hiding this comment

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

I think we should never return fake values and always return the memoized values from the hooks. Will write a short summary of all the cases I found where we return fake values and why I believe this is problematic.

@react-sizebot
Copy link

react-sizebot commented Mar 5, 2024 •
edited
Loading

Comparing: 0ae2b13...b0cd5a8

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 = 177.19 kB 177.19 kB = 55.23 kB 55.23 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js = 177.72 kB 177.72 kB = 55.55 kB 55.55 kB
facebook-www/ReactDOM-prod.classic.js = 594.67 kB 594.67 kB = 105.04 kB 105.04 kB
facebook-www/ReactDOM-prod.modern.js = 577.93 kB 577.93 kB = 102.10 kB 102.10 kB
test_utils/ReactAllWarnings.js Deleted 66.60 kB 0.00 kB Deleted 16.28 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 +0.30% 9.91 kB 9.94 kB = 3.36 kB 3.36 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js +0.30% 9.91 kB 9.94 kB = 3.36 kB 3.36 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js +0.30% 9.91 kB 9.94 kB = 3.36 kB 3.36 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js +0.25% 29.68 kB 29.76 kB +0.29% 7.64 kB 7.66 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js +0.25% 29.68 kB 29.76 kB +0.29% 7.64 kB 7.66 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js +0.25% 29.68 kB 29.76 kB +0.29% 7.64 kB 7.66 kB
test_utils/ReactAllWarnings.js Deleted 66.60 kB 0.00 kB Deleted 16.28 kB 0.00 kB

Generated by 🚫 dangerJS against b0cd5a8

@eps1lon eps1lon marked this pull request as ready for review March 6, 2024 00:11
@eps1lon eps1lon requested a review from hoxyq March 6, 2024 12:46
hoxyq
hoxyq approved these changes Mar 6, 2024
View reviewed changes
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 great, thanks for working on this

@eps1lon eps1lon merged commit 0066e0b into facebook:main Mar 6, 2024
@eps1lon eps1lon deleted the devtools/use-transition-is-pending branch March 6, 2024 14:38
@ztanner ztanner mentioned this pull request Mar 18, 2024
Closed
gnoff added a commit to gnoff/next.js that referenced this pull request Mar 25, 2024
@gnoff
Update React from 14898b6a9 to e373190fa
d674a96 
- facebook/react#28596
- facebook/react#28625
- facebook/react#28616
- facebook/react#28491
- facebook/react#28583
- facebook/react#28427
- facebook/react#28613
- facebook/react#28599
- facebook/react#28611
- facebook/react#28610
- facebook/react#28606
- facebook/react#28598
- facebook/react#28549
- facebook/react#28557
- facebook/react#28467
- facebook/react#28591
- facebook/react#28459
- facebook/react#28590
- facebook/react#28564
- facebook/react#28582
- facebook/react#28579
- facebook/react#28578
- facebook/react#28521
- facebook/react#28550
- facebook/react#28576
- facebook/react#28577
- facebook/react#28571
- facebook/react#28572
- facebook/react#28560
- facebook/react#28569
- facebook/react#28573
- facebook/react#28546
- facebook/react#28568
- facebook/react#28562
- facebook/react#28566
- facebook/react#28565
- facebook/react#28559
- facebook/react#28508
- facebook/react#20432
- facebook/react#28555
- facebook/react#24730
- facebook/react#28472
- facebook/react#27991
- facebook/react#28514
- facebook/react#28548
- facebook/react#28526
- facebook/react#28515
- facebook/react#28533
- facebook/react#28532
- facebook/react#28531
- facebook/react#28407
- facebook/react#28522
- facebook/react#28538
- facebook/react#28509
- facebook/react#28534
- facebook/react#28527
- facebook/react#28528
- facebook/react#28519
- facebook/react#28411
- facebook/react#28520
- facebook/react#28518
- facebook/react#28493
- facebook/react#28504
- facebook/react#28499
- facebook/react#28501
- facebook/react#28496
- facebook/react#28471
- facebook/react#28351
- facebook/react#28486
- facebook/react#28490
- facebook/react#28488
- facebook/react#28468
- facebook/react#28321
- facebook/react#28477
- facebook/react#28479
- facebook/react#28480
- facebook/react#28478
- facebook/react#28464
- facebook/react#28475
- facebook/react#28456
- facebook/react#28319
- facebook/react#28345
- facebook/react#28337
- facebook/react#28335
- facebook/react#28466
- facebook/react#28462
- facebook/react#28322
- facebook/react#28444
- facebook/react#28448
- facebook/react#28449
- facebook/react#28446
- facebook/react#28447
- facebook/react#24580
- facebook/react#28514
- facebook/react#28548
- facebook/react#28526
- facebook/react#28515
- facebook/react#28533
- facebook/react#28532
- facebook/react#28531
- facebook/react#28407
- facebook/react#28522
- facebook/react#28538
- facebook/react#28509
- facebook/react#28534
- facebook/react#28527
- facebook/react#28528
- facebook/react#28519
- facebook/react#28411
- facebook/react#28520
- facebook/react#28518
- facebook/react#28493
- facebook/react#28504
- facebook/react#28499
- facebook/react#28501
- facebook/react#28496
- facebook/react#28471
- facebook/react#28351
- facebook/react#28486
- facebook/react#28490
- facebook/react#28488
- facebook/react#28468
- facebook/react#28321
- facebook/react#28477
- facebook/react#28479
- facebook/react#28480
- facebook/react#28478
- facebook/react#28464
- facebook/react#28475
- facebook/react#28456
- facebook/react#28319
- facebook/react#28345
- facebook/react#28337
- facebook/react#28335
- facebook/react#28466
- facebook/react#28462
- facebook/react#28322
- facebook/react#28444
- facebook/react#28448
- facebook/react#28449
- facebook/react#28446
- facebook/react#28447
- facebook/react#24580
@gnoff gnoff mentioned this pull request Mar 25, 2024
Closed
gnoff added a commit to gnoff/next.js that referenced this pull request Mar 25, 2024
@gnoff
Update React from 14898b6a9 to e373190fa
1a2ce1f 
- facebook/react#28596
- facebook/react#28625
- facebook/react#28616
- facebook/react#28491
- facebook/react#28583
- facebook/react#28427
- facebook/react#28613
- facebook/react#28599
- facebook/react#28611
- facebook/react#28610
- facebook/react#28606
- facebook/react#28598
- facebook/react#28549
- facebook/react#28557
- facebook/react#28467
- facebook/react#28591
- facebook/react#28459
- facebook/react#28590
- facebook/react#28564
- facebook/react#28582
- facebook/react#28579
- facebook/react#28578
- facebook/react#28521
- facebook/react#28550
- facebook/react#28576
- facebook/react#28577
- facebook/react#28571
- facebook/react#28572
- facebook/react#28560
- facebook/react#28569
- facebook/react#28573
- facebook/react#28546
- facebook/react#28568
- facebook/react#28562
- facebook/react#28566
- facebook/react#28565
- facebook/react#28559
- facebook/react#28508
- facebook/react#20432
- facebook/react#28555
- facebook/react#24730
- facebook/react#28472
- facebook/react#27991
- facebook/react#28514
- facebook/react#28548
- facebook/react#28526
- facebook/react#28515
- facebook/react#28533
- facebook/react#28532
- facebook/react#28531
- facebook/react#28407
- facebook/react#28522
- facebook/react#28538
- facebook/react#28509
- facebook/react#28534
- facebook/react#28527
- facebook/react#28528
- facebook/react#28519
- facebook/react#28411
- facebook/react#28520
- facebook/react#28518
- facebook/react#28493
- facebook/react#28504
- facebook/react#28499
- facebook/react#28501
- facebook/react#28496
- facebook/react#28471
- facebook/react#28351
- facebook/react#28486
- facebook/react#28490
- facebook/react#28488
- facebook/react#28468
- facebook/react#28321
- facebook/react#28477
- facebook/react#28479
- facebook/react#28480
- facebook/react#28478
- facebook/react#28464
- facebook/react#28475
- facebook/react#28456
- facebook/react#28319
- facebook/react#28345
- facebook/react#28337
- facebook/react#28335
- facebook/react#28466
- facebook/react#28462
- facebook/react#28322
- facebook/react#28444
- facebook/react#28448
- facebook/react#28449
- facebook/react#28446
- facebook/react#28447
- facebook/react#24580
@ztanner ztanner mentioned this pull request Apr 2, 2024
Closed
EdisonVan pushed a commit to EdisonVan/react that referenced this pull request Apr 15, 2024
@eps1lon @AndyPengc12
Devtools: Display actual pending state when inspecting useTransition (
819d95e 
facebook#28499)
@hoxyq hoxyq mentioned this pull request Apr 15, 2024
Merged
hoxyq added a commit that referenced this pull request Apr 15, 2024
@hoxyq
React DevTools 5.0.2 -> 5.1.0 (#28840)
2d128ff 
Full list of changes:
* Look for a ReactMemoCacheSentinel on state
([gsathya](https://github.com/gsathya) in
[#28831](#28831))
* Use use() in the Cache if available
([sebmarkbage](https://github.com/sebmarkbage) in
[#28793](#28793))
* feat[devtools-fusebox]: support theme option
([hoxyq](https://github.com/hoxyq) in
[#28832](#28832))
* feat[devtools]: add package for fusebox integration
([hoxyq](https://github.com/hoxyq) in
[#28553](#28553))
* feat[devtools]: add method for connecting backend with custom
messaging protocol ([hoxyq](https://github.com/hoxyq) in
[#28552](#28552))
* Rename SECRET INTERNALS to
`__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`
([sebmarkbage](https://github.com/sebmarkbage) in
[#28789](#28789))
* Flatten ReactSharedInternals
([sebmarkbage](https://github.com/sebmarkbage) in
[#28783](#28783))
* feat[devtools]: ship source maps for content scripts and ignore list
installHook script ([hoxyq](https://github.com/hoxyq) in
[#28730](#28730))
* Track Owner for Server Components in DEV
([sebmarkbage](https://github.com/sebmarkbage) in
[#28753](#28753))
* Move ReactDOMLegacy implementation into RootFB
([sebmarkbage](https://github.com/sebmarkbage) in
[#28656](#28656))
* Reland #28672: Remove IndeterminateComponent
([gnoff](https://github.com/gnoff) in
[#28681](#28681))
* Remove reference to deleted <Cache> in un-linted file
([josephsavona](https://github.com/josephsavona) in
[#28715](#28715))
* [be] Remove unshipped experimental <Cache> element type
([josephsavona](https://github.com/josephsavona) in
[#28698](#28698))
* Revert "Remove module pattern function component support"
([rickhanlonii](https://github.com/rickhanlonii) in
[#28670](#28670))
* Remove module pattern function component support
([gnoff](https://github.com/gnoff) in
[#27742](#27742))
* [RTR] Enable warning flag ([jackpope](https://github.com/jackpope) in
[#28419](#28419))
* Update error messages ([rickhanlonii](https://github.com/rickhanlonii)
in [#28652](#28652))
* fix[devtools/ci]: split profiling cache test for different react
versions and toEqual checker ([hoxyq](https://github.com/hoxyq) in
[#28628](#28628))
* Guard against legacy context not being supported in DevTools fixture
([eps1lon](https://github.com/eps1lon) in
[#28596](#28596))
* Use `declare const` instead of `declare var`
([kassens](https://github.com/kassens) in
[#28599](#28599))
* Update isConcurrent RTR option usage
([jackpope](https://github.com/jackpope) in
[#28546](#28546))
* Disable legacy context ([kassens](https://github.com/kassens) in
[#27991](#27991))
* Remove invokeGuardedCallback and replay trick
([sebmarkbage](https://github.com/sebmarkbage) in
[#28515](#28515))
* Remove remaining usages of ReactTestUtils in tests unrelated to
`react-dom/test-util` ([eps1lon](https://github.com/eps1lon) in
[#28534](#28534))
* fix[devtools/e2e]: fixed source inspection in e2e tests
([hoxyq](https://github.com/hoxyq) in
[#28518](#28518))
* Devtools: Display actual pending state when inspecting `useTransition`
([eps1lon](https://github.com/eps1lon) in
[#28499](#28499))
bigfootjon pushed a commit that referenced this pull request Apr 18, 2024
@eps1lon
Devtools: Display actual pending state when inspecting useTransition (
1750eca 
#28499)

DiffTrain build for commit 0066e0b.
eps1lon added a commit to vercel/next.js that referenced this pull request Apr 19, 2024
@eps1lon
Update React from 14898b6a9 to c3048aab4.
fc58bbc 
### React upstream changes

- facebook/react#28643
- facebook/react#28628
- facebook/react#28361
- facebook/react#28513
- facebook/react#28299
- facebook/react#28617
- facebook/react#28618
- facebook/react#28621
- facebook/react#28614
- facebook/react#28596
- facebook/react#28625
- facebook/react#28616
- facebook/react#28491
- facebook/react#28583
- facebook/react#28427
- facebook/react#28613
- facebook/react#28599
- facebook/react#28611
- facebook/react#28610
- facebook/react#28606
- facebook/react#28598
- facebook/react#28549
- facebook/react#28557
- facebook/react#28467
- facebook/react#28591
- facebook/react#28459
- facebook/react#28590
- facebook/react#28564
- facebook/react#28582
- facebook/react#28579
- facebook/react#28578
- facebook/react#28521
- facebook/react#28550
- facebook/react#28576
- facebook/react#28577
- facebook/react#28571
- facebook/react#28572
- facebook/react#28560
- facebook/react#28569
- facebook/react#28573
- facebook/react#28546
- facebook/react#28568
- facebook/react#28562
- facebook/react#28566
- facebook/react#28565
- facebook/react#28559
- facebook/react#28508
- facebook/react#20432
- facebook/react#28555
- facebook/react#24730
- facebook/react#28472
- facebook/react#27991
- facebook/react#28514
- facebook/react#28548
- facebook/react#28526
- facebook/react#28515
- facebook/react#28533
- facebook/react#28532
- facebook/react#28531
- facebook/react#28407
- facebook/react#28522
- facebook/react#28538
- facebook/react#28509
- facebook/react#28534
- facebook/react#28527
- facebook/react#28528
- facebook/react#28519
- facebook/react#28411
- facebook/react#28520
- facebook/react#28518
- facebook/react#28493
- facebook/react#28504
- facebook/react#28499
- facebook/react#28501
- facebook/react#28496
- facebook/react#28471
- facebook/react#28351
- facebook/react#28486
- facebook/react#28490
- facebook/react#28488
- facebook/react#28468
- facebook/react#28321
- facebook/react#28477
- facebook/react#28479
- facebook/react#28480
- facebook/react#28478
- facebook/react#28464
- facebook/react#28475
- facebook/react#28456
- facebook/react#28319
- facebook/react#28345
- facebook/react#28337
- facebook/react#28335
- facebook/react#28466
- facebook/react#28462
- facebook/react#28322
- facebook/react#28444
- facebook/react#28448
- facebook/react#28449
- facebook/react#28446
- facebook/react#28447
- facebook/react#24580
- facebook/react#28514
- facebook/react#28548
- facebook/react#28526
- facebook/react#28515
- facebook/react#28533
- facebook/react#28532
- facebook/react#28531
- facebook/react#28407
- facebook/react#28522
- facebook/react#28538
- facebook/react#28509
- facebook/react#28534
- facebook/react#28527
- facebook/react#28528
- facebook/react#28519
- facebook/react#28411
- facebook/react#28520
- facebook/react#28518
- facebook/react#28493
- facebook/react#28504
- facebook/react#28499
- facebook/react#28501
- facebook/react#28496
- facebook/react#28471
- facebook/react#28351
- facebook/react#28486
- facebook/react#28490
- facebook/react#28488
- facebook/react#28468
- facebook/react#28321
- facebook/react#28477
- facebook/react#28479
- facebook/react#28480
- facebook/react#28478
- facebook/react#28464
- facebook/react#28475
- facebook/react#28456
- facebook/react#28319
- facebook/react#28345
- facebook/react#28337
- facebook/react#28335
- facebook/react#28466
- facebook/react#28462
- facebook/react#28322
- facebook/react#28444
- facebook/react#28448
- facebook/react#28449
- facebook/react#28446
- facebook/react#28447
- facebook/react#24580
@eps1lon eps1lon mentioned this pull request Apr 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@hoxyq hoxyq hoxyq approved these changes

Assignees

No one assigned

Labels

CLA Signed React Core Team Opened by a member of the React Core Team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@eps1lon @react-sizebot @hoxyq @facebook-github-bot