useStateの使いすぎで、収集つかなくなりそうになった時のための緊急リファクタリング方法🧹

useStateで全てのstateを定義している人なら、ぶち当たるであろう「コードの肥大化問題」。

useStateで一つずつ定義していくのは、stateが１つか２つならいいんですけど、
増えてくると、同じような記述がたくさんでてきてコードが肥大化します。(例えば、入力フォームなど)

入力フォームの例↓

export default function Home () {
	const [name, setName] = useState("");
	const [age, setAge] = useState(0);
	const [gender, setGender] = useState("");
	const [Profile, setProfile] = useState("");
	
	.....(増えた項目分増やす)
	
	const handleName = (e) => {
		setName(e.target.value);
	};
	const handleAge = (e) => {
		setAge(e.target.value);
	};
	const handleGender = (e) => {
		setGender(e.target.value);
	};
	const handleProfile = (e) => {
		setProfile(e.target.value);
	};
	
	.....(増えた項目分増やす)
}

フォームって実際もっと多くなると思うので、こんな感じで書いていくとコード量がとんでもないことに、、、

解決

これをスッキリさせるためには、

export default function Home () {
	const [states, setStates] = useState({
		name: "",
		gender: "",
		profile: "",
		overTwenty: true,
		.....(新しいのはここに追加していく),
	})
	
	const handleState = (e) => {
		const { name, target } = e.target;
		setStates({...states, [name]: target });
	};
};

一つのstateにオブジェクトで値をまとめておいて、スプレッド構文で変更があったらオブジェクトを上書きしていく感じです。

これで自分の場合、100行ぐらい減らすことができました。

皆様もぜひお試し下さい。