React Hooksの使い方を学ぼう～関数コンポーネントの状態管理を行う

基礎からはじめるReact Native入門 第5回

独自フックに切り分ける

　複数のフックを組み合わせて、 リスト9くらいの規模になってくると、せっかくの関数コンポーネントなのに、だんだんと見通しが悪くなってきます。そんなときは、いくつかのフックをまとめて別の関数として抽出し、独自のフック（Custom Hooks）とすることができます（リスト10）。

［リスト10］独自フックuseClock

const ClockWithCustomHooks = () => {
  const date = useClock(); // (2)

  return (
    <View>
      <Text>現在時刻</Text>
      <Text>{date.toLocaleTimeString()}</Text>
    </View>
  ); 
}

const useClock = () => { // (1)
  const [date, setDate] = useState(() => new Date());

  useEffect(() => {
    const timerID = setInterval(() => {
      setDate(new Date());
    }, 1000);

    return () => {
      clearInterval(timerID);
    };
  }, []);

  return date;
};

　今回は（1）のように useClock という独自フックを作成してみました。よく見ると、従来の処理を関数に切り出して名前をつけただけで、処理の流れが全く変わっていないことがお分かりいただけると思います。ビューツリーに依存しているフックにとって重要なのは「どこの関数コンポーネントが起点となって呼び出されたか」なので、関数に切り出すこと自体は問題ないのです。

　これによって、（2）のように、コンポーネント側ではすっきりとした見た目で呼び出せるようになりました。

フックを条件分岐で呼び分けてはいけない

　さて、仕組みはともかくとして使い方は簡単そうなフックですが、守るべきルールがあります。フック初心者が必ずハマるところなので、気をつけてください。それは、「フックの実行を条件分岐やループに入れてはいけない」ということです。

　例えば、未ログインだった場合にログイン処理の副作用を起こしたいと思ったら、リスト11のような処理を書いてしまうと思います。

［リスト11］NGパターン

const [loginState, setLoginState] = useState(null);

if (!loginState) {
  useEffect(() => {
    api.login("...")
    .then(result => setLoginState(result));
  });
}

　これはReactが正しい挙動をできなくなる、NGな書き方です。Reactはフックの種類と呼び出し順を覚えることでフックの状態を管理しているので、条件分岐やループで呼び出し順が変わってしまうと困るのです。正しくは、リスト12のように書くべきです。

［リスト12］OKパターン

const [loginState, setLoginState] = useState(null);

useEffect(() => {
  if (!loginState) {
    api.login("...")
    .then(result => setLoginState(result));
  }
});

　これは独自フックを作る場合にも同様で、必ず関数コンポーネントがフックを呼び出す順番が一定になるようにしてください。

まとめ

　今回は、関数コンポーネントに状態管理やライフサイクル管理の機能を付与するための、フック機能についての解説をしました。今後の本連載でも、サンプルコードに簡単な状態管理が必要になった場合には useState を使っていくので、ぜひ覚えてみてください。