1
00:00:00,990 --> 00:00:01,823
Instructor: In the last section,

2
00:00:01,823 --> 00:00:03,090
we finished up talking about testing

3
00:00:03,090 --> 00:00:05,670
inside of a React and Redux application.

4
00:00:05,670 --> 00:00:06,540
We're now gonna move forward

5
00:00:06,540 --> 00:00:08,460
and start tackling our next big topic

6
00:00:08,460 --> 00:00:10,920
which is higher order components.

7
00:00:10,920 --> 00:00:11,753
We'll first begin

8
00:00:11,753 --> 00:00:14,940
with a very plain English definition of what they are.

9
00:00:14,940 --> 00:00:17,580
All right, so higher order component

10
00:00:17,580 --> 00:00:21,480
is a normal react component that is specifically made

11
00:00:21,480 --> 00:00:24,600
to help us reuse code inside of our application.

12
00:00:24,600 --> 00:00:27,690
So if you have ever put together some component in an app

13
00:00:27,690 --> 00:00:30,720
and then found yourself kind of copy pasting code around

14
00:00:30,720 --> 00:00:32,580
from that component to another

15
00:00:32,580 --> 00:00:33,690
and you have some amount

16
00:00:33,690 --> 00:00:36,330
of code duplication between components,

17
00:00:36,330 --> 00:00:39,750
that is a perfect use case for higher order components.

18
00:00:39,750 --> 00:00:42,600
They are tools to allow us to de-duplicate code

19
00:00:42,600 --> 00:00:45,483
or to reuse code inside of a application.

20
00:00:46,740 --> 00:00:48,750
When we create higher order components

21
00:00:48,750 --> 00:00:51,750
we then combine them together with normal components.

22
00:00:51,750 --> 00:00:53,610
So an example of a normal component

23
00:00:53,610 --> 00:00:56,760
would be like the app component or the comment box

24
00:00:56,760 --> 00:00:59,730
or the comment list that we were just working on.

25
00:00:59,730 --> 00:01:01,590
We take that normal component,

26
00:01:01,590 --> 00:01:04,769
we combine it together with a higher order component,

27
00:01:04,769 --> 00:01:09,630
and that leaves us with an enhanced or composed component.

28
00:01:09,630 --> 00:01:12,690
This enhanced component has some additional amount

29
00:01:12,690 --> 00:01:14,970
of functionality or data tied to it

30
00:01:14,970 --> 00:01:18,450
thanks to some code that's essentially been donated to us

31
00:01:18,450 --> 00:01:20,193
by the higher order component.

32
00:01:21,090 --> 00:01:23,070
Okay, so just a quick definition right now.

33
00:01:23,070 --> 00:01:23,903
That's all we're gonna talk

34
00:01:23,903 --> 00:01:25,710
about for higher order components.

35
00:01:25,710 --> 00:01:27,570
We're gonna continue now in the next section

36
00:01:27,570 --> 00:01:30,270
and I'm gonna give you a very practical example

37
00:01:30,270 --> 00:01:31,770
of a higher order component

38
00:01:31,770 --> 00:01:33,960
that you have already been making use of

39
00:01:33,960 --> 00:01:37,110
inside of every single redux application

40
00:01:37,110 --> 00:01:39,810
possibly without you even knowing about it.

41
00:01:39,810 --> 00:01:40,860
So let's take a quick break

42
00:01:40,860 --> 00:01:42,510
and continue in the next section.