⏱️

useEffectのsetInterval内からReduxのstateを参照するときのやり方

2021/11/11に公開

useEffect内でsetIntervalを使い定期実行をする場合、クロージャの関係で
Reduxのstate(下記のusers)が更新されても、繰り返し処理内でそれが反映されることはない

const Hoge: React.FC = () => {
  // storeからstate取得
  const { users } = useSelector(state => state.users)
  useEffect(() => {
      const intervalId = setInterval(() => {
        // redux storeのデータを使って何かする処理
	// usersの初期値でずっと繰り返される
        doSomething(users)
      }, 5000);
      return function () {
        clearInterval(intervalId);
      };
  }, []);
}

useRefを使えばいい、使い方は合ってるかわからないけど以下で常に最新のstateを取り出せるようになった
(store側とFC内で2重のstate管理みたいになってて微妙)

const Hoge: React.FC = () => {
  // storeからstate取得
  const { users } = useSelector(state => state.users)
  
  // refの定義
  const refUsers = useRef(users)
  // redux stateが更新されたらrefも更新するようにする
  useEffect(() => {
    refUsers.current = users;
  }, [users]);
  
  
  useEffect(() => {
      const intervalId = setInterval(() => {
        // redux storeのデータを使って何かする処理
	// refUsers.currentを参照させる
        doSomething(refUsers.current)
      }, 5000);
      return function () {
        clearInterval(intervalId);
      };
  }, []);
}

Discussion