OTOBANK Engineering Blog

オトバンクはコンテンツが大好きなエンジニアを募集しています！

トップ > ReactNative > わたしのReact Hooksの使い方

わたしのReact Hooksの使い方

ReactNative

こんにちは、アプリ開発担当のエモトです。Pixel 4a が発表されましたね。私のメイン機は iOS なのですが、Android も多少持っているので興味があります。パンチホール式を採用した広々としたディスプレイに惹かれるモノがありますが、「今は時期が悪い、5Gまで待て」と言い聞かせ、5Gモデルを首長く待ちます。まあ、私が使っている回線はMVNOなので、5Gが使えるのがいつになるかは分かりませんが。5Gの風を浴びたい

初めて React Hooks の存在を知ったとき、まだ React Native もよく分かっていない時期で、「フックス？なにそれ？おいしいの？」な状態でした。開発を幾つかやってきて慣れてきた現在は、Hooks で全部書きたいと、思うようにもなりました。

私の開発内容では、標準の Hooks で十分に開発はできているのですが、ときどき少し足りないと思う時があり、その場合はカスタム Hooks を使っています。今回はそれを少し紹介します。

didMount/didUnmount時のみに呼ばれるuseEffect

カスタム Hook を用意せずとも、useEffect の第二引数に [] を指定すれば、実現できます。追加するほどではないと思っていたのですが、[] を指定するたびに ESLint が反応するのは面倒なため、追加しました。

export function useEffectOnce(effect: EffectCallback) {
  useEffect(effect, [])
}

第二引数を書く必要なくなるので、コードがすっきりしまた。これは有名なカスタム Hook の1つであり、カスタム Hook を扱った技術ブログやライブラリでもしばしば見かけます。

State変数の以前の値を参照したい

これも有名なカスタム Hook です。変数の変化量に応じて処理や表示の場合分けが必要なとき、変数更新のたびに、以前の値を保存するためのコードを挿入する必要がないので、とても便利です。

export function usePrevious<T>(value: T) {
  const ref = useRef<T>(null)
  useEffect(() => {
    ref.current = value
  })
  return ref.current
}

Stateではない変数を Hook で管理したい

変数管理は setState を用いれば、変数の参照や更新もできるので便利です。ただし、対象の変数が component に影響しない（させたくない）場合は、変数更新のたびに起こる不要な再レンダリングでパフォーマンスに影響するため、不向きです。State のためにあるのだから、当然のことです。それでも、setState の変数管理だけができないかと色々と考えました。

すぐ思いつくのは、useRef を使うことです。

const ref = useRef(false)

ref.current = hogehoge

if (ref.current) {
  piyopiyo()
}

しかし、コード中に current が唐突に出てくるのは違和感を感じます。そこで、それを改善する Hook を作成しました。

  • カスタム Hook
/**
 * ステートレスな変数を管理する
 */
export function useStateless<T>(value: T): [() => T, (v: T) => void] {
  const ref = useRef<T>(value)
  return [
    () => {
      return ref.current
    },
    (v: T) => {
      ref.current = v
    },
  ]
}
  • 使用例
const [getRef, setRef] = useStateless(false)

setRef(hogehoge)

if (getRef()) {
  piyopiyo()
}

setState と異なって、変数参照が関数になってしまったのが、残念なところです。内部に useEffect を入れて、値を更新することができなかいかと試しましたが、うまく行かず、このようになりました。しかしながら、Hook でステートレスな変数を管理できるようになったので、コードが整理されたと思っています。

まとめ

Hooks は公式でカスタマイズが紹介され、またサードライブラリが公開さてします。それらを利用して、より便利に開発しましょう。

以前は、React Native の開発に躓くことが多かったのですが、function component そして React Hooks を使えるようになってから、自分が書きたいコードを自分で書けるようになってきたと思います（まだまだ知らないことは多いですが）。React Hooks は、私が React Native 開発がより面白いと思った起点の１つでもあるので、React Hooks を見ていくのは React Native の勉強におすすめです。

最後に、オトバンクではエンジニアを募集中です。オーディオブックや、React Native 開発（Swift や Kotlinのネイティブコードも書いてます）にご興味があれば、是非どうぞ。

お待ちしております。