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

fix[react-devtools/ReactDebugHooks]: support unstable prefixes in hooks and useContextWithBailout #30837

Conversation

hoxyq
Copy link
Contributor

@hoxyq hoxyq commented Aug 28, 2024

Related - #30407.

This is experimental-only and FB-only hook. Without these changes, inspecting an element that is using this hook will throw an error, because this hook is missing in Dispatcher implementation from React DevTools, which overrides the original one to build the hook tree.

Screenshot 2024-08-28 at 18 42 55

One nice thing from it is that in case of any potential regressions related to this experiment, we can quickly triage which implementation of useContext is used by inspecting an element in React DevTools.

Ideally, I should've added some component that is using this hook to react-devtools-shell, so it can be manually tested, but I can't do it without rewriting the infra for it. This is because this hook is only available from fb-www builds, and not experimental.

Copy link

vercel bot commented Aug 28, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
react-compiler-playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 28, 2024 8:07pm

@facebook-github-bot facebook-github-bot added the React Core Team Opened by a member of the React Core Team label Aug 28, 2024
@react-sizebot
Copy link

react-sizebot commented Aug 28, 2024

Comparing: 7771d3a...367d517

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.js = 6.68 kB 6.68 kB +0.05% 1.83 kB 1.83 kB
oss-stable/react-dom/cjs/react-dom-client.production.js = 501.40 kB 501.40 kB = 89.99 kB 89.99 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.69 kB 6.69 kB +0.05% 1.83 kB 1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js = 508.52 kB 508.52 kB = 91.16 kB 91.16 kB
facebook-www/ReactDOM-prod.classic.js = 596.16 kB 596.16 kB = 105.70 kB 105.70 kB
facebook-www/ReactDOM-prod.modern.js = 572.44 kB 572.44 kB = 101.88 kB 101.88 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable-rc/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js +2.23% 31.65 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable-rc/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 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.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable-rc/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.production.js +2.25% 28.24 kB 28.88 kB +1.52% 5.59 kB 5.67 kB
oss-experimental/react-debug-tools/cjs/react-debug-tools.development.js +2.23% 31.65 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable-rc/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable-semver/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 kB
oss-stable/react-debug-tools/cjs/react-debug-tools.development.js +2.21% 31.66 kB 32.36 kB +1.40% 5.72 kB 5.80 kB

Generated by 🚫 dangerJS against 433fc09

@hoxyq hoxyq force-pushed the react-devtools/support-use-context-with-bailout-and-unstable-prefix branch from d63e49f to 37c6cc7 Compare August 28, 2024 17:53
@hoxyq hoxyq force-pushed the react-devtools/support-use-context-with-bailout-and-unstable-prefix branch from 37c6cc7 to 433fc09 Compare August 28, 2024 20:05
Comment on lines +982 to +984
if (functionName.slice(startIndex).startsWith('unstable_')) {
startIndex += 'unstable_'.length;
}
Copy link
Collaborator

@eps1lon eps1lon Aug 29, 2024

Choose a reason for hiding this comment

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

I never considered that. I guess we also have a similar problem with experimental_useEffectEvent.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@jackpope @gsathya Do we have plans for using experimental_useEffectEvent soon? Will it be transpiled by the compiler?

I can put up a separate PR for it.

Copy link
Contributor

Choose a reason for hiding this comment

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

Not that I know of. But it might be worth handling the pattern anyway. I think we can assume we'll create more unstable_ or experimental_ prefixes in the future, beyond useEffectEvent / useContextWithBailout.

@hoxyq hoxyq merged commit 8308d2f into facebook:main Aug 30, 2024
184 checks passed
@hoxyq hoxyq deleted the react-devtools/support-use-context-with-bailout-and-unstable-prefix branch August 30, 2024 09:34
gnoff pushed a commit to vercel/next.js that referenced this pull request Sep 12, 2024
**breaking change for canary users: Bumps peer dependency of React from
`19.0.0-rc-7771d3a7-20240827` to `19.0.0-rc-94e652d5-20240912`**

[diff
facebook/react@7771d3a7...94e652d5](facebook/react@7771d3a...94e652d)

<details>
<summary>React upstream changes</summary>

- facebook/react#30952
- facebook/react#30950
- facebook/react#30946
- facebook/react#30934
- facebook/react#30947
- facebook/react#30945
- facebook/react#30938
- facebook/react#30936
- facebook/react#30879
- facebook/react#30888
- facebook/react#30931
- facebook/react#30930
- facebook/react#30832
- facebook/react#30929
- facebook/react#30926
- facebook/react#30925
- facebook/react#30905
- facebook/react#30900
- facebook/react#30910
- facebook/react#30906
- facebook/react#30899
- facebook/react#30919
- facebook/react#30708
- facebook/react#30907
- facebook/react#30897
- facebook/react#30896
- facebook/react#30895
- facebook/react#30887
- facebook/react#30889
- facebook/react#30893
- facebook/react#30892
- facebook/react#30891
- facebook/react#30882
- facebook/react#30881
- facebook/react#30870
- facebook/react#30849
- facebook/react#30878
- facebook/react#30865
- facebook/react#30869
- facebook/react#30875
- facebook/react#30800
- facebook/react#30762
- facebook/react#30831
- facebook/react#30866
- facebook/react#30853
- facebook/react#30850
- facebook/react#30847
- facebook/react#30842
- facebook/react#30837
- facebook/react#30848
- facebook/react#30844
- facebook/react#30839
- facebook/react#30802
- facebook/react#30841
- facebook/react#30827
- facebook/react#30826
- facebook/react#30825
- facebook/react#30824
- facebook/react#30840
- facebook/react#30838
- facebook/react#30836
- facebook/react#30819
- facebook/react#30816
- facebook/react#30814
- facebook/react#30813
- facebook/react#30812
- facebook/react#30811

</details>

---------

Co-authored-by: vercel-release-bot <infra+release@vercel.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed React Core Team Opened by a member of the React Core Team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants