Does if / else do the same thing as ternary and logical && operator in React conditional rendering

Question

I have a React component which shows another component if show is true :

const ChildComponent = ({ show }: Props) => {
  if (show) {
    return <AnotherChild />;
  }
  return null;
};

Does above if/else do the same as a ternary operator or &&:

Ternary:

return show ? (
 <AnotherChild />;
) : null

Logical && Operator:

return ( { show && } );

Answer 1

If show is always a boolean, then yes, those are all equivalent.

If show is falsey but not null nor undefined , there could be a bit of an issue, because it'd be rendered, for example:

 const App = ({ show }) => { return show && <div>content</div>; }; ReactDOM.createRoot(document.querySelector('.react')).render(<App show={0} />);

 <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div class='react'></div>

Better to explicitly alternate with null with either the conditional operator or if / else than to use && , if the type of the prop isn't constrained. (But it looks like you're using TypeScript, so the type is constrained, so it's all good)