React で簡単なものを作るとき input の状態を管理するために onChange に直接リスナを書いて setState を呼び出すけど 毎回引数の変換を書くのが面倒

const [state, setState] = useState("")

<input value={state} onChange={(event) => setState(event.target.value)}/>

こうかきたい

<input value={state} onChange={setState}/>

value を取得する方法を最初に指定できて欲しい
デフォルト値は event から value を取り出すものだと良い
自作するとその関数を毎回書かないといけない手間はあるけど state が複数ある場合はそういう hook を作っておけば楽なので作ってみる

const useState2 = (init, selector) => {
	const [state, setState] = useState(init)
	const toStateValue = selector ?? event => event.target.value
	return [state, (...a) => setState(toStateValue(...a))]
}

const [state, setState] = useState2("")

<input value={state} onChange={setState} />

これで単純に入力値を state に同期してくれるだけの input を複数配置するのが楽になった
けどなんか見覚えがある

useReducer と同じだった

const [state, setState] = useReducer((state, action) => {
	return action.target.value
}, "")

<input value={state} onChange={setState}/>

action がよく使われる type を持つオブジェクトにならず value そのものだけだけど 単純に state を置き換えるだけだからこれで十分
忘れた頃に使い道が出てくる useReducer