Improve message "dispatcher.useState is not a function" when mixing react@next with react-dom@16.5.2

[geoffdavis92]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
Getting TypeError: dispatcher.useState is not a function when trying to call useState; this is happening in a create-react-app, as well as in the CodeSandbox example below.

Example:
https://codesandbox.io/s/7kp55lwwpj

What is the expected behavior?
useState hook function should execute without error as defined in the API documentation

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React: v16.7.0-alpha.0
React-DOM: 16.5.2 (CSB), 16.7.0-alpha.0 (local)
React-Scripts: 2.0.3 (CSB), 2.1.0 (local)

[sophiebits]

@geoffdavis92 You need to update react-dom to the same version.

We can likely have a better error for this though. Leaving this issue open to track that.

[CarberryChai]

you can yarn add react-dom@next and then have a try……

[geoffdavis92]

@sophiebits Thank you, that was the issue. For some reason I thought I tried both packages at next but I suppose I did not.

This is ready to be closed IMO.

[threepointone]

Broadly, this is about warning when we have mismatched versions of react and react-dom installed, yes? This particular error happens right now because we have peerDependencies set with "react": "^16.0.0". This should be flagged by npm when installing, imo we should update peerDependencies to "react": "^16.8.0" (or whatever version) when we release hooks.

(we could verify versions in runtime too, but that seems like overkill)

I'll send out a PR closer to hooks launch to fix this.

[threepointone]

discussed with dan a bit more, the peer dependency wouldn't fix it, since this actually lives on react which doesn't have a peer dep, sigh. I'll send a PR with a better error message.

[threepointone]

the latest version (16.8.0-alpha.0) of react doesn't throw this error anymore (though it does throw an invariant Hooks can only be called inside the body of a function component. which isn't that much better).

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!