Is it a bad practice to conditionally render a component with "&&" in React?

Acri 0
Viewed 66

In other words, is this:

const [condition, setCondition] = useState(true);

return (
   condition && <Component /> 
)

As good as this:

const [condition, setCondition] = useState(true);

return (
   condition ? <Component /> : null
)

In terms of bugs, rendering, etc.? Because I'm sure that using && to condition something like that in vanilla JavaScript is not recommended.

Thanks!

reactjs javascript
2 Answers

Simply it depends, if the <Component /> is a very large component with a lot of content and you toggle a lot, it would be better to display: none than completely destroy it.

For example

<Component style={{ display: condition && 'unset' : 'none' }} />

Keep in mind, that the style here will be a prop that needs to pass to the root element of the component.

but if it's a small component, destroying and re-initializing it will not be a bad practice.

userYBSN0

No, it's not a bad practice;

these two snippets will behave exactly the same: no difference at all.

condition && <Component /> 

condition ? <Component /> : null

why? in both case the output is a valid react child:

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;
Mhmdrz_A0
Related