1
00:00:01,110 --> 00:00:05,100
‫So, with the topic of useState now behind us,

2
00:00:05,100 --> 00:00:08,730
‫let's turn our focus on something called refs.

3
00:00:08,730 --> 00:00:13,230
‫And so, in this lecture, let's manually select a dom element

4
00:00:13,230 --> 00:00:17,493
‫so that you see why we actually need refs in React.

5
00:00:19,080 --> 00:00:20,700
‫So, as an experiment,

6
00:00:20,700 --> 00:00:24,660
‫let's try to automatically give this input element, here,

7
00:00:24,660 --> 00:00:29,130
‫focus each time that the Search component mounts.

8
00:00:29,130 --> 00:00:31,920
‫So, basically, each time the application mounts,

9
00:00:31,920 --> 00:00:35,613
‫we will automatically focus on this input field.

10
00:00:36,720 --> 00:00:37,650
‫Okay.

11
00:00:37,650 --> 00:00:39,060
‫And, in order to do that,

12
00:00:39,060 --> 00:00:42,450
‫we actually need to select this element.

13
00:00:42,450 --> 00:00:44,430
‫And so let's try to do that

14
00:00:44,430 --> 00:00:46,443
‫with the tools that we already have.

15
00:00:47,520 --> 00:00:50,970
‫So we come here into our Search component,

16
00:00:50,970 --> 00:00:54,300
‫which is where that input field is located.

17
00:00:54,300 --> 00:00:58,050
‫And so, then, we can basically use a useEffect

18
00:00:58,050 --> 00:01:01,623
‫and then manually select this dom element right here.

19
00:01:03,030 --> 00:01:04,623
‫So let's try that out.

20
00:01:09,120 --> 00:01:12,120
‫And then let's execute this effect

21
00:01:12,120 --> 00:01:14,583
‫as soon as this component mounts.

22
00:01:15,810 --> 00:01:18,810
‫So let's create some element

23
00:01:18,810 --> 00:01:22,893
‫by simply doing document.querySelector,

24
00:01:23,850 --> 00:01:26,160
‫and then we can just use the className

25
00:01:26,160 --> 00:01:28,323
‫that is already here on the element,

26
00:01:29,310 --> 00:01:30,873
‫so .search.

27
00:01:32,250 --> 00:01:34,800
‫Okay, just to see if this works,

28
00:01:34,800 --> 00:01:37,053
‫let's log this to the console.

29
00:01:39,360 --> 00:01:43,743
‫And you see that, indeed, there is our input field.

30
00:01:44,790 --> 00:01:49,110
‫And so now what we can do is to just say el,

31
00:01:49,110 --> 00:01:50,670
‫so just this element,

32
00:01:50,670 --> 00:01:53,790
‫and then call the focus method on that.

33
00:01:53,790 --> 00:01:56,280
‫And so this is just some straightforward,

34
00:01:56,280 --> 00:01:58,053
‫typical dom manipulation.

35
00:01:59,580 --> 00:02:00,450
‫Okay.

36
00:02:00,450 --> 00:02:03,840
‫And so now, if we load the application,

37
00:02:03,840 --> 00:02:06,630
‫and so you see, as the application first loaded,

38
00:02:06,630 --> 00:02:10,350
‫this input field automatically got focused,

39
00:02:10,350 --> 00:02:14,700
‫so our code here is basically doing its job.

40
00:02:14,700 --> 00:02:17,250
‫However, as we learned at the very beginning,

41
00:02:17,250 --> 00:02:20,520
‫React is all about being declarative.

42
00:02:20,520 --> 00:02:23,880
‫And so manually selecting a dom element like this

43
00:02:23,880 --> 00:02:27,720
‫is not really the React way of doing things.

44
00:02:27,720 --> 00:02:32,190
‫So it's not in line with the rest of our React code.

45
00:02:32,190 --> 00:02:34,530
‫So, in React, we really don't want

46
00:02:34,530 --> 00:02:37,830
‫to manually add event listeners, like this,

47
00:02:37,830 --> 00:02:41,520
‫and also having to add classes or IDs

48
00:02:41,520 --> 00:02:45,240
‫just for the purpose of selecting is not really nice.

49
00:02:45,240 --> 00:02:49,320
‫And, again, not really the React way of doing things.

50
00:02:49,320 --> 00:02:51,900
‫So here we already had the className, of course,

51
00:02:51,900 --> 00:02:52,860
‫but if we didn't,

52
00:02:52,860 --> 00:02:57,390
‫then we would have to now add that className or ID here

53
00:02:57,390 --> 00:03:01,020
‫to then use it in the effect to select the element.

54
00:03:01,020 --> 00:03:05,583
‫Also, if for some reason we would need some dependency here,

55
00:03:06,480 --> 00:03:07,313
‫for example,

56
00:03:07,313 --> 00:03:10,680
‫if this code should rerun each time the query changes,

57
00:03:10,680 --> 00:03:11,580
‫then that would mean

58
00:03:11,580 --> 00:03:15,300
‫that we would select the element here over and over again,

59
00:03:15,300 --> 00:03:17,313
‫which is also not ideal.

60
00:03:18,450 --> 00:03:22,020
‫Okay, and so, to solve all these problems

61
00:03:22,020 --> 00:03:23,820
‫and to make the action

62
00:03:23,820 --> 00:03:26,820
‫of selecting an elements more declarative,

63
00:03:26,820 --> 00:03:29,340
‫such as everything else in React,

64
00:03:29,340 --> 00:03:31,980
‫we need the concept of refs.

65
00:03:31,980 --> 00:03:34,140
‫And so that's what we're going to learn about

66
00:03:34,140 --> 00:03:35,403
‫in the next video.