experimental_useEvent #25229

poteto · 2022-09-09T22:50:20Z

Summary

This PR adds a new hook useEvent per the RFC here, gated as an experimental hook. This supersedes #24505.

TODO (will address in follow up PRs)

Linter support: Update RulesOfHooks with useEvent rules #25285
Optimizations: Refactor useEvent #25336
- Right now each use allocates a hook node, a wrapper function, an internal mutable instance, a wrapper array, and an effect node. We could get it down to just: a hook node, a wrapper function, and one more instance object (see pushStoreConsistencyCheck)

How did you test this change?

yarn test. The tests also incorporate examples from the new docs.

poteto · 2022-09-09T22:51:21Z

packages/react-reconciler/src/__tests__/useEvent-test.internal.js

+    );
+
+    // TODO: Why?
+    expect(Scheduler).toHaveYielded(['Count: 0', 'Count: 0']);


I'm not really sure what's going on here - cc @acdlite @rickhanlonii if you have any pointers on where to debug

My question here was why/how we rendered twice but I think the answer is that we retry errors?

Also, I think we need to rewrite this test since it tests passing down the event function (what are we calling this?) which is not going to be supported in this version.

Yeah, if something throws, we try one more time synchronously in case the error was caused by a data race

@acdlite do you have a code pointer for where that works so I can step through how it happens? Just want to understand how it works better but it's hard to find the right breakpoint to add.

recoverFromConcurrentError in the work loop

packages/react-reconciler/src/ReactFiberHooks.new.js

packages/react-reconciler/src/ReactFiberCommitWork.new.js

acdlite · 2022-09-13T16:14:27Z

packages/react-reconciler/src/ReactFiberHooks.new.js

+    [ref, callback],
+  );
+
+  hook.memoizedState = [ref, event];


We can do this in a follow up PR but I think we should try to optimize the runtime a bit more. We don't need all the overhead of an effect object since there are no deps and no clean up functions.

packages/react-reconciler/src/ReactFiberCommitWork.old.js

packages/react-reconciler/src/ReactFiberWorkLoop.new.js

packages/react-reconciler/src/__tests__/useEvent-test.internal.js

acdlite

Yay! See #25229 (comment). Everything else is nits or we can address in follow ups.

packages/react-reconciler/src/ReactFiberHooks.new.js

sizebot · 2022-09-13T18:51:32Z

Comparing: 2248dcc...7583f13

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	+0.04%	134.99 kB	135.04 kB	+0.15%	43.25 kB	43.32 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.30%	142.07 kB	142.50 kB	+0.35%	45.36 kB	45.52 kB
facebook-www/ReactDOM-prod.classic.js	+0.20%	488.89 kB	489.87 kB	+0.23%	87.02 kB	87.22 kB
facebook-www/ReactDOM-prod.modern.js	+0.21%	474.20 kB	475.18 kB	+0.23%	84.78 kB	84.97 kB
facebook-www/ReactDOMForked-prod.classic.js	+0.20%	488.89 kB	489.87 kB	+0.23%	87.02 kB	87.22 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable-semver/react/cjs/react.production.min.js	+1.04%	6.91 kB	6.99 kB	+1.00%	2.70 kB	2.72 kB
oss-stable/react/cjs/react.production.min.js	+1.04%	6.94 kB	7.01 kB	+1.03%	2.72 kB	2.75 kB
oss-experimental/react/cjs/react.production.min.js	+0.90%	8.13 kB	8.20 kB	+0.50%	3.03 kB	3.04 kB
facebook-react-native/react/cjs/React-prod.js	+0.67%	17.30 kB	17.42 kB	+0.39%	4.41 kB	4.43 kB
facebook-react-native/react/cjs/React-profiling.js	+0.65%	17.91 kB	18.03 kB	+0.33%	4.54 kB	4.56 kB
oss-stable-semver/react/umd/react.profiling.min.js	+0.61%	10.76 kB	10.83 kB	+0.54%	4.26 kB	4.28 kB
oss-stable-semver/react/umd/react.production.min.js	+0.61%	10.76 kB	10.83 kB	+0.52%	4.26 kB	4.28 kB
facebook-www/React-prod.modern.js	+0.61%	18.95 kB	19.07 kB	+0.36%	4.77 kB	4.78 kB
oss-stable/react/umd/react.profiling.min.js	+0.61%	10.79 kB	10.85 kB	+0.51%	4.28 kB	4.30 kB
oss-stable/react/umd/react.production.min.js	+0.61%	10.79 kB	10.85 kB	+0.51%	4.28 kB	4.30 kB
facebook-www/React-prod.classic.js	+0.60%	19.24 kB	19.36 kB	+0.37%	4.85 kB	4.87 kB
facebook-www/React-profiling.modern.js	+0.59%	19.56 kB	19.67 kB	+0.31%	4.89 kB	4.91 kB
facebook-www/React-profiling.classic.js	+0.58%	19.85 kB	19.96 kB	+0.32%	4.98 kB	4.99 kB
oss-experimental/react/umd/react.profiling.min.js	+0.55%	11.91 kB	11.98 kB	+0.41%	4.58 kB	4.60 kB
oss-experimental/react/umd/react.production.min.js	+0.55%	11.91 kB	11.98 kB	+0.44%	4.58 kB	4.60 kB
oss-experimental/react-art/cjs/react-art.production.min.js	+0.45%	90.97 kB	91.38 kB	+0.41%	28.06 kB	28.17 kB
oss-experimental/react-reconciler/cjs/react-reconciler.production.min.js	+0.42%	102.60 kB	103.03 kB	+0.46%	31.43 kB	31.57 kB
oss-experimental/react-art/cjs/react-art.development.js	+0.41%	747.22 kB	750.26 kB	+0.25%	161.36 kB	161.77 kB
oss-experimental/react-reconciler/cjs/react-reconciler.profiling.min.js	+0.38%	111.45 kB	111.88 kB	+0.35%	33.54 kB	33.66 kB
oss-experimental/react-art/umd/react-art.development.js	+0.38%	853.63 kB	856.88 kB	+0.22%	179.48 kB	179.88 kB
oss-experimental/react-reconciler/cjs/react-reconciler.development.js	+0.37%	814.94 kB	817.98 kB	+0.21%	173.61 kB	173.98 kB
facebook-www/ReactART-dev.modern.js	+0.37%	839.97 kB	843.08 kB	+0.25%	177.65 kB	178.09 kB
facebook-www/ReactART-dev.classic.js	+0.37%	850.19 kB	853.30 kB	+0.24%	179.73 kB	180.16 kB
oss-experimental/react-art/umd/react-art.production.min.js	+0.32%	126.82 kB	127.23 kB	+0.37%	39.35 kB	39.50 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.30%	142.07 kB	142.50 kB	+0.35%	45.36 kB	45.52 kB
oss-experimental/react-dom/umd/react-dom.production.min.js	+0.29%	142.12 kB	142.54 kB	+0.35%	46.04 kB	46.20 kB
facebook-www/ReactART-prod.modern.js	+0.29%	315.35 kB	316.27 kB	+0.34%	53.95 kB	54.13 kB
oss-experimental/react-dom/cjs/react-dom.profiling.min.js	+0.29%	151.55 kB	151.98 kB	+0.33%	47.73 kB	47.89 kB
oss-experimental/react-dom/umd/react-dom.development.js	+0.28%	1,152.90 kB	1,156.15 kB	+0.15%	248.63 kB	249.01 kB
facebook-www/ReactART-prod.classic.js	+0.28%	326.12 kB	327.04 kB	+0.32%	55.76 kB	55.93 kB
oss-experimental/react-dom/umd/react-dom.profiling.min.js	+0.28%	150.93 kB	151.35 kB	+0.33%	48.29 kB	48.45 kB
oss-experimental/react-dom/cjs/react-dom.development.js	+0.28%	1,099.16 kB	1,102.19 kB	+0.15%	245.95 kB	246.33 kB
facebook-www/ReactDOMForked-dev.modern.js	+0.26%	1,214.00 kB	1,217.11 kB	+0.16%	266.08 kB	266.50 kB
facebook-www/ReactDOM-dev.modern.js	+0.26%	1,214.00 kB	1,217.11 kB	+0.16%	266.08 kB	266.50 kB
facebook-www/ReactDOMForked-dev.classic.js	+0.25%	1,237.61 kB	1,240.72 kB	+0.16%	270.54 kB	270.96 kB
facebook-www/ReactDOM-dev.classic.js	+0.25%	1,237.61 kB	1,240.72 kB	+0.16%	270.54 kB	270.96 kB
oss-stable-semver/react/cjs/react.development.js	+0.23%	87.81 kB	88.01 kB	+0.24%	23.69 kB	23.74 kB
oss-stable/react/cjs/react.development.js	+0.23%	87.84 kB	88.04 kB	+0.24%	23.71 kB	23.77 kB
oss-experimental/react/cjs/react.development.js	+0.22%	91.97 kB	92.17 kB	+0.11%	24.69 kB	24.72 kB
facebook-www/ReactDOM-prod.modern.js	+0.21%	474.20 kB	475.18 kB	+0.23%	84.78 kB	84.97 kB
facebook-www/ReactDOMForked-prod.modern.js	+0.21%	474.20 kB	475.18 kB	+0.23%	84.78 kB	84.97 kB

Generated by 🚫 dangerJS against 7583f13

Co-authored-by: Lauren Tan <poteto@users.noreply.github.com>

- [`experimental_useEvent` entrypoint](https://unpkg.com/browse/react@0.0.0-experimental-3d615fc14-20220919/cjs/react.development.js) - [implementation](https://unpkg.com/browse/react-dom@0.0.0-experimental-3d615fc14-20220919/cjs/react-dom.development.js) - [experimental_useEvent](facebook/react#25229)

Summary: This sync includes the following changes: - **[0cac4d54c](facebook/react@0cac4d54c )**: Double invoked effects on suspended children ([#25307](facebook/react#25307)) //<Samuel Susla>// - **[3d615fc14](facebook/react@3d615fc14 )**: Grammar. Removed doubles of the word "the". ([#25295](facebook/react#25295)) //<Victoria Graf>// - **[6e3bc8a2e](facebook/react@6e3bc8a2e )**: [DevTools] Check if Proxy exists before creating DispatcherProxy ([#25278](facebook/react#25278)) //<Tianyu Yao>// - **[e7fc04b29](facebook/react@e7fc04b29 )**: [react-dom] Reorganize react-dom internals to match react ([#25277](facebook/react#25277)) //<Josh Story>// - **[0b54e0047](facebook/react@0b54e0047 )**: Handle rejections to avoid uncaught rejections ([#25272](facebook/react#25272)) //<Sebastian Markbåge>// - **[c5d06fdc5](facebook/react@c5d06fdc5 )**: [Flight] Fix Webpack Chunk Loading ([#25271](facebook/react#25271)) //<Sebastian Markbåge>// - **[975b64464](facebook/react@975b64464 )**: [Flight] response.readRoot() -> use(response) ([#25267](facebook/react#25267)) //<Sebastian Markbåge>// - **[60fbb7b14](facebook/react@60fbb7b14 )**: [Flight] Implement FlightClient in terms of Thenable/Promises instead of throwing Promises ([#25260](facebook/react#25260)) //<Sebastian Markbåge>// - **[c91a1e03b](facebook/react@c91a1e03b )**: experimental_useEvent ([#25229](facebook/react#25229)) //<Lauren Tan>// - **[346c7d4c4](facebook/react@346c7d4c4 )**: straightford explicit types ([#25253](facebook/react#25253)) //<Jan Kassens>// - **[3401e9200](facebook/react@3401e9200 )**: useMemoCache implementation ([#25143](facebook/react#25143)) //<Joseph Savona>// - **[0556bab32](facebook/react@0556bab32 )**: [Transition Tracing] More Accurate End Time ([#25105](facebook/react#25105)) //<Luna Ruan>// - **[5fdcd23aa](facebook/react@5fdcd23aa )**: Flow: upgrade to 0.140 ([#25252](facebook/react#25252)) //<Jan Kassens>// - **[5c43c6f02](facebook/react@5c43c6f02 )**: Unwind the current workInProgress if it's suspended ([#25247](facebook/react#25247)) //<Sebastian Markbåge>// - **[e52fa4c57](facebook/react@e52fa4c57 )**: Add early exit to strict mode ([#25235](facebook/react#25235)) //<Samuel Susla>// - **[6aa38e74c](facebook/react@6aa38e74c )**: Flow: enable unsafe-addition error ([#25242](facebook/react#25242)) //<Jan Kassens>// - **[ba7b6f418](facebook/react@ba7b6f418 )**: Flow: upgrade to 0.132 ([#25244](facebook/react#25244)) //<Jan Kassens>// - **[9328988c0](facebook/react@9328988c0 )**: Flow: fix Fiber typed as any ([#25241](facebook/react#25241)) //<Jan Kassens>// - **[c739cef2f](facebook/react@c739cef2f )**: Flow: ReactFiberHotReloading recursive type ([#25225](facebook/react#25225)) //<Jan Kassens>// - **[c156ecd48](facebook/react@c156ecd48 )**: Add some test coverage for some error cases ([#25240](facebook/react#25240)) //<Sebastian Markbåge>// - **[3613284dc](facebook/react@3613284dc )**: experimental_use(context) for server components and ssr ([#25226](facebook/react#25226)) //<mofeiZ>// - **[269c4e975](facebook/react@269c4e975 )**: Prevent infinite re-renders in StrictMode + Offscreen ([#25203](facebook/react#25203)) //<Samuel Susla>// - **[8003ab9cf](facebook/react@8003ab9cf )**: Flow: remove explicit object syntax ([#25223](facebook/react#25223)) //<Jan Kassens>// - **[492c6e29e](facebook/react@492c6e29e )**: Flow: upgrade to 0.127 ([#25221](facebook/react#25221)) //<Jan Kassens>// - **[8a9e7b6ce](facebook/react@8a9e7b6ce )**: Flow: implicit-inexact-object=error ([#25210](facebook/react#25210)) //<Jan Kassens>// - **[37cc6bf12](facebook/react@37cc6bf12 )**: Remove useDeferredValue and useTransition from Flight subset ([#25215](facebook/react#25215)) //<Sebastian Markbåge>// Changelog: [General][Changed] - React Native sync for revisions c28f313...0cac4d5 jest_e2e[run_all_tests] Reviewed By: rickhanlonii Differential Revision: D39696377 fbshipit-source-id: 113878d22d6244b8555b5fb86db1da5d43f7cfd9

- [`experimental_useEvent` entrypoint](https://unpkg.com/browse/react@0.0.0-experimental-3d615fc14-20220919/cjs/react.development.js) - [implementation](https://unpkg.com/browse/react-dom@0.0.0-experimental-3d615fc14-20220919/cjs/react-dom.development.js) - [experimental_useEvent](facebook/react#25229)

This commit adds a new hook `useEvent` per the RFC [here](reactjs/rfcs#220), gated as experimental. Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com> Co-authored-by: Rick Hanlon <rickhanlonii@fb.com> Co-authored-by: Lauren Tan <poteto@users.noreply.github.com>

Summary: This sync includes the following changes: - **[0cac4d54c](facebook/react@0cac4d54c )**: Double invoked effects on suspended children ([facebook#25307](facebook/react#25307)) //<Samuel Susla>// - **[3d615fc14](facebook/react@3d615fc14 )**: Grammar. Removed doubles of the word "the". ([facebook#25295](facebook/react#25295)) //<Victoria Graf>// - **[6e3bc8a2e](facebook/react@6e3bc8a2e )**: [DevTools] Check if Proxy exists before creating DispatcherProxy ([facebook#25278](facebook/react#25278)) //<Tianyu Yao>// - **[e7fc04b29](facebook/react@e7fc04b29 )**: [react-dom] Reorganize react-dom internals to match react ([facebook#25277](facebook/react#25277)) //<Josh Story>// - **[0b54e0047](facebook/react@0b54e0047 )**: Handle rejections to avoid uncaught rejections ([facebook#25272](facebook/react#25272)) //<Sebastian Markbåge>// - **[c5d06fdc5](facebook/react@c5d06fdc5 )**: [Flight] Fix Webpack Chunk Loading ([facebook#25271](facebook/react#25271)) //<Sebastian Markbåge>// - **[975b64464](facebook/react@975b64464 )**: [Flight] response.readRoot() -> use(response) ([facebook#25267](facebook/react#25267)) //<Sebastian Markbåge>// - **[60fbb7b14](facebook/react@60fbb7b14 )**: [Flight] Implement FlightClient in terms of Thenable/Promises instead of throwing Promises ([facebook#25260](facebook/react#25260)) //<Sebastian Markbåge>// - **[c91a1e03b](facebook/react@c91a1e03b )**: experimental_useEvent ([facebook#25229](facebook/react#25229)) //<Lauren Tan>// - **[346c7d4c4](facebook/react@346c7d4c4 )**: straightford explicit types ([facebook#25253](facebook/react#25253)) //<Jan Kassens>// - **[3401e9200](facebook/react@3401e9200 )**: useMemoCache implementation ([facebook#25143](facebook/react#25143)) //<Joseph Savona>// - **[0556bab32](facebook/react@0556bab32 )**: [Transition Tracing] More Accurate End Time ([facebook#25105](facebook/react#25105)) //<Luna Ruan>// - **[5fdcd23aa](facebook/react@5fdcd23aa )**: Flow: upgrade to 0.140 ([facebook#25252](facebook/react#25252)) //<Jan Kassens>// - **[5c43c6f02](facebook/react@5c43c6f02 )**: Unwind the current workInProgress if it's suspended ([facebook#25247](facebook/react#25247)) //<Sebastian Markbåge>// - **[e52fa4c57](facebook/react@e52fa4c57 )**: Add early exit to strict mode ([facebook#25235](facebook/react#25235)) //<Samuel Susla>// - **[6aa38e74c](facebook/react@6aa38e74c )**: Flow: enable unsafe-addition error ([facebook#25242](facebook/react#25242)) //<Jan Kassens>// - **[ba7b6f418](facebook/react@ba7b6f418 )**: Flow: upgrade to 0.132 ([facebook#25244](facebook/react#25244)) //<Jan Kassens>// - **[9328988c0](facebook/react@9328988c0 )**: Flow: fix Fiber typed as any ([facebook#25241](facebook/react#25241)) //<Jan Kassens>// - **[c739cef2f](facebook/react@c739cef2f )**: Flow: ReactFiberHotReloading recursive type ([facebook#25225](facebook/react#25225)) //<Jan Kassens>// - **[c156ecd48](facebook/react@c156ecd48 )**: Add some test coverage for some error cases ([facebook#25240](facebook/react#25240)) //<Sebastian Markbåge>// - **[3613284dc](facebook/react@3613284dc )**: experimental_use(context) for server components and ssr ([facebook#25226](facebook/react#25226)) //<mofeiZ>// - **[269c4e975](facebook/react@269c4e975 )**: Prevent infinite re-renders in StrictMode + Offscreen ([facebook#25203](facebook/react#25203)) //<Samuel Susla>// - **[8003ab9cf](facebook/react@8003ab9cf )**: Flow: remove explicit object syntax ([facebook#25223](facebook/react#25223)) //<Jan Kassens>// - **[492c6e29e](facebook/react@492c6e29e )**: Flow: upgrade to 0.127 ([facebook#25221](facebook/react#25221)) //<Jan Kassens>// - **[8a9e7b6ce](facebook/react@8a9e7b6ce )**: Flow: implicit-inexact-object=error ([facebook#25210](facebook/react#25210)) //<Jan Kassens>// - **[37cc6bf12](facebook/react@37cc6bf12 )**: Remove useDeferredValue and useTransition from Flight subset ([facebook#25215](facebook/react#25215)) //<Sebastian Markbåge>// Changelog: [General][Changed] - React Native sync for revisions c28f313...0cac4d5 jest_e2e[run_all_tests] Reviewed By: rickhanlonii Differential Revision: D39696377 fbshipit-source-id: 113878d22d6244b8555b5fb86db1da5d43f7cfd9

facebook-github-bot added CLA Signed React Core Team Opened by a member of the React Core Team labels Sep 9, 2022

poteto commented Sep 9, 2022

View reviewed changes

poteto requested review from acdlite, rickhanlonii, josephsavona and gaearon September 9, 2022 22:51

poteto marked this pull request as ready for review September 12, 2022 13:20

poteto changed the title ~~[WIP] experimental_useEvent~~ experimental_useEvent Sep 12, 2022

rickhanlonii mentioned this pull request Sep 12, 2022

[WIP] Add useEvent #24505

Closed

6 tasks