コンポーネントを再利用したいけど一部不要な場合に使うテク

再利用したいけどシェアボタンはいらないんだよな〜って時。

const Article: VFC = () => {
  // ....

  return (
    <ArticleWrapper>
      <Title />
      <Thumbnail />
      <Description />
      <ShareButtons />
    </ArticleWrapper>
  )
}

propsを渡しても渡さんでもいいようにして、渡さない場合はこれまで通り動くようにする。既存の挙動を壊さず拡張できて嬉しい。

type Props = {
  hideShareButtons?: boolean
}

const Article: VFC<Props> = ({ hideShareButtons }) => {
  // ....

  return (
    <ArticleWrapper>
      <Title />
      <Thumbnail />
      <Description />
      {hideShareButtons ? null : <ShareButtons />}
    </ArticleWrapper>
  )
}

<Article hideShareButtons />

便利だからと使いすぎて十徳ナイフみたいにしてしまうのはおかしくて、それはたぶん別の文脈のコンポーネントのはず。