[React]defaultPropsは使わない！propsにデフォルト値を設定したいときはデフォルト引数を使おう

Reactで関数コンポーネントを作った時、propsにデフォルト値を設定したいことがあると思います。

例えば、下記Tableコンポーネントの場合、利用箇所が4つありますが③以外は全て'hoge'と指定しています。

export default function Table({ hoge }: { hoge: string }) {
  return (
    <div>{hoge}</div>
  );
}

// 利用箇所①
<Table hoge='hoge' />

// 利用箇所②
<Table hoge='hoge' />

// 利用箇所③
<Table hoge='hogehoge' />

// 利用箇所④
<Table hoge='hoge' />

上記のように利用箇所ごとに指定しても良いのですが、よく指定される'hoge'をpropsのデフォルト値に設定したくなります。

そんなときに私はやり方がわからなかったのでGoogleで下記のように調べました。
下記は2021年8月にreact props デフォルトで調べた結果です。

上位7つを見てみました。
propsのデフォルト値について書いていないものも混じっていますが、デフォルト値について書かれている記事は全てdefaultPropsを使うように説明されていました。

実際にdefaultPropsを使って実装しても実現できるのですが、実はES6で追加されたデフォルト引数を使う方が良いとされています！！

理由などは下記のStack Overflowを参照してください。

デフォルト引数を使うと最初の例は下記のように書けます。

export default function Table({ hoge = 'hoge' }: { hoge?: string }) {
  return (
    <div>{hoge}</div>
  );
}

// 利用箇所①
<Table />

// 利用箇所②
<Table />

// 利用箇所③
<Table hoge='hogehoge' />

// 利用箇所④
<Table />

この記事の内容は知っている人からすると何を今更・・・って感じの内容だと思いますが、Google検索上位には今でもdefaultPropsの記事が溢れています。
知らない人がググったときにdefaultPropsにたどり着く確率を少しでも下げられたらいいなーと思い書いてみました。