2020 April 21

React Fragment

Have you ever inspected a React site and wondered why there are a ridiculous amount of nested divs? It would be a nightmare to later target these elements.

This is because for every JSX component, only one element can be returned. So over time, if we're not careful we will eventually pollute the DOM tree. This is where React Fragment comes in and it's very simple.

Not only does it prevent unnecessary elements from rendering, but it allows you to control parent-child relationships.

I will say this can potentially break any styles that were dependant on the previous DOM tree, so be careful!

Other Methods

You might also see this used in different ways, to keep in mind.

Copyright © 2021. Jake Wantulok