Implement the experimental Hooks proposal behind a feature flag #13968

sebmarkbage · Oct 25, 2018

Hooks let you use all React features (such as state and lifecycle) without writing a class.

Learn more about Hooks
Provide feedback on the Hooks RFC

We have presented the Hooks proposal at React Conf 2018. This pull request implements all proposed built-in Hooks behind a feature flag, both for the client and the server renderer.

This is a very early time for Hooks and this proposal is experimental. We're merging it into master now so we can iterate on it. It is turned on only in the 16.7 alpha release so that you can try it and provide your feedback.

We have been using this code for a month in production so while the APIs are not stable, we don't expect the implementation to contain major bugs.

Please keep the feedback and discussion contained in the Hooks RFC (and not in this PR) so that everyone can discuss it in a single place without checking multiple GitHub threads.

sizebot · Oct 25, 2018

Details of bundled changes.

Comparing: 5045763...5045763

scheduler

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
scheduler.development.js	n/a	n/a	0 B	19.17 KB	0 B	5.74 KB	UMD_DEV
scheduler.production.min.js	n/a	n/a	0 B	3.16 KB	0 B	1.53 KB	UMD_PROD

Generated by 🚫 dangerJS

NE-SmallTown · Oct 25, 2018

I'm so sorry to say this in this thread but I notice this:

committed on 6 Sep

Oh guys, the last time you do this is the Suspense. 😄

Great work !

-------- I will remove this comment if it causes spam

bvaughn · Oct 25, 2018

bvaughn approved these changes Oct 25, 2018

View changes

aweary · Oct 25, 2018

aweary approved these changes Oct 25, 2018

View changes

😍

acdlite · Oct 25, 2018

acdlite approved these changes Oct 25, 2018

View changes

Wait wait I want to approve it, too!

jamiebuilds · Oct 25, 2018

jamiebuilds approved these changes Oct 25, 2018

View changes

Hold up, but I also want to approve it

TrySound · Oct 25, 2018

TrySound approved these changes Oct 25, 2018

View changes

Great stuff

sophiebits · Oct 26, 2018

sophiebits approved these changes Oct 26, 2018

View changes

wow, great idea

philipp-spiess · Oct 26, 2018

philipp-spiess approved these changes Oct 26, 2018

View changes

⚓️

philipp-spiess · Oct 26, 2018

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

+      ]);
+    });
+
+    it('flushes passive effects even if siblings schedule a new root', () => {


I wonder how you came up with all of those edge cases. 😉

Ran into bugs in the first implementation by trying it on the product code.

Kovensky · Oct 27, 2018

Kovensky reviewed Oct 27, 2018

View changes

Kovensky · Oct 27, 2018

packages/react/src/ReactHooks.js

+          false,
+          'Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be ' +
+            'removed in a future major release. Did you mean to call useContext(Context) instead?',
+        );


Interesting; this also means that you can't use the usual const { Provider, Consumer } = React.createContext() pattern with hooks.

There’s no reason to use that pattern anymore with hooks.

@trueadm actually this could be useful for libraries wanting to hide their providers 🤔

It's plausible one of returned values would be a Hook itself in the future.

gaearon · Oct 28, 2018

gaearon approved these changes Oct 28, 2018

View changes

seems okay

TrySound · Oct 29, 2018

TrySound reviewed Oct 29, 2018

View changes

TrySound · Oct 29, 2018

packages/react-dom/src/server/ReactPartialRendererHooks.js

+import invariant from 'shared/invariant';
+import warning from 'shared/warning';
+
+type BasicStateAction<S> = S | (S => S);


This is more sound I think. In current case flow will always refine any value and function params and return value won't be checked. I had the same problem in powerplug.

type BasicStateAction<S> = (S => S) | S;

Yeah we found the same thing when testing at FB. Forgot to update in the upstream brach. :)

TrySound · Oct 29, 2018

TrySound reviewed Oct 29, 2018

View changes

TrySound · Oct 29, 2018

packages/react-dom/src/server/ReactPartialRendererHooks.js

+}
+
+export function useState<S>(
+  initialState: S | (() => S),


Here the same problem. (() => S) is unreachable.

acdlite · Oct 29, 2018

I'm merging this PR now so that we can continue to iterate on changes to Hooks in separate PRs. The feature flag for Hooks will remain disabled (so they won't be accessible in releases) until we come to a decision on the RFC.

sebmarkbage · Nov 21, 2018

What was the reason this uses the dynamic switch? It is always preferable to use the static one.

I think I thought I would use a GK for dogfooding, before I realized that made no sense

sebmarkbage requested review from sophiebits, bvaughn, gaearon, trueadm and acdlite Oct 25, 2018

facebook-github-bot added the CLA Signed label Oct 25, 2018

klamping referenced this pull request Oct 25, 2018
Open
React PR Test Report Listing #1

Kovensky referenced this pull request Oct 26, 2018
Merged
Add type definitions for the proposed React Hooks API #30057
8 of 8 tasks complete

acdlite force-pushed the sebmarkbage:hooks branch from 46952bc to ddbfe2e Oct 29, 2018

Swap order of function member in hook union types

Loading status checks…

5045763

acdlite force-pushed the sebmarkbage:hooks branch from 0d46487 to 5045763 Oct 29, 2018

acdlite merged commit 5045763 into facebook:master Oct 29, 2018
0 of 2 checks passed

0 of 2 checks passed

ci/circleci CircleCI is running your tests
Details

continuous-integration/appveyor/branch Waiting for AppVeyor build to complete
Details

facebook/react

Join GitHub today

Implement the experimental Hooks proposal behind a feature flag #13968

Conversation

sebmarkbage commented Oct 25, 2018

sebmarkbage requested review from sophiebits, bvaughn, gaearon, trueadm and acdlite Oct 25, 2018

facebook-github-bot added the CLA Signed label Oct 25, 2018

This comment has been minimized.

sizebot commented Oct 25, 2018 • edited

scheduler

klamping referenced this pull request Oct 25, 2018

This comment has been minimized.

NE-SmallTown commented Oct 25, 2018 • edited

bvaughn approved these changes Oct 25, 2018 View changes

aweary approved these changes Oct 25, 2018 View changes

acdlite approved these changes Oct 25, 2018 View changes

jamiebuilds approved these changes Oct 25, 2018 View changes

TrySound approved these changes Oct 25, 2018 View changes

sophiebits approved these changes Oct 26, 2018 View changes

philipp-spiess approved these changes Oct 26, 2018 View changes

This comment has been minimized.

philipp-spiess Oct 26, 2018 • edited

This comment has been minimized.

gaearon Oct 28, 2018 • edited

Kovensky referenced this pull request Oct 26, 2018

Kovensky reviewed Oct 27, 2018 View changes

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

gaearon approved these changes Oct 28, 2018 View changes

acdlite and others added some commits Sep 5, 2018

sophiebits and others added some commits Oct 13, 2018

TrySound reviewed Oct 29, 2018 View changes

This comment has been minimized.

TrySound Oct 29, 2018 • edited

This comment has been minimized.

TrySound reviewed Oct 29, 2018 View changes

This comment has been minimized.

acdlite force-pushed the sebmarkbage:hooks branch from 46952bc to ddbfe2e Oct 29, 2018

acdlite force-pushed the sebmarkbage:hooks branch from 0d46487 to 5045763 Oct 29, 2018

This comment has been minimized.

acdlite commented Oct 29, 2018

Hide details View details acdlite merged commit 5045763 into facebook:master Oct 29, 2018 0 of 2 checks passed

0 of 2 checks passed

This comment has been minimized.

sebmarkbage commented on packages/shared/forks/ReactFeatureFlags.native-fb.js in 105f2de Nov 21, 2018

This comment has been minimized.

acdlite replied Nov 22, 2018

sizebot commented Oct 25, 2018 •

edited

NE-SmallTown commented Oct 25, 2018 •

edited

bvaughn approved these changes Oct 25, 2018

View changes

aweary approved these changes Oct 25, 2018

View changes

acdlite approved these changes Oct 25, 2018

View changes

jamiebuilds approved these changes Oct 25, 2018

View changes

TrySound approved these changes Oct 25, 2018

View changes

sophiebits approved these changes Oct 26, 2018

View changes

philipp-spiess approved these changes Oct 26, 2018

View changes

philipp-spiess Oct 26, 2018 •

edited

gaearon Oct 28, 2018 •

edited

Kovensky reviewed Oct 27, 2018

View changes

gaearon approved these changes Oct 28, 2018

View changes

TrySound reviewed Oct 29, 2018

View changes

TrySound Oct 29, 2018 •

edited

TrySound reviewed Oct 29, 2018

View changes

acdlite force-pushed the sebmarkbage:hooks branch from `46952bc` to `ddbfe2e` Oct 29, 2018

acdlite force-pushed the sebmarkbage:hooks branch from `0d46487` to `5045763` Oct 29, 2018

acdlite merged commit `5045763` into facebook:master Oct 29, 2018
0 of 2 checks passed

sebmarkbage commented on `packages/shared/forks/ReactFeatureFlags.native-fb.js` in `105f2de` Nov 21, 2018