Search code examples
reactjsjsx

Difference between returning a Javascript expression or a React fragment with a child with the same expression

Is there a difference between

const Component = (props)=>{... return (JS_EXPRESSION)}

and

const Component = (props)=>{... return <>{JS_EXPRESSION}</>}

More specifically, I got a lot of cases where JS_EXPRESSION is a ternary operation mainly

JS_EXPRESSION= condition? <Component1/>: <Component2/>

Is there any difference between the two? For examples in terms of mounting and unmounting?

Solution

  • No, there are is no difference between those, to quote the official docs:

    Grouping elements in Fragment has no effect on the resulting DOM;

    and thus also no impact on (un)mounting the component.

    You could however just return the ternary operator itself to reduce the code:

    const Component = (props)=> condition ? <Component1/> : <Component2/>;