React Hooks コンポーネントのPropsにデフォルト値をつけたい

// Credit.js
export function Credit({ character, singer }) {
  return (
    <>
      <b>{character}</b>
      <small>song by: {singer}</small>
    </>
  );
}

こんな感じのコンポーネントがあり、props を渡さなければデフォルトで character, singer を表示させたい

1. オブジェクトの引数を分割代入で取る時のデフォルト値の与え方を使う

👇の形を使う

function({ key = initValue } = {}) {...}

cf. JavaScript 分割代入な引数にデフォルト値を設定したい - かもメモ

// Credit.js
export function Credit({
  character = '大空あかり',
  singer = '遠藤瑠香'
} = {}) {
  return (
    <>
      <b>{character}</b>
      <small>song by: {singer}</small>
    </>
  );
}

// App.js
import { Credit } from './Credit';
function App() {
  return (
    <>
      <Credit />
      <Credit character="新条ひなき" singer="未来みき" />
      <Credit character="双葉アリア" />
    </>
  );
}

👇

<b>大空あかり</b><small>song by: 遠藤瑠香</small>
<b>新条ひなき</b><small>song by: 未来みき</small>
<b>双葉アリア</b><small>song by: 遠藤瑠香</small>

2. defaultProps プロパティを使う

公式ドキュメントには Class Components での使い方が ClassName.defaultProps = {...} と載っているだけだけど React Hooks ( Functional Components ) でも FunctionName.defaultProps = {...} で使えるっぽい

// Credit.js
export function Credit({ character, singer }) {
  return (
    <>
      <b>{character}</b>
      <small>song by: {singer}</small>
    </>
  );
}

// 先 export していても問題ないっぽい
Credit.defaultProps = {
  character: '大空あかり',
  singer: '遠藤瑠香',
};

// App.js
import { Credit } from './Credit';
function App() {
  return (
    <>
      <Credit />
      <Credit character="黒沢凛" singer="松岡ななせ" />
      <Credit character="双葉アリア" />
    </>
  );
}

👇

<b>大空あかり</b><small>song by: 遠藤瑠香</small>
<b>黒沢凛</b><small>song by: 松岡ななせ</small>
<b>双葉アリア</b><small>song by: 遠藤瑠香</small>

　
👍👍👍

sample

See the Pen React Hooks: default props example. by KIKIKI (@chaika-design) on CodePen.

所感

defaultProps を使うほうが関数定義の部分の見通しは良さそう。
ただ公式ドキュメントには Class Components のやり方しか載ってないみたいだったので、Functional Components でも動作はするけど使っても本当に大丈夫なのか少し謎 ( JavaScript の class 自体は中身は prototype 継承を利用した function だと思うので大丈夫だとは思うけど )

[参考]