`&&`を条件文の外で使うな

以下のようなコードをよく見かけます。

const [flag, setFlag] = useState<boolean>(false)

...

return (
    <>
        {flag && <Component />}
    </>
)

&&を使った<Component />の表示切替、スマートでカッコいいですよね。
今回はこれまあまり推奨されないという話を書きます。

理由

今回はflagがboolean型のため問題ありませんが、boolean以外である場合、それがそのまま画面に描画されてしまう場合があります。
例えば、以下の場合、描画されるのは0です。

return (
    <>
        {0 && <Component />}
    </>
)

まとめ

タイトルには使うなと強めに書きましたが、特に理由がない場合は三項演算子を使いましょう。
どうしても&&でやらないといけない場合は、仕様をちゃんと理解したうえで利用しましょう。

const [flag, setFlag] = useState<boolean>(false)

...

return (
    <>
-        {flag && <Component />}
+        {flag ? <Component /> : null}
    </>
)

補足

flagが数値の場合でも無理やりやろうとすると、以下のように!!をつけるとできます。

const [flag, setFlag] = useState<number>(0)

...

return (
    <>
        {!!flag && <Component />}
    </>
)

それか、こう

{flag !== 0 && <Component />}