CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2019/10/24 11:00
目次

独自フックに切り分ける

 複数のフックを組み合わせて、 リスト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 を使っていくので、ぜひ覚えてみてください。



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:基礎からはじめるReact Native入門

もっと読む

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5