見出し画像

React Hooks for React Native

I have been satisfied myself to share experiments about React Hooks on React Native finally.

refer: https://reactjs.org/docs/hooks-intro.html

Getting Started React Hooks on React Native

Here is a sample.

https://github.com/januswel/rn-hooks

Héctor showed steps to setup React Hooks on React Native.

https://github.com/facebook/react-native/issues/21967#issuecomment-434113687

from YutamaKotaro, thanks both!!

I placed build results on https://github.com/januswel/rn-hooks/tree/master/Renderer . And copy to under `node_modules` by a npm script `postinstall`. I did these steps with `react-native init`, try with Expo if you want.

The codes in sample repository are manual copies from a movie at ReactConf 2018 by Dan.

https://www.youtube.com/watch?time_continue=3631&v=dpw9EHDh2bM

On React Native, I didn't find examples of side-effects that are easy to understand, so I picked `Alert` up.

- `useState`
- `useContext`
- `useEffect`

I think above functions make simple to write React components absolutely.

Redux-ize useReducer

`useReducer`, this is hard to use in production on React Native...

A sample repo is here.

https://github.com/januswel/rn-hooks-useReducer

We should serialize app state to cache on devices in a React Native context, it follows that `useReducer` should be called once. But `connect` in react-redux is not ready for React Hooks, and passing props recursively is obviously bore.

So I implemented `connect` for `useReducer`. YutamaKotaro gave awesome advices for this implementations too, thanks again.

`combineReducers` are available for React Hooks is good news too. This article is written by terrierscript, I swallow his reports.

https://qiita.com/terrierscript/items/1516e946dfe91397c229

Let's isolate app state from V layer!!

この記事が気に入ったらサポートをしてみませんか?