React hooksのuseReducerをuseStateから作る

はじめに

前の記事で、 useReducer から useState を作ってみましが、逆はできるのだろうかと挑戦してみました。

useReducerを作る

結果的には次のようになりました。

import { useCallback, useMemo, useState } from "react";

export const useReducer = (reducer, initialArg, init) => {
  const [state, setState] = useState(
    init ? () => init(initialArg) : initialArg
  );
  const dispatch = useCallback(
    action => {
      setState(prev => reducer(prev, action));
    },
    [reducer]
  );
  return useMemo(() => [state, dispatch], [state, dispatch]);
};

lazy initializationのあたりが期待通りに実装できているか、確信はありません。useStateの方のシグネチャがシンプルなので、何か違いがあるような気もするのですが。

おわりに

useReducerからuseStateを作って、そのuseStateからまたuseReducerを作って、が永遠にできますね。何か見落としがあったらすみません。