22行だけでReactのHooksを実装する！

const MyReact = (function() {
  let hooks = [] // Hooksの配列
  let currentHook = 0 // イテレータ
  return {
    useEffect(callback, depArray) {
      // depArrayは、エフェクトを実行すべきかどうか判断するために与えられる値の配列
      const hasNoDeps = !depArray // depArrayがundefinedの場合True, それ以外False
      const deps = hooks[currentHook] // Array | undefined
      // depsがundefinedじゃない場合、前回レンダーと比べて配列の中の値が変わったかをチェック
      const hasChangedDeps = deps ? !depArray.every((el, i) => el === deps[i]) : true
      if (hasNoDeps || hasChangedDeps) {
        // depsの配列がない場合とdepsが変わった場合は、毎回レンダー時にエフェクトを実行
        callback()
        hooks[currentHook] = depArray // 最新のdepArrayを覚える
      }
      currentHook++ // 次のHookに進む
    },
    useState(initialValue) {
      hooks[currentHook] = hooks[currentHook] || initialValue
      const setStateHookIndex = currentHook
      // currentHookをそのまま使うと、クロージャのせいでsetStateが実行されたとき、
      // インデックスがコンポーネントのレンダー順番と一致することを保証できないので、 
      // 変わらない値にインデックスを保存する
      const setState = newState => (hooks[setStateHookIndex] = newState)
      return [hooks[currentHook++], setState] // 値と関数を戻し、次のHookに進む
    }
  }
})()