useEffectの落とし穴

業務にて詰まった部分とその解決方法を簡単に紹介

発生した問題

Flutter_Hooksの機能の１つでとっても便利なuseEffect
画面描写時に１度だけ呼び出したり特定の値の変更を検知して処理を実行したい時なんかに重宝する機能です

useEffect(
  () {
    // 特定のタイミングに呼び出したい何らかの処理
    return;
  },
  [/*タイミングの判定に使う値*/],
);

ただし、riverpodと併用している場合に以下のような処理をしたくなることがあるかもしれません

useEffect(
  () {
    // provider.notifierなどのstateに影響が出る処理
    return;
  },
  [/*タイミングの判定に使う値*/],
);

これを実行するとエラーが出ます

setState() or markNeedsBuild() called during build.
//「Widgetビルド中にstateをいじるな」といったような意味

解決策

それでもuseEffectの中でその処理を実行したいといった時には、Widgetのビルドが終わるのを待ってから処理を実行するように指定する必要があります

そこで使用するのがWidgetsBinding.instance.addPostFrameCallback()
この中に記述した処理はWidgetの描写が終わった後に実行されます

つまり

useEffect(
  () {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // provider.notifierなどのstateに影響が出る処理
    });
    return;
  },
  [/*タイミングの判定に使う値*/],
);

これでOK

多少の落とし穴はあっても便利なものは便利ですといった話でした