🎣 Using React Hooks in React Native

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 />
  );
};

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. (react/react#13991)

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.

😢😭

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.

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.

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

@hramos

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.

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

@gaearon

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.

Clone the https://github.com/facebook/react repository.
Navigate to the react directory.
Replace all instances of enableHooks = false with enableHooks = true in packages/shared.
Run yarn install
Run yarn build -- --type=RN_OSS.
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?

@hramos

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.

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.

The above replies are correct!

We (React core team) haven't announced the date when hooks will be released in a stable React version– (other than saying "soon")– and this is a prerequisite for supporting hooks in React Native.

I will say that as soon as hooks are released in React stable, I'll be working with the React Native team to unblock anything needed to support hooks there. I'm already working on upgrading ancillary packages (like the standalone react-devtools) in preparation.

@bvaughn

@bvaughn Are there large changes required for React Native to support hooks, or is it pretty basic stuff? I'm using ptmt/react-native-macos, and I'm considering using React hooks in my codebase, even if that means making some changes to native code.

There might some unknowns but I don't think it should be large, no.

For those asking for a timeline, support for Hooks in RN should land no earlier than Release 0.60. This is based on the fact the 0.59 RC is due to be cut soon, with React 16.6.3 as a dependency most likely.

@hramos

Oh no‼️ ❤️ hooks, is there anywhere where we can beg to get hooks into 59? @hramos

The 0.59 release is being coordinated in react-native-community/releases#79, and that's the best place to discuss if you feel strongly that this cannot wait for 0.60.

If you want a more in depth explanation of what it takes for Hooks to land: react-native-community/releases#79 (comment)

(locking to keep this as last link until updates)

React 16.8 with Hooks has been released: https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

We are working on updating React Native to use React 16.8 in time for the React Native 0.59 release.

👀 ccefc70

Hooks have landed in React Native. They will be part of the 0.59 release.

The 0.59 release has been promoted to stable. Read more in the React Native blog: http://facebook.github.io/react-native/blog/2019/03/12/releasing-react-native-059

Now that Hooks are generally available, I'll go ahead and unpin this thread.

Navigation Menu

Repository navigation

🎣 Using React Hooks in React Native #21967

React Hooks will ship as part of React Native 0.59.

Original issue:

Environment

Description

Using Hooks in React Native

118 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

🎣 Using React Hooks in React Native #21967

Description

React Hooks will ship as part of React Native 0.59.

Original issue:

Environment

Description

Activity

react-native-bot commented on Oct 26, 2018

brunolemos commented on Oct 27, 2018

chrisbianca commented on Oct 27, 2018

developer239 commented on Oct 27, 2018

hramos commented on Oct 28, 2018

brunolemos commented on Oct 28, 2018

gaearon commented on Oct 28, 2018

ferrannp commented on Oct 29, 2018

fungilation commented on Oct 29, 2018

hramos commented on Oct 29, 2018

Using Hooks in React Native

dabit3 commented on Oct 30, 2018

jlongster commented on Oct 30, 2018

118 remaining items

bvaughn commented on Jan 17, 2019

aleclarson commented on Jan 24, 2019

bvaughn commented on Jan 24, 2019

hramos commented on Jan 24, 2019

fbartho commented on Jan 24, 2019

hramos commented on Jan 24, 2019

kelset commented on Jan 28, 2019

hramos commented on Feb 6, 2019

hramos commented on Feb 8, 2019

hramos commented on Mar 12, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions