1
00:00:00,210 --> 00:00:01,200
Welcome back.

2
00:00:01,230 --> 00:00:05,360
In the previous video, we are able to fix the key prop error.

3
00:00:05,370 --> 00:00:10,140
So in this video, let's talk about what is called fragment tag.

4
00:00:10,320 --> 00:00:11,670
So what is a fragment?

5
00:00:11,670 --> 00:00:14,880
Well, let's use this component to demonstrate that.

6
00:00:14,880 --> 00:00:21,090
So let's go to the app rather and the app instead of just returning this one, let's add our own.

7
00:00:21,090 --> 00:00:23,100
It's a HTML element here.

8
00:00:23,100 --> 00:00:27,330
So each one and let's say we're com.

9
00:00:28,700 --> 00:00:32,509
We're calm and then we have some P tag here.

10
00:00:33,200 --> 00:00:38,870
And let's see, this is what we call fragment.

11
00:00:40,310 --> 00:00:42,140
So let's see onto the page.

12
00:00:42,170 --> 00:00:42,530
Okay.

13
00:00:42,800 --> 00:00:44,030
So what is the fragment?

14
00:00:44,030 --> 00:00:45,770
Tag and react.

15
00:00:45,770 --> 00:00:51,290
Fragment is a way to group a list of children without adding extra nodes to the dome.

16
00:00:51,440 --> 00:00:55,950
So let's say that a component is returning multiple elements at once.

17
00:00:55,970 --> 00:01:02,810
Normally, if you return more than one element from a component, it might be wrapped inside a parent

18
00:01:02,810 --> 00:01:06,860
container or parent element, and that's what we are doing here.

19
00:01:07,370 --> 00:01:14,360
So even though we don't need this particular element here, if you do that, so that is creating more

20
00:01:14,360 --> 00:01:17,420
nodes into the DOM so we can remove this.

21
00:01:17,420 --> 00:01:23,750
Dave Sorry, remove, we can remove it and write it as that.

22
00:01:23,750 --> 00:01:30,650
So this is equally same as this, but instead we are not adding any nodes, any element or any nodes

23
00:01:30,650 --> 00:01:34,550
to the DOM and this is called the same as before and that is it.

24
00:01:34,550 --> 00:01:40,490
So the performance here is that it does not add extra nodes to the domain of which you don't want it.

25
00:01:40,760 --> 00:01:46,130
So if you don't want to use a Dave to add some starting, we normally use what is called the fragment.