useStateの初期化が面倒

Question

実現したいこと

以下(1)のような任意typeに対して、以下(2)のように初期値を指定する必要があります。
初期値を自動的に指定する事は可能でしょうか？
そもそも、初期値を定義しなくても良い方法はありますでしょうか？

初期値はnumberであれば0, stringであれば''のように、毎回同じ値を指定しているので毎回初期値を指定する事は面倒だと感じています。

• (1) 任意type

type User = {
  id: number;
  name: string;
};

• (2) 初期値を設定する必要がある

const [user, setUser] = useState<User>({
  id: 0,
  name: '',
});

発生している問題

上記Userのように2つの要素だけであれば数が少ないので楽ですが、実際は多くのtypeが存在して、多くのuseStateが存在しています。
初期値はnumberであれば0, stringであれば''のように、毎回同じ値を指定しているので毎回初期値を指定する事は面倒だと感じています。

また、typeを変更した時、typeが複数ファイルで利用されている場合は全て修正する必要があり、とても面倒です。

初期値を自動的に設定する方法、または、初期値を定義しなくてよい方法を探しています。
または、そもそもの話として初期値を指定することを考えるのはアンチパターンになるのでしょうか？
みなさんはundefinedが前提でコードを書いていますでしょうか？

該当のソースコード

https://stackblitz.com/edit/vitejs-vite-vpsnw7?file=src%2FApp.tsx

試したこと

• typeに存在する全てのプロパティ名をstring[]として取得して自動生成を試みましたが不可能でした

https://teratail.com/questions/4l8f3owrh9nvcd

補足情報（FW/ツールのバージョンなど）

• Visual Studio Code 1.81.1
• React.js 18.2.0
• TypeScript 5.2.2

Answer 1

typeに存在する全てのプロパティ名をstring[]として取得して自動生成を試みましたが不可能でした

えっと、前の質問にも解答したとおり、「値から型を作る」手段で対応できるかもしれません。

const numberKeys = ['id'] as const;
const stringKeys = ['name'] as const;

type Composed<N extends string, S extends string> = {
  [k in N]: number;
} & {
  [k in S]: string
}

type User = Composed<(typeof numberKeys)[number], (typeof stringKeys)[number]>;

const initialize = <N extends readonly string[], S extends readonly string[]>(
  numbers: N, strings: S
): Composed<N[number], S[number]> => Object.fromEntries([
  ...numbers.map(key => [key, 0]),
  ...strings.map(key => [key, ''])
]) as Composed<N[number], S[number]>;

const emptyUser = initialize(numberKeys, stringKeys);

Answer 2

Avoid Hasty Abstraction (早まった抽象化は避けよう)という標語があります。共通化するべきでない物事についてのコードを共通化すると、コードが格段に複雑化して扱いにくくなるのでトレードオフを考えて、まずは「共通化せずベタ書きする」ことから始めるほうが良い、という教訓です。

抽象化・共通化によってメンテナンス性の向上につながる重複コードは削減できると良いですが、「意味的には別にまとめるほどじゃない」「愚直に書いたほうがパッと見ただけで意味が明確である」ようなケースではむしろ技巧を凝らせすぎて理解しづらいコードにならないように、愚直に書いたほうが良いです。

今回のように「入力フォームの初期値に 0 や "" を入れる」は明確に後者です。もともと長くないので大したコード削減になりませんし、「本質的に number なら 0, string なら "" しかありえない」訳ではない、つまり 意味は重複していないので、共通化するうまみがありません。

---

強いていうなら、「Derived State の場合は useState を使わない」というベストプラクティスや、「フォームなら react-hook-form」「データ取得等(fetch と mutation)なら useSWR / TanStask Query」のように具体的な切り口でライブラリに頼ってコードを、特にステートの数を減らすと楽になります。

ステートの個数が増えるにつれて爆発的ににコンポーネントの複雑さが増すので。