【React Native】useEffectを使って画面の再レンダリングを行う

こんにちは、Bukuです。

プログラミングを学び始めて4ヶ月ほど経ち、初めてReactNativeを使ってアプリ開発をしました。（上の画像です）

心・技・体という３つの項目を鍛えるために何をするのか、そのために何をしないのか決めて達成できたら「＋」を押してカウントしていくアプリです。

ここで躓いたのが「＋」を押したときのゲージの描画です。カウントが増えたにもかかわらずゲージの描写が変わらず、一度リロードする必要がありました。

今回の記事は、これをリアルタイムで反映させるように変更する方法です。

useEffectの第２引数を変更する

useEffectの第2引数に空の配列（[]）を渡していたので、useEffectの中の処理がマウント時のみ実行されていました。

useEffect(() => {
    db.transaction(tx => {
      tx.executeSql(
        'select * from users where id = 1;',
        null,
        (_, { rows: { _array } }) => setItems(_array),
      );
    });
  }, []); // ここの[]です

というわけで、第2引数にはなにも渡さないようにします。

useEffect(() => {
    db.transaction(tx => {
      tx.executeSql(
        'select * from users where id = 1;',
        null,
        (_, { rows: { _array } }) => setItems(_array),
      );
    });
  });

これで「＋」を押してカウントが変更になった場合は再レンダリングが行われるようになりました。

詳細は以下の公式ドキュメントをご覧ください。（『ヒント：副作用のスキップによるパフォーマンス改善』という項目が参考になりました）

副作用フックの利用法

もし間違いなどありましたら教えていただけると助かります！