React hooksのuseStateをuseReducerから作る

はじめに

React hooksのドキュメントでは、 useState は basic hooks として、 useReducer は additional hooks として分類されています。ところが、実際の実装としては useReducer が基本実装で useState がラッパー実装となっているようで、プルリクなどでは useReducer のみが修正されていることがあるようでした。

useStateのラッパーを書いてみる

Reactのソースコードを読んだわけではありませんが、useStateをuseReducerのラッパーとして書いてみたらどうなるか試してみます。

import { useReducer } from "react";

const isFunction = f => typeof f === "function";

const reducer = (state, action) =>
  isFunction(action) ? action(state) : action;

export const useState = initialState => {
  const args = isFunction(initialState)
    ? [undefined, initialState]
    : [initialState];
  return useReducer(reducer, ...args);
};

思ったより、簡単にできました。

おわりに

繰り返しになりますが、Reactの実装を再現したものではありません。あくまで勉強用です。本物実装はさらにエラー処理や開発時チェックなどが追加されているかもしれません。