ReactでTypeScriptを導入すると、やたらと使う分割導入

🔎 分割代入をよく使う主な理由（＝目的）

tsx

const MyComponent = ({ title, description }: PropsType) => {
  return <h1>{title}</h1>;
};

⬆こうすると、props.title や props.description みたいに
毎回書かなくてよくなるので、
行数も減るし、視線の動きもスムーズになります。
コードの主役がハッキリして、
「何を受け取ってるのか」がひと目でわかる
のも大きいです。

TypeScriptだと、分割した変数に自動的に型がつきます：

tsx

const MyComponent = ({ title }: { title: string }) => {
  // title は string 型として推論される！
};

これにより、IDEの補完・警告が正確になるので、
型安全にコーディングできます。
VSCodeとかで開発してるとすごく助かるやつですね。

tsx

// props.title より title の方がシンプル
<h1>{props.title}</h1> → <h1>{title}</h1>

これによって、
変数の頭にprops.がつきまくる問題が解消されます。
特に大きめのコンポーネントになると差が出てきます。

実は「常に分割代入すればいい」というわけでもなくて、
場合によって使い分けるのがベストです。