reactjs - ReactのuseReducer、useContext、useEffectで無限ループを防ぐ方法

Question

現在、アプリケーションを Context プロバイダー (useReducer から値を取得) でラップし、useEffect フックを使用して子コンポーネントを介して更新するときに、無限ループの作成を回避する方法を見つけようとしています。

ここ CodeSandboxに問題の例があります。

ここにすべてのコードを再投稿せずに問題について話すのは明らかに難しいですが、重要な点は次のとおりです。

根：

function App() {
   const [state, dispatch] = useReducer(reducer, initialState);
   const value = { state, dispatch };

  return (
<Context.Provider value={value}>
...
</Context.Provider>

子：

export const Page1: FC = () => {
  const { dispatch, state } = useContext(Context);
  const { isLoading } = state;

  useEffect(() => {
    dispatch({
      type: "loading",
      payload: false
    });
  }, [dispatch]);

 return (...)

明らかな何かが欠けている可能性がありますが、ポインタは同じ問題に遭遇した他の人を助けるかもしれません.

CodeSandbox の完全な例。