こんにちは。趣味グラマのNobuです。
ReactNativeでインストールされるReactのバージョンがいつの間にか16.8.3になっており、React Hooksが使えるようになりました。
ReactNativeで使えないからまだ放置で良いかと思ってたのですが、使えるようになったのでHooksのドキュメントを一通り見てみました。
使い方自体はそんなに難しそうで無かったので、早速使ってみると問題が発生。
関数コンポーネントのHot Reload Module(HRM)が動かない
Hooksを使うにあたり、コンポーネントを作る時はクラスではなく関数にする必要があります。
これ自体は文法を多少変えるだけなので、さくっと完了します。
両コンポーネントの比較は公式マニュアルにもばっちり載ってます。
Expoで適当なプロジェクトを作り、マニュアルにあるようなカウンターを関数コンポーネントで作ってみて、ちゃんとカウントアップするところまでは簡単に確認出来ました。
しかし、ここで問題が発生。
何の気なしに<Text>の中の値を変えてみたところ、HRMが動かない(画面に反映されない)のです。
HRMはReactNativeで作る際に絶対に動いて欲しい機能の一つ。
まさか関数コンポーネントだとHRMは駄目なのか！？とドキドキしながらググると、Githubにこんなスレッドが。
クラスコンポーネント配下の関数コンポーネントならHRMは動く
2016年に立ったスレッドなので古いのですが、2019年になってもコメントが付くぐらい長生き(しない方が良いけど)なスレッドです。
このスレッドの中で何人かが「クラスコンポーネント配下の関数コンポーネントならHRMが動く」と言ってます。
HMR appears to work for all components that are beneath at least one class component. So I made my root component a class, and now HMR is still working even with SFCs below. Hope this helps someone!
https://github.com/facebook/react-native/issues/10991#issuecomment-292729309
What is working for me is to use class components for screens. Then, any child components can be functional w/ hooks, and HMR still works.
https://github.com/facebook/react-native/issues/10991#issuecomment-495335891
最初の人のコメントはなぜか低評価が付けられていて可愛そうですが…。
とりあえず、これを参考にクラスコンポーネントの配下に関数コンポーネントを置いたところ、HRMが正常に動くようになりました！！
最終的には、RootのApp.tsxをクラスコンポーネントに変える事で、今のところ配下に置いた関数コンポーネントのHRMが正常に動いています。
あっさり解決してよかった(´・ω・`)
おまけで凄い物が…
先程のスレッドの最後のコメントにtwitterのリンクがあり、開いてみたところ、ReactNativeの次のバージョン(0.61)に向けて、凄い良い感じのHRM(とは言わなくなるのかな?)の動画が上がってました。
StyleSheetの修正も一瞬で反映されるし、赤い画面になってもコードを修正すればちゃんと表示される！めっちゃ期待です！！
まとめ
という訳で、凄い楽しみな機能が開発中という事も分かったので、ReactNativeの今後にも期待しつつ、新しいアプリにHooksを導入していこうと思います＼(^o^)／
コメント