React hooksでfactoryパターンっぽいことをしたいときは結局コンポーネントを分離するのが妥当なのでは

Reactでhooksを切り替えしたい時について考えたケースがあったので書き残し。 中盤は悪例を挟みます。悪例については利用しないことをおすすめします 結論だけ知りたい方向け -> 結論へ 前提 React hooksで例えばパターンA、パターンBを切り替える、factoryパターンっぽいことをやりたくなることがある。 コンポーネントより外側で切り替えることが可能であればこちらの記事などのようなことが可能だが、コンポーネントの内部で切り替えたいケースだとこのやり方だと処理出来ない 例えばこのようなカウンターを考えてみたい。 // Hooksは共通で下記の値を返す export type CounterHooksResult = { value: number, onClick: () => void } // 単純なカウンター export const usePlainCounter =