LoginSignup
54
23

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-08-24

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 デフォルトで調べた結果です。

スクリーンショット 2021-08-25 1.08.31.png

上位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にたどり着く確率を少しでも下げられたらいいなーと思い書いてみました。

54
23
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
54
23