1
00:00:02,270 --> 00:00:08,330
In our reducers in action files, so in the store file in general, we won't have to do anything because

2
00:00:08,420 --> 00:00:11,810
all that Redux related stuff can stay as it is,

3
00:00:11,810 --> 00:00:17,170
it's not related to components and therefore we don't need to do anything with React hooks in there.

4
00:00:17,810 --> 00:00:23,720
The shared folder has our utility file and these functions here can also stay the way they are. Now in the

5
00:00:23,780 --> 00:00:26,450
hoc folder, that changes,

6
00:00:26,450 --> 00:00:29,000
here we got four components.

7
00:00:29,000 --> 00:00:31,860
Now the aux component is a functional component,

8
00:00:32,010 --> 00:00:39,410
the async component which we use for lazy loading when we route is actually a functional component

9
00:00:39,410 --> 00:00:42,110
that returns a class-based component.

10
00:00:42,110 --> 00:00:45,680
Now we could try to convert this but actually, it's not worth the effort,

11
00:00:45,680 --> 00:00:51,270
instead we can delete this whole async component folder and instead use a feature I introduced in the

12
00:00:51,470 --> 00:00:56,290
React routing module of this course, we can use React.lazy.

13
00:00:56,420 --> 00:01:04,490
We do that in app.js and we use a native built-in React feature now for lazy loading. Instead of using

14
00:01:04,610 --> 00:01:12,650
async component here in these three places, you can call React.lazy here. The lazy method is provided

15
00:01:12,650 --> 00:01:19,130
by React and essentially it does what we before had to do manually with async component, with our higher

16
00:01:19,130 --> 00:01:20,270
order component,

17
00:01:20,300 --> 00:01:23,760
this was added With React 16.6.

18
00:01:23,960 --> 00:01:29,510
So now with React.lazy here, we have to add one other thing though or we have to import one other thing

19
00:01:29,780 --> 00:01:33,140
and that's the suspense component from React.

20
00:01:33,200 --> 00:01:39,260
This has to wrap any place where we want to use these lazy loaded components and I will also rename

21
00:01:39,260 --> 00:01:47,880
these components to checkout, orders and auth so that I can now use them as JSX elements and hence

22
00:01:47,880 --> 00:01:53,640
they have to start with capital characters and then down there for the routes where I will render them

23
00:01:53,640 --> 00:01:54,330
in the end,

24
00:01:54,480 --> 00:02:03,810
I will wrap this place here with suspense, so put the closing tag after routes here and suspense takes

25
00:02:03,900 --> 00:02:10,380
a fallback property which defines what to render whilst we're waiting for one of these lazy loaded components

26
00:02:10,380 --> 00:02:16,050
to load and there, I'll render a paragraph where I say loading, you could render anything here, you could

27
00:02:16,050 --> 00:02:18,220
render a spinner, whatever you prefer.

28
00:02:19,020 --> 00:02:26,640
So now we can use our lazily loaded components in the routes and for that, we just have to replace component

29
00:02:26,640 --> 00:02:33,870
here with render and then there, we get a function that executes which should simply return our JSX

30
00:02:33,870 --> 00:02:35,050
component,

31
00:02:35,100 --> 00:02:42,300
so auth like this, the burger builder is not lazy loaded so we don't need to change it but down there, all

32
00:02:42,300 --> 00:02:45,590
these marked components there,

33
00:02:45,600 --> 00:02:50,010
we use the render method instead and then simply return

34
00:02:50,010 --> 00:02:55,200
in this case here, the checkout being rendered inside of this function we pass to render,

35
00:02:55,200 --> 00:03:03,900
here we use or we render orders and then down there, we also use the render method and we render the

36
00:03:03,990 --> 00:03:07,080
auth component like this.

37
00:03:07,230 --> 00:03:12,000
And now with that, we're using React.lazy and suspense, of course

38
00:03:12,000 --> 00:03:14,280
now I need to remove that async component

39
00:03:14,280 --> 00:03:15,030
import up there,

40
00:03:15,030 --> 00:03:21,060
otherwise I'm getting this error which I'm getting and with that out of the way, this still works and

41
00:03:21,060 --> 00:03:23,270
you can see I can still navigate around,

42
00:03:23,460 --> 00:03:29,420
we're now using React.lazy though. So we didn't really change a component to a functional component here,

43
00:03:29,490 --> 00:03:33,570
we're nonetheless using a modern React feature which is never a bad idea.