🎣 Using React Hooks in React Native

[theluk]

React Hooks will ship as part of React Native 0.59.

If you are interested in using Hooks before then, see my comment below.

Original issue:

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

[skip envinfo]
OS: Windows 10
Node: 10.11.0
Yarn: Not Found
npm: 6.4.1
Watchman: Not Found
Xcode: N/A
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Packages: (wanted => installed)
react: 16.7.0-alpha.0 => 16.7.0-alpha.0
react-native: https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz => 0.55.4
expo: 2.2.0

Description

When using React Hooks like useState within a function component, I get the following error message.

hooks can only be called inside the body of a function component

export default function RootContainer(props) {
  const [something, setSomething] = useState('nothing');

  return (
    <View />
  );
};

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[brunolemos]

I was not able to make it work on react-native as well, but with a different error:

TypeError: dispatcher.useState is not a function

hooks can only be called inside the body of a function component

I noticed that this error also happens when you have two different instances of React being used, so double check that. (facebook/react#13991)

[chrisbianca]

I started looking into this yesterday and it seems that the React Native renderer needs to be updated to implement something similar to what has been added for React Dom: https://github.com/facebook/react/pull/13968/files#diff-72f7665306d50674917de18af012bc5b

Currently the React Native renderer only exports the readContext method on it's Dispatcher: https://github.com/facebook/react-native/blob/master/Libraries/Renderer/oss/ReactNativeRenderer-dev.js#L13485

I didn't look into the actual implementation details to see whether this is an easy port as it looks like there's multiple versions of the renderers - both the current and Fabric version of the renderer have a dev, prod and profiling version. I'm assuming these are generated in some way from a single base file for each version (current / Fabric) which isn't available in the repo.

[developer239]

😢😭

[hramos]

We need to update the React Native Renderer inside the Libraries/Renderer directory alongside the React dependency. Please wait for the React sync to land, and we will cut a new official release with 16.6 then. We’ll do the same once 16.7 stable is released.

[brunolemos]

We’ll do the same once 16.7 stable is released.

It would be much appreciated to have a next version of react-native synced with the next version of react so we can try hooks, concurrent and any other new feature together with everyone else.

My project is universal (same components between web and mobile) so my hands are tied. Can't use hooks or simply upgrade because react-native breaks.

[gaearon]

We can just do a sync with enableHooks: false feature flag and then those who want can override it locally.

[ferrannp]

We’ll do the same once 16.7 stable is released.

@hramos React team ask to the community to try hooks and give feedback about them. IMO we need a way for RN people to be able to provide this feedback too (not only React projects) before anything is stable.

[fungilation]

Hooks is quite a change for React / RN syntax. A lot of docs will need updating too?

[hramos]

Using Hooks in React Native

If you'd like to try out Hooks today, you can do the following after installing React 16.7.0-alpha in your project:

Note: Hooks are an experimental proposal to React. You can learn more in @gaearon's post, Making Sense of React Hooks.

1. Clone the https://github.com/facebook/react repository.
2. Navigate to the react directory.
3. Replace all instances of enableHooks = false with enableHooks = true in packages/shared.
4. Run yarn install
5. Run yarn build -- --type=RN_OSS.
6. After a few seconds, you'll notice a new build/react-native/ directory has been created. Copy the contents of this directory, to your project's node_modules/react-native/Libraries/Renderer directory.

Let us know if the above steps work out for you.

---

We're planning on landing support for React 16.6.0 in 0.57.5. Hooks is available in the 16.7.0-alpha, and feedback from the community so far has been that upgrading to alphas of React in the stable React Native releases can be disruptive. What do people here think about a React Native 0.57.5-alpha release that includes support for 16.7.0-alpha out of the box?

[dabit3]

Thanks @hramos for this info! So this works fine when using useState, but for some reason when I move on to try useEffect I get the following error:

failed to execute 'postMessage' on 'DedicatedWorkerGlobalScope': No function was found that matched the signature provided.

Any ideas on what could be causing this or how to mitigate?

UPDATE This only throws when remote debugger is enabled.

[jlongster]

Wouldn't it be something like a 0.57.6-alpha if you're already aiming for a stable 0.57.5?

I'm totally fine using a custom build for React Native, as long as it works. Haven't tried it yet but does the error in the above comment make sense? If it helps I can try it as well.