😺

Reactの条件付きレンダリング使用時の注意

2023/12/04に公開

Next.js

React

tech

概要

Reactの条件付きレンダリングの注意すべきパターンについてメモです。

真のパターン

左の値がtrueの場合は何かしらのコンポーネントを返すという想定です。
条件付きレンダリングの上にはtrueになる理由を記載しています

// 真偽値でtrueのため
{true && <Component />} 

// 0以外のため
{20 && <Component />}

// 空文字ではないため
{"string" && <Component />}

// 空のオブジェクトはtrue
{{} && <Component />}

// 空の配列もtrue
{[] && <Component />}

// 関数は空でもtrue
{(() => {}) && <Component />}

上記のパターンでは全て<Component />が返ります。

偽のパターン

// 何もレンダリングされない
{null && <Component />}

// 何もレンダリングされない
{undefined && <Component />}

// 何もレンダリングされない
{false && <Component />}

ここまでは大体予想通りですね

// NaNをレンダリングする
{NaN && <Component />}

// 0をレンダリングする
{0 && <Component />}

//0をレンダリングする
{-0 && <Component />}

//　何もレンダリングされない
{"" && <Component />}

上記の場合はどうでしょうか？

NaNの場合
NaNでは何もレンダリングされないわけではなく、NaNがreturnされます。なのでサーバーから何かしらの値を受け取った後にNumber()関数を使用して数値に変換できない場合はNaNが画面上に表示されてしまいます。

0、-0の場合
0がfalsyな値なのは知っている人も多いかと思いますが、条件付きレンダリングで使用した場合の振る舞いは0がreturnされてしまいます。扱いには注意が必要な値で!!0などを使用して真偽値に変換する必要がありそうです。

""の場合
この式は実際には空の文字列を返していますが、React（またはJSX）では空の文字列は何もレンダリングされないため、画面上には何も表示されません。

論理 && 演算子の注意点

falsy な値を返した場合、&& の後の要素の評価はスキップされますが、falsy な値そのものは返されるということに注意してください。以下の例では <div>0</div> がレンダーメソッドから返されます。

render() {
  const count = 0;
  return (
    <div>
      {count && <h1>Messages: {count}</h1>}
    </div>
  );
}

上記は公式からの引用です。確かにfalsyの場合はfalsyな値自体が返されています。
論理 && 演算子では<INS>左の値がtrueの場合に右の値が返されるだけではなく、左の値がfalseの場合は左の値が返されるということですね。</INS>

まとめ

NaNや0の扱いが思わぬバグに繋がる可能性がありそうなので注意して使用していこうと思います。

概要

真のパターン

偽のパターン

論理 && 演算子の注意点

まとめ

Discussion