From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

IQ: React fragment & empty fragment

IQ: React fragment & empty fragment

From the course: Master React 19, Build Ecommerce Solutions, and Prepare for Interviews with TypeScript, Next.js, and Remix

Start my 1-month free trial Buy for my team

IQ: React fragment & empty fragment

“

So, the first question is, what is a react fragment and why is it recommended to use over the div? React provides a feature called react-fragments which returns multiple elements from a react component by grouping a list of children without adding extra nodes or elements to the DOM. In programming, when we use return, it can only return one value at a time. If we have to return more than one value, we put a container. For example, to return multiple variable values, we may use array or object literal. When we want to return JSX with multiple elements, we can put all elements in a container and And eventually, we return only one i.e. single container. We have to enclose them with the parent tag, for that we can use a div as a container but it will create unnecessary nodes in the dom which is not a good practice. So we are using the react fragments over a div as a container for grouping multiple elements. The next question is, how many ways can we use the react fragment? We can wrap the…

Contents