Before
export const HogeComponent: React.FC = (() => {
const fuga = useSelector((state: State) => state.fuga);
const dispatch = useDispatch();
useEffect(() => {
const piyo = fuga.someMethod();
dispatch(MogeAction.someAction(piyo));
}, [dispatch]);
return (......
});
このようなコンポーネントで、Appコンポーネントに付随する非同期処理で fuga
がstoreに入る前に、 useEffect
が呼ばれてしまった。
After
export const HogeComponent: React.FC = (
const fuga = useSelector((state: State) => state.fuga);
const dispatch = useDispatch();
useEffect(() => {
const piyo = fuga.someMethod();
dispatch(MogeAction.someAction(piyo));
}, [dispatch, fuga]); // 第2引数にfuga追加
......
});
useEffect
の第2引数に使う変数を書いたところ、変数の更新と同時に useEffect
が呼ばれるようになった。