[React] コンポーネントをレンダーしない場合の返却値は`null`と`<></>`のどちらであるべきか

状況

コンポーネント内部の条件によって、コンポーネントをレンダーしないで欲しい場合がある。

条件によってnullを返すコンポーネント：

const ReturnNullComponent = (isDisplay) => {
  if (!isDisplay) {
    return null;
  }

  return <>ReturnNullComponent</>;
};

条件によってフラグメントを返すコンポーネント：

const ReturnFragmentComponent = (isDisplay) => {
  if (!isDisplay) {
    return <></>;
  }

  return <>ReturnFragmentComponent</>;
};

結論

Reactの公式ドキュメントにもあるようにnullを返すようにすることを推奨されている。

提示した例のような場合は、nullを返すのがより一般的である。

稀なケースですが、他のコンポーネントによってレンダーされているにも関わらず、コンポーネントが自分のことを隠したい、ということがあるかもしれません。その場合はレンダー出力の代わりに null を返すようにしてください。

ja.legacy.reactjs.org条件付きレンダー – React

null を使って何も返さないようにする
場合によっては、何もレンダーしたくないことがあります。例えば、梱包済みの荷物は一切表示したくない、という場合です。コンポーネントは常に何かを返す必要があります。このような場合、null を返すことができます。

ja.react.dev条件付きレンダー – React

nullの特徴

• コンポーネントは何もレンダリングしない
• DOMには何も追加されない

トランスパイルすると以下のようになる。

const ReturnNullComponent = (isDisplay) => {
  if (!isDisplay) {
    return null;
  }

  return /*#__PURE__*/ React.createElement(React.Fragment, null, 'ReturnNullComponent');
};

フラグメントの特徴

• コンポーネントは空のフラグメントをレンダリングする
• フラグメントは、DOM上は表示されないが仮想DOM（Reactのコンポーネントツリー）には存在する

先述のトランスパイルすると以下のようになる。

const ReturnFragmentComponent = (isDisplay) => {
  if (!isDisplay) {
    return /*#__PURE__*/ React.createElement(React.Fragment, null);
  }

  return /*#__PURE__*/ React.createElement(React.Fragment, null, 'ReturnFragmentComponent');
};

トランスパイルの設定によって多少異なるが、空のつもりでもフラグメントを返していることが分かる。