1
00:00:01,020 --> 00:00:03,150
‫By the end of the last lecture,

2
00:00:03,150 --> 00:00:06,137
‫I said that we should only update state using

3
00:00:06,137 --> 00:00:10,650
‫the setter function, but don't just trust me on that.

4
00:00:10,650 --> 00:00:15,650
‫So, instead, let's actually explore this and break React.

5
00:00:15,720 --> 00:00:18,510
‫So, just to see what happens when we try

6
00:00:18,510 --> 00:00:20,493
‫to update state manually.

7
00:00:22,170 --> 00:00:25,560
‫Now, right now we have this step state here,

8
00:00:25,560 --> 00:00:27,750
‫defined as a const variable

9
00:00:27,750 --> 00:00:30,630
‫and so we would not be able to even change it.

10
00:00:30,630 --> 00:00:33,660
‫So, let's change this to a let

11
00:00:33,660 --> 00:00:36,600
‫and so then we can actually break this.

12
00:00:36,600 --> 00:00:39,870
‫So, let's say the tier in handle next,

13
00:00:39,870 --> 00:00:42,780
‫instead of updating the state in the correct way,

14
00:00:42,780 --> 00:00:44,643
‫we would do it like this.

15
00:00:46,950 --> 00:00:51,210
‫So, step equal step plus one.

16
00:00:51,210 --> 00:00:53,100
‫That would be a perfectly normal way

17
00:00:53,100 --> 00:00:57,390
‫of updating a variable defined with let, right?

18
00:00:57,390 --> 00:01:00,300
‫And so right now, this is a let variable,

19
00:01:00,300 --> 00:01:02,340
‫so a variable that we can update.

20
00:01:02,340 --> 00:01:05,247
‫And so again, this would be a perfectly normal way

21
00:01:05,247 --> 00:01:08,280
‫of updating variables in JavaScript.

22
00:01:08,280 --> 00:01:11,940
‫But let's see what now happens when we click this button.

23
00:01:11,940 --> 00:01:14,370
‫Well, simply nothing happens.

24
00:01:14,370 --> 00:01:17,280
‫So, we don't get any error from React,

25
00:01:17,280 --> 00:01:19,140
‫but simply nothing happens.

26
00:01:19,140 --> 00:01:22,800
‫And so, the reason for that is that React has no way

27
00:01:22,800 --> 00:01:27,420
‫of knowing that this is actually trying to update the state.

28
00:01:27,420 --> 00:01:29,512
‫So, React has no magic way of knowing

29
00:01:29,512 --> 00:01:31,948
‫that this here is the state variable

30
00:01:31,948 --> 00:01:35,816
‫and that this operation is basically updating it.

31
00:01:35,816 --> 00:01:38,283
‫So again, React doesn't know about that

32
00:01:38,283 --> 00:01:40,313
‫and that's why React provided us

33
00:01:40,313 --> 00:01:44,730
‫with this setter function here, which is a functional way

34
00:01:44,730 --> 00:01:48,568
‫of updating the state value, but without mutating it.

35
00:01:48,568 --> 00:01:52,170
‫Because here we are directly mutating now

36
00:01:52,170 --> 00:01:54,104
‫this step variable, right?

37
00:01:54,104 --> 00:01:57,000
‫But React is all about immutability.

38
00:01:57,000 --> 00:02:00,271
‫And so, therefore, we can only update the state using

39
00:02:00,271 --> 00:02:02,825
‫the tools that React gives us.

40
00:02:02,825 --> 00:02:06,960
‫So, in this case, this set step function.

41
00:02:06,960 --> 00:02:09,530
‫And so this setter function is actually tied

42
00:02:09,530 --> 00:02:12,360
‫to this state variable right here.

43
00:02:12,360 --> 00:02:15,960
‫So, when we use this functional way of updating the state,

44
00:02:15,960 --> 00:02:19,710
‫then React does know that this is the state variable

45
00:02:19,710 --> 00:02:24,000
‫that should be updated, okay?

46
00:02:24,000 --> 00:02:27,040
‫So never do this mistake, just always use const

47
00:02:27,040 --> 00:02:29,993
‫and always use the setter function, okay?

48
00:02:33,960 --> 00:02:36,210
‫Now, another way in which this could happen,

49
00:02:36,210 --> 00:02:38,460
‫which might be a little bit less obvious,

50
00:02:38,460 --> 00:02:42,003
‫is when we use an object or an array for state.

51
00:02:43,320 --> 00:02:45,420
‫So, let's just do a quick experiment here.

52
00:02:46,290 --> 00:02:51,290
‫So, let's just say test, for example, and then use state.

53
00:02:52,890 --> 00:02:55,833
‫And here as a default, we pass in an object.

54
00:02:56,910 --> 00:02:59,973
‫And let's give it some property of name.

55
00:03:01,440 --> 00:03:03,420
‫Now, notice that here in the destructuring,

56
00:03:03,420 --> 00:03:06,240
‫I only took out the state variable itself.

57
00:03:06,240 --> 00:03:09,090
‫So, I don't even have the setter function now.

58
00:03:09,090 --> 00:03:12,243
‫And so here, let's say that I wanted to update this name.

59
00:03:13,800 --> 00:03:16,950
‫Well, let's first actually also print it here.

60
00:03:16,950 --> 00:03:19,323
‫So, test.name.

61
00:03:20,220 --> 00:03:21,873
‫So, then we get Jonas there.

62
00:03:23,520 --> 00:03:25,560
‫And then here, we might think that this

63
00:03:25,560 --> 00:03:28,920
‫is how we update that state.

64
00:03:28,920 --> 00:03:30,840
‫So test.name.

65
00:03:30,840 --> 00:03:34,410
‫And now let's use Fred, for example.

66
00:03:34,410 --> 00:03:37,530
‫So, just some other name and yeah,

67
00:03:37,530 --> 00:03:40,140
‫watch what happens when I click next now.

68
00:03:40,140 --> 00:03:42,840
‫And that did actually work.

69
00:03:42,840 --> 00:03:46,515
‫So, mutating the object like this did actually trigger

70
00:03:46,515 --> 00:03:49,937
‫a new re-render of the component view.

71
00:03:49,937 --> 00:03:53,247
‫However, mutating objects like this is a really,

72
00:03:53,247 --> 00:03:55,293
‫really bad practice.

73
00:03:57,030 --> 00:03:59,884
‫So, React really doesn't want you to do this

74
00:03:59,884 --> 00:04:03,659
‫and that's because sometimes, in more complex situations,

75
00:04:03,659 --> 00:04:05,820
‫this actually won't work.

76
00:04:05,820 --> 00:04:08,640
‫And in general, it's really just a bad practice

77
00:04:08,640 --> 00:04:10,869
‫of mutating objects like this,

78
00:04:10,869 --> 00:04:13,094
‫especially in a framework like React,

79
00:04:13,094 --> 00:04:15,900
‫which is all about immutability

80
00:04:15,900 --> 00:04:18,390
‫and functional state updates.

81
00:04:18,390 --> 00:04:20,430
‫So, never do this.

82
00:04:20,430 --> 00:04:24,800
‫So, if you really wanted to update this object here,

83
00:04:24,800 --> 00:04:28,743
‫we would again create a setter function here.

84
00:04:30,240 --> 00:04:34,440
‫So, not creating, but basically taking this setter function

85
00:04:34,440 --> 00:04:37,230
‫out of the result of use state.

86
00:04:37,230 --> 00:04:42,230
‫And then here we would call that setter function

87
00:04:43,440 --> 00:04:46,710
‫and then pass in the complete new object.

88
00:04:46,710 --> 00:04:49,743
‫So, the name should now be Fred.

89
00:04:50,610 --> 00:04:53,340
‫So, it's back to what we had before now.

90
00:04:53,340 --> 00:04:57,120
‫And now, if we click next, that still updates the name

91
00:04:57,120 --> 00:05:00,810
‫to Fred, but it does so in the correct way.

92
00:05:00,810 --> 00:05:04,830
‫So, always treat state as immutable in React.

93
00:05:04,830 --> 00:05:07,445
‫So, as something that you cannot change directly,

94
00:05:07,445 --> 00:05:10,339
‫but that you can only change using the tools

95
00:05:10,339 --> 00:05:12,270
‫that React gives us.

96
00:05:12,270 --> 00:05:14,793
‫So, using the state setter function.