1
00:00:01,230 --> 00:00:04,890
‫It's time to introduce yet another React hook.

2
00:00:04,890 --> 00:00:08,280
‫And this time is the useRef hook.

3
00:00:08,280 --> 00:00:10,200
‫And, fortunately for us,

4
00:00:10,200 --> 00:00:13,350
‫this is one of the easiest hooks of all.

5
00:00:13,350 --> 00:00:15,423
‫And so let's now take a look.

6
00:00:17,430 --> 00:00:22,387
‫So we use the useRef hook to create something called a ref,

7
00:00:23,340 --> 00:00:26,520
‫but what actually is a ref?

8
00:00:26,520 --> 00:00:29,460
‫Well, ref stands for reference,

9
00:00:29,460 --> 00:00:30,660
‫and essentially,

10
00:00:30,660 --> 00:00:34,290
‫it's like a box into which we can put any data

11
00:00:34,290 --> 00:00:37,710
‫that we want to be preserved between renders.

12
00:00:37,710 --> 00:00:41,430
‫Now, in technical terms, when we use useRef,

13
00:00:41,430 --> 00:00:43,470
‫React will give us an object

14
00:00:43,470 --> 00:00:46,380
‫with a mutable current property,

15
00:00:46,380 --> 00:00:50,940
‫and we can then write any data into this current property

16
00:00:50,940 --> 00:00:53,553
‫and, of course, also read from it.

17
00:00:54,492 --> 00:00:58,770
‫In this small example, the current property was first set

18
00:00:58,770 --> 00:01:01,470
‫to the initial value of 23,

19
00:01:01,470 --> 00:01:04,620
‫and we then changed it to 1000.

20
00:01:04,620 --> 00:01:06,390
‫So, as you can see,

21
00:01:06,390 --> 00:01:09,900
‫this current property is actually mutable,

22
00:01:09,900 --> 00:01:13,860
‫so unlike everything else in React.

23
00:01:13,860 --> 00:01:16,470
‫But what's really special about the refs

24
00:01:16,470 --> 00:01:19,680
‫is that they are persisted across renders,

25
00:01:19,680 --> 00:01:21,720
‫so their current property value

26
00:01:21,720 --> 00:01:24,870
‫stays the same between multiple renders,

27
00:01:24,870 --> 00:01:27,030
‫so just like state.

28
00:01:27,030 --> 00:01:31,560
‫And this gives us two big use cases for refs.

29
00:01:31,560 --> 00:01:36,030
‫First, as we just said, we can use refs to create variables

30
00:01:36,030 --> 00:01:39,000
‫that will stay the same between renders.

31
00:01:39,000 --> 00:01:40,950
‫And useful examples of this

32
00:01:40,950 --> 00:01:43,530
‫are preserving the previous state

33
00:01:43,530 --> 00:01:47,700
‫or storing the ID of a setTimeout function.

34
00:01:47,700 --> 00:01:52,050
‫Now the second use case is actually far more important,

35
00:01:52,050 --> 00:01:56,400
‫which is to select and store DOM elements.

36
00:01:56,400 --> 00:02:00,060
‫So this is what we attempted to do in the last lecture

37
00:02:00,060 --> 00:02:03,990
‫and which actually brought us to this lecture.

38
00:02:03,990 --> 00:02:07,440
‫So, just like the ID of a setTimeout,

39
00:02:07,440 --> 00:02:10,380
‫a DOM element is also a piece of data

40
00:02:10,380 --> 00:02:14,370
‫that we want to store and preserve across renders.

41
00:02:14,370 --> 00:02:16,863
‫And so refs are perfect for this.

42
00:02:17,760 --> 00:02:20,580
‫Now refs are usually for data

43
00:02:20,580 --> 00:02:25,110
‫that is not rendered individual output of the component.

44
00:02:25,110 --> 00:02:30,090
‫So usually refs only appear in event handlers or effects,

45
00:02:30,090 --> 00:02:32,850
‫but not in the JSX.

46
00:02:32,850 --> 00:02:37,140
‫Now, of course, we can use refs inside JSX 2,

47
00:02:37,140 --> 00:02:40,110
‫but usually that's not the place for them.

48
00:02:40,110 --> 00:02:42,360
‫If you need data that participates

49
00:02:42,360 --> 00:02:45,060
‫in the visual output of the component,

50
00:02:45,060 --> 00:02:46,710
‫that's usually a good sign

51
00:02:46,710 --> 00:02:50,910
‫that you actually need state and not a ref.

52
00:02:50,910 --> 00:02:54,330
‫And, speaking of state, just like with state,

53
00:02:54,330 --> 00:02:56,580
‫you are not allowed to write

54
00:02:56,580 --> 00:03:00,360
‫or to read the current property in render logic

55
00:03:00,360 --> 00:03:04,230
‫as that would create an undesirable side effect.

56
00:03:04,230 --> 00:03:07,260
‫Instead, we usually perform these mutations

57
00:03:07,260 --> 00:03:09,780
‫inside a useEffect hook.

58
00:03:09,780 --> 00:03:13,050
‫Okay, now, I've hinted a couple of times

59
00:03:13,050 --> 00:03:16,650
‫at all the similarities between refs and state,

60
00:03:16,650 --> 00:03:21,300
‫which is because these two are in fact quite similar.

61
00:03:21,300 --> 00:03:24,270
‫So let's now analyze what they have in common

62
00:03:24,270 --> 00:03:26,463
‫and what's different between them.

63
00:03:28,170 --> 00:03:32,340
‫So, in a way, we can say that refs are like state

64
00:03:32,340 --> 00:03:34,530
‫but with less powers.

65
00:03:34,530 --> 00:03:36,420
‫So what they have in common

66
00:03:36,420 --> 00:03:39,720
‫is that they are both persisted across renders.

67
00:03:39,720 --> 00:03:42,690
‫So the component remembers these values

68
00:03:42,690 --> 00:03:44,850
‫even after re-rendering.

69
00:03:44,850 --> 00:03:47,580
‫The big difference is that updating state

70
00:03:47,580 --> 00:03:50,490
‫will actually cause the component to re-render,

71
00:03:50,490 --> 00:03:53,460
‫while updating refs does not.

72
00:03:53,460 --> 00:03:56,010
‫So the big takeaway from this

73
00:03:56,010 --> 00:03:59,040
‫is that we use state when we want to store data

74
00:03:59,040 --> 00:04:01,230
‫that should re-render the component

75
00:04:01,230 --> 00:04:02,940
‫and refs for data that should

76
00:04:02,940 --> 00:04:06,090
‫only be remembered by the component over time,

77
00:04:06,090 --> 00:04:08,550
‫but never re-render it.

78
00:04:08,550 --> 00:04:10,260
‫And this is basically, also,

79
00:04:10,260 --> 00:04:12,990
‫what we already learned back in the lecture

80
00:04:12,990 --> 00:04:16,590
‫on the "Fundamentals of state management."

81
00:04:16,590 --> 00:04:21,330
‫So, remember, that this diagram is taken from that lecture.

82
00:04:21,330 --> 00:04:24,720
‫Now, back then, we didn't know what a ref was,

83
00:04:24,720 --> 00:04:26,133
‫but now we do.

84
00:04:27,480 --> 00:04:32,040
‫Now, going back to the examples of preserving previous state

85
00:04:32,040 --> 00:04:34,740
‫and storing the ID of a setTimeout,

86
00:04:34,740 --> 00:04:36,510
‫these are pieces of data

87
00:04:36,510 --> 00:04:40,200
‫that we want React to remember between renders,

88
00:04:40,200 --> 00:04:43,320
‫but we don't want them to re-render the UI

89
00:04:43,320 --> 00:04:45,150
‫whenever we update them,

90
00:04:45,150 --> 00:04:49,620
‫and so that's why we use refs for this kind of data.

91
00:04:49,620 --> 00:04:53,580
‫So this is the main distinction between state and refs,

92
00:04:53,580 --> 00:04:56,550
‫but there are also some minor ones.

93
00:04:56,550 --> 00:04:58,770
‫So, as we also just learned,

94
00:04:58,770 --> 00:05:02,970
‫state is immutable, but refs are not.

95
00:05:02,970 --> 00:05:06,210
‫Also state is updated asynchronously,

96
00:05:06,210 --> 00:05:09,180
‫which means that we cannot use the new state

97
00:05:09,180 --> 00:05:11,760
‫immediately after updating it;

98
00:05:11,760 --> 00:05:16,380
‫with refs, on the other hand, updates are not asynchronous,

99
00:05:16,380 --> 00:05:20,100
‫and so we can actually read a new current property

100
00:05:20,100 --> 00:05:22,619
‫immediately after updating it.

101
00:05:22,619 --> 00:05:27,210
‫Basically, just like any other regular JavaScript object.

102
00:05:27,210 --> 00:05:30,600
‫Okay, and that does it for this video.

103
00:05:30,600 --> 00:05:33,243
‫So see you back in VS Code.