React における children は非推奨ではない（非推奨なのは Children）

インターネット上には「children の使用は一般的ではなく、コードが壊れやすい」という記述を見かけることがあります。

しかし、これは誤解です。これは children と Children の混同と見られます。

「非推奨」という言葉は、ふつう deprecated の訳語として、「将来のアップデートで削除される」という意味の、比較的強めの警告を表す言葉として使われます。

今回は、それほどでなく、 not-encouraged ぐらいのニュアンスですが、わかりやすさのために「非推奨」という単語を使用しています。ご了承ください。

▼ 誤っている記事の例

この記事は注意喚起のための小記事です。

結論: ケース違いは大違い

React には次の2つが存在します。

• children（小文字はじまり）
  • コンポーネントに渡される特別な props
  • <Layout>...</Layout> の中身がそのまま children になる
  • 普通に使われる。むしろ、関心を適切に分離するのに利用できる
• Children（大文字はじまり）
  • React.Children.map などを含むユーティリティ群
  • 子要素を配列的に処理するための補助機能
  • コードが壊れやすいので、非推奨

React の公式ドキュメントでは「Children （固有名詞）の使用は一般的ではない」と書かれているのに、うかつに「Children（概念として）の使用は一般的でない」と解釈してしまった、ということでしょう。

▼ children （小文字はじまり）の活用方法についての記事があります

以上です。

具体的に Children の代わりにどんな書き方をするべきか等は、以下に示した React 公式ドキュメントで確認してください。

（誤解されている）元ネタ記事より引用

Children

落とし穴

Children の使用は一般的ではなく、コードが壊れやすくなる可能性があります。一般的な代替手段をご覧ください。

Children は、props である children から受け取った JSX を操作、変換するために用います。

代替手段

補足

このセクションで説明しているのは、以下のようにしてインポートする Children API（大文字の C）の代わりに使える手段です。

import { Children } from 'react';

これを children の使用（小文字の c）と混同しないでください。こちらは良いことであり、推奨されています。

• 複数のコンポーネントを公開する
  • （中略）
• 配列を props として受け入れる
  • （中略）
• レンダープロップを呼び出してレンダーをカスタマイズする
  • （後略）