React v18でReact.FCからchildrenの定義がなくなった

けのーびけのーび

React.jsのv18がリリースされ、追従して型定義も更新されました。

これまではコンポーネントの型定義にReact.FC（またはReact.VFC）を利用してきたと思いますが、型定義のアップグレードでReact.FCからchildrenプロパティの定義が無くなってしまいました。

アップグレード時は、React.FCで定義してchildrenを利用していたコンポーネントに影響が出るため、修正が必要になります。

次のようにわざわざchildrenの定義をしないといけません。（めんどう）

type Props = {
  isShow?: boolean
  // 定義を書く必要あり
  children?: React.ReactNode
}

const Sample: React.FC<Props> = ({ isShow = false, children }) => {
  if (!isShow) return null
  return <div>{children}</div>
}

上記の例のように書き直していっても良いのですが、自前で子を持ち得るコンポーネント、子を持たないコンポーネントの定義をしておくと、将来的に新しくなった時に陳腐化を防ぐ、または修正範囲を小さくすることができると思います。

例えば、次のような内容の型定義ファイルをプロジェクトに追加しておくのが良いかと思います。

/**
 * RC (React Component) としているが、任意のものでOKです
 */
declare namespace RC {
  /**
   * 子要素を持つ(childrenプロパティあり)コンポーネントの型
   *
   * ※ React.PropsWithChildren<T>が提供されているので利用する
   */
  type WithChildren<Props = object> = React.FC<React.PropsWithChildren<Props>>

  /**
   * 子要素を持たない(childrenプロパティなし)コンポーネントの型
   */
  type WithoutChildren<Props = object> = React.FC<Props>
}

利用例も載せておきます。

type Props = {
  isShow?: boolean
}

const Sample1: RC.WithChildren<Props> = ({ isShow = false, children }) => {
  if (!isShow) return null
  return <div>{children}</div>
}

const Sample2: RC.WithoutChildren<Props> = ({ isShow = false }) => {
  if (!isShow) return null
  return <div>こちらは子要素(children)を持たない</div>
}