DevTools: Add support for useOptimistic Hook #27982

eps1lon · 2024-01-17T18:01:50Z

Summary

Add support for useOptimistic Hook fixing "Unsupported hook in the react-debug-tools package: Missing method in Dispatcher: useOptimistic" when inspecting components using useOptimistic

How did you test this change?

Added test following the same pattern as for useDeferredValue

react-sizebot · 2024-01-17T18:05:28Z

Comparing: 38ef167...fc9c2ab

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.57 kB	176.57 kB	=	55.00 kB	55.00 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	178.69 kB	178.69 kB	=	55.64 kB	55.64 kB
facebook-www/ReactDOM-prod.classic.js	=	591.32 kB	591.32 kB	=	104.34 kB	104.34 kB
facebook-www/ReactDOM-prod.modern.js	=	575.08 kB	575.08 kB	=	101.43 kB	101.43 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.min.js	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
test_utils/ReactAllWarnings.js	Deleted	67.56 kB	0.00 kB	Deleted	16.59 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	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.min.js	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.min.js	+3.26%	7.09 kB	7.32 kB	+1.39%	2.66 kB	2.70 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js	+2.38%	23.44 kB	24.00 kB	+1.04%	6.41 kB	6.48 kB
test_utils/ReactAllWarnings.js	Deleted	67.56 kB	0.00 kB	Deleted	16.59 kB	0.00 kB

Generated by 🚫 dangerJS against fc9c2ab

hoxyq

Thanks!

hoxyq · 2024-01-31T09:55:03Z

To test this in DevTools, you can try updating one of the examples in react-devtools-shell, then try inspecting the element with useOptimistic, DevTools should be able to display it correctly

eps1lon · 2024-02-02T19:00:35Z

Works:

## Summary Add support for `useOptimistic` Hook fixing "Unsupported hook in the react-debug-tools package: Missing method in Dispatcher: useOptimistic" when inspecting components using `useOptimistic` ## How did you test this change? - Added test following the same pattern as for `useDeferredValue`

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))

## Summary Add support for `useOptimistic` Hook fixing "Unsupported hook in the react-debug-tools package: Missing method in Dispatcher: useOptimistic" when inspecting components using `useOptimistic` ## How did you test this change? - Added test following the same pattern as for `useDeferredValue`

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))

## Summary Add support for `useOptimistic` Hook fixing "Unsupported hook in the react-debug-tools package: Missing method in Dispatcher: useOptimistic" when inspecting components using `useOptimistic` ## How did you test this change? - Added test following the same pattern as for `useDeferredValue` DiffTrain build for commit 85cc017.

eps1lon requested a review from acdlite January 17, 2024 18:01

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Jan 17, 2024

eps1lon force-pushed the feat/devtools/useOptimistic branch from 4fbc84a to 7a35881 Compare January 17, 2024 18:26

eps1lon marked this pull request as ready for review January 17, 2024 18:46

gsathya requested a review from hoxyq January 30, 2024 19:13

hoxyq approved these changes Jan 31, 2024

View reviewed changes

eps1lon force-pushed the feat/devtools/useOptimistic branch from f35eb57 to 719fd72 Compare February 2, 2024 19:15

Sebastian Silbermann added 4 commits February 2, 2024 20:21

DevTools: Add support for useOptimistic Hook

9fd9496

Fix Flow types

1a49930

Gate test

fdb4acb

Add useOptimistic to devtools shell

fc9c2ab

eps1lon force-pushed the feat/devtools/useOptimistic branch 2 times, most recently from 5b0b96f to fc9c2ab Compare February 2, 2024 19:27

eps1lon merged commit 85cc017 into facebook:main Feb 2, 2024
36 checks passed

eps1lon deleted the feat/devtools/useOptimistic branch February 2, 2024 22:19

gnoff mentioned this pull request Feb 5, 2024

Update React from 60a927d04 to 2bc7d336a vercel/next.js#61522

Merged

hoxyq mentioned this pull request Feb 22, 2024

React DevTools 5.0.0 -> 5.0.1 #28418

Merged

hoxyq mentioned this pull request Mar 5, 2024

React DevTools 5.0.1 -> 5.0.2 #28496

Merged

ztanner mentioned this pull request Mar 19, 2024

(backport) Update React from 60a927d04 to 14898b6a9 vercel/next.js#63442

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DevTools: Add support for useOptimistic Hook #27982

DevTools: Add support for useOptimistic Hook #27982

eps1lon commented Jan 17, 2024

react-sizebot commented Jan 17, 2024 •

edited

Loading

hoxyq left a comment

hoxyq commented Jan 31, 2024

eps1lon commented Feb 2, 2024

DevTools: Add support for useOptimistic Hook #27982

DevTools: Add support for useOptimistic Hook #27982

Conversation

eps1lon commented Jan 17, 2024

Summary

How did you test this change?

react-sizebot commented Jan 17, 2024 • edited Loading

Critical size changes

Significant size changes

hoxyq left a comment

Choose a reason for hiding this comment

hoxyq commented Jan 31, 2024

eps1lon commented Feb 2, 2024

react-sizebot commented Jan 17, 2024 •

edited

Loading