Can unnecessary React.Fragment be poor in performance?

Question

Recently, I found that our company's code performance is poor. As I reviewed code, there's so many codes like this:

condition ? <SomeComponent /> : <></>

They use Fragment as replacement of null. Can this code occur performance problem?

Answer 1

It's unlikely that the fragments are causing (if any) noticeable performance issues. As this answer highlights, fragments don't actually create an extra DOM node.

With that said, the react docs do suggest using null when you don't want a component to render at all, but again I don't think using them would be the root cause of any slowness in your app.

I'd look at potential unnecessary re-renders, especially in nested child components being re-rendered by parent components with state changes happening.

I'd also definitely a look at the React Profiler and use it to get a sense of what's causing any performance issues.