Rendering a component with Logical `&&` vs Ternary operator

Question

When making a conditional rendering , the most common ways are using ternary operator or logical && operator while exploiting its short circuit evaluation.

My question is about performance (I'm not asking about the fall-outs which may occur due to && operator), which one is preferred?

const isTrue = /* true or false */
const ConditionalRendering = () => (
  <>
    {isTrue && <Component />}
    {isTrue ? <Component /> : null}
  </>
);

Playground:

const Component = () => <FlexBox>{DEFAULT_INITIAL}</FlexBox>;

const ConditionalRendering = () => {
  const [isTrue, setIsTrue] = useState(true);
  const onClick = () => setIsTrue(prev => !prev);
  return (
    <FlexBox>
      {isTrue && <Component />}
      {isTrue ? <Component /> : null}
      <button onClick={onClick}>Toggle isTrue</button>
    </FlexBox>
  );
};

Answer 1

When making a conditional rendering , the most common ways are using ternary operator or logical && operator while exploiting its short circuit evaluation.

My question is about performance (I'm not asking about the fall-outs which may occur due to && operator), which one is preferred?

const isTrue = /* true or false */
const ConditionalRendering = () => (
  <>
    {isTrue && <Component />}
    {isTrue ? <Component /> : null}
  </>
);

Playground:

const Component = () => <FlexBox>{DEFAULT_INITIAL}</FlexBox>;

const ConditionalRendering = () => {
  const [isTrue, setIsTrue] = useState(true);
  const onClick = () => setIsTrue(prev => !prev);
  return (
    <FlexBox>
      {isTrue && <Component />}
      {isTrue ? <Component /> : null}
      <button onClick={onClick}>Toggle isTrue</button>
    </FlexBox>
  );
};