WEBVTT

1
00:00:17.395 --> 00:00:20.165
<00:00:17.395>This <00:00:17.535>is <00:00:17.675>talk <00:00:17.814>about <00:00:17.955>state <00:00:18.095>management <00:00:18.235>in <00:00:18.375>the <00:00:18.515>world <00:00:18.655>of <00:00:18.794>hooks.

2
00:00:20.945 --> 00:00:23.765
<00:00:20.945>So <00:00:21.085>I <00:00:21.225>assume <00:00:21.365>you <00:00:21.505>know <00:00:21.645>a <00:00:21.785>little <00:00:21.925>bit <00:00:22.065>about <00:00:22.205>React <00:00:22.345>hooks

3
00:00:23.785 --> 00:00:25.525
<00:00:23.785>and <00:00:24.065>about <00:00:24.345>state <00:00:24.625>management <00:00:24.905>in <00:00:25.185>order

4
00:00:25.585 --> 00:00:27.285
<00:00:25.585>to <00:00:26.051>understand <00:00:26.518>this <00:00:26.985>presentation.

5
00:00:27.825 --> 00:00:29.205
<00:00:27.825>Uh, <00:00:28.073>my <00:00:28.321>name <00:00:28.570>is <00:00:28.818>Adam <00:00:29.067>Klein,

6
00:00:29.465 --> 00:00:31.445
<00:00:29.465>and <00:00:29.620>you <00:00:29.776>can <00:00:29.931>find <00:00:30.087>me <00:00:30.242>at <00:00:30.398>Adam <00:00:30.553>Klein <00:00:30.709>dot <00:00:30.865>Bev,

7
00:00:31.465 --> 00:00:32.565
<00:00:31.465>my <00:00:31.959>personal <00:00:32.455>website.

8
00:00:33.385 --> 00:00:36.045
<00:00:33.385>So <00:00:33.512>I <00:00:33.639>like <00:00:33.766>to <00:00:33.894>start, <00:00:34.021>start <00:00:34.148>by <00:00:34.275>saying <00:00:34.403>that <00:00:34.530>I <00:00:34.657>like <00:00:34.785>hooks.

9
00:00:36.785 --> 00:00:38.685
<00:00:36.785>Uh, <00:00:36.959>I <00:00:37.135>know <00:00:37.309>many <00:00:37.485>of <00:00:37.660>you <00:00:37.834>also <00:00:38.010>like <00:00:38.184>hooks,

10
00:00:38.685 --> 00:00:41.325
<00:00:38.685>and <00:00:38.860>you've <00:00:39.035>probably <00:00:39.210>heard <00:00:39.385>a <00:00:39.560>lot <00:00:39.735>about <00:00:39.910>the <00:00:40.085>benefits

11
00:00:41.325 --> 00:00:43.125
<00:00:41.325>of <00:00:41.791>hooks, <00:00:42.258>uh, <00:00:42.725>online.

12
00:00:44.505 --> 00:00:46.685
<00:00:44.505>So <00:00:44.680>I <00:00:44.855>wanna <00:00:45.030>share <00:00:45.205>a <00:00:45.380>frustration <00:00:45.555>that <00:00:45.730>I <00:00:45.905>have.

13
00:00:47.605 --> 00:00:50.485
<00:00:47.605>I <00:00:47.779>like <00:00:47.955>hooks, <00:00:48.129>but <00:00:48.305>I <00:00:48.480>can <00:00:48.654>only <00:00:48.830>use <00:00:49.004>hooks

14
00:00:50.505 --> 00:00:52.405
<00:00:50.505>to <00:00:50.855>manage <00:00:51.205>local <00:00:51.555>component <00:00:51.905>state.

15
00:00:52.905 --> 00:00:57.845
<00:00:52.905>And <00:00:53.045>much <00:00:53.185>of <00:00:53.325>my <00:00:53.465>state <00:00:53.605>in <00:00:53.745>my <00:00:53.885>application <00:00:54.025>is <00:00:54.165>shared <00:00:54.305>state.

16
00:00:57.995 --> 00:01:00.565
<00:00:57.995>It's <00:00:58.195>managed <00:00:58.394>by <00:00:58.595>some <00:00:58.794>global <00:00:58.995>state <00:00:59.195>management <00:00:59.394>solution.

17
00:01:00.905 --> 00:01:04.445
<00:01:00.905>And <00:01:01.105>in <00:01:01.305>that <00:01:01.505>solution, <00:01:01.705>I <00:01:01.905>cannot <00:01:02.105>use <00:01:02.305>hooks

18
00:01:04.665 --> 00:01:05.845
<00:01:04.665>to <00:01:05.019>manage <00:01:05.373>the <00:01:05.727>state.

19
00:01:06.805 --> 00:01:09.425
<00:01:06.805>So <00:01:06.960>I <00:01:07.116>can <00:01:07.271>use <00:01:07.427>hooks <00:01:07.582>to <00:01:07.738>subscribe <00:01:07.893>to <00:01:08.049>the <00:01:08.205>stores

20
00:01:09.805 --> 00:01:11.865
<00:01:09.805>and <00:01:10.085>connect <00:01:10.365>to <00:01:10.645>this, <00:01:10.925>uh, <00:01:11.205>library,

21
00:01:12.485 --> 00:01:15.625
<00:01:12.485>but <00:01:12.625>I <00:01:12.765>cannot <00:01:12.905>use <00:01:13.045>hooks <00:01:13.185>to <00:01:13.325>actually <00:01:13.465>manage <00:01:13.605>the <00:01:13.745>third <00:01:13.885>state.

22
00:01:16.005 --> 00:01:19.665
<00:01:16.005>And <00:01:16.145>if <00:01:16.285>we <00:01:16.425>take <00:01:16.565>an <00:01:16.705>example, <00:01:16.845>let's <00:01:16.985>say <00:01:17.125>you're <00:01:17.265>using <00:01:17.405>redux.

23
00:01:20.495 --> 00:01:22.825
<00:01:20.495>When <00:01:20.695>you <00:01:20.895>manage <00:01:21.095>the <00:01:21.295>state, <00:01:21.495>when <00:01:21.695>you <00:01:21.895>get

24
00:01:23.005 --> 00:01:25.065
<00:01:23.005>and <00:01:23.205>set <00:01:23.405>it, <00:01:23.604>when <00:01:23.804>you <00:01:24.005>access <00:01:24.205>it, <00:01:24.405>uh,

25
00:01:25.065 --> 00:01:27.505
<00:01:25.065>usually <00:01:25.240>you <00:01:25.414>use <00:01:25.590>use <00:01:25.765>state <00:01:25.940>in <00:01:26.115>your <00:01:26.289>local <00:01:26.465>state,

26
00:01:27.965 --> 00:01:29.905
<00:01:27.965>but <00:01:28.198>in <00:01:28.431>redux <00:01:28.665>you <00:01:28.898>use <00:01:29.131>a <00:01:29.365>reducer.

27
00:01:30.485 --> 00:01:34.305
<00:01:30.485>So <00:01:30.640>the <00:01:30.796>code <00:01:30.951>is <00:01:31.107>different <00:01:31.262>also <00:01:31.418>to <00:01:31.573>manage <00:01:31.729>side <00:01:31.885>effects.

28
00:01:34.645 --> 00:01:38.225
<00:01:34.645>For <00:01:34.800>local, <00:01:34.956>uh, <00:01:35.111>state, <00:01:35.267>you <00:01:35.422>use <00:01:35.578>use <00:01:35.733>effect <00:01:35.889>with <00:01:36.045>hooks,

29
00:01:38.805 --> 00:01:41.385
<00:01:38.805>but <00:01:38.960>with <00:01:39.116>red, <00:01:39.271>it's <00:01:39.427>usually <00:01:39.582>use <00:01:39.738>something <00:01:39.893>like <00:01:40.049>a <00:01:40.205>middleware

30
00:01:41.685 --> 00:01:44.785
<00:01:41.685>or <00:01:41.885>saga, <00:01:42.085>or <00:01:42.285>th <00:01:42.485>that's <00:01:42.685>also <00:01:42.885>use <00:01:43.085>middlewares.

31
00:01:45.245 --> 00:01:47.585
<00:01:45.245>So <00:01:45.420>again, <00:01:45.595>the <00:01:45.770>code <00:01:45.945>that <00:01:46.120>you <00:01:46.295>write <00:01:46.470>is <00:01:46.645>different

32
00:01:47.925 --> 00:01:49.785
<00:01:47.925>and <00:01:48.274>the <00:01:48.625>same <00:01:48.975>for <00:01:49.325>memos,

33
00:01:49.815 --> 00:01:51.945
<00:01:49.815>selectors <00:01:50.048>if <00:01:50.281>they <00:01:50.515>are <00:01:50.748>local <00:01:50.981>or <00:01:51.215>global.

34
00:01:53.135 --> 00:01:55.865
<00:01:53.134>Also, <00:01:53.309>if <00:01:53.484>you <00:01:53.660>use <00:01:53.835>something <00:01:54.009>else, <00:01:54.184>for <00:01:54.359>example, <00:01:54.535>MobX,

35
00:01:56.295 --> 00:01:57.745
<00:01:56.295>then <00:01:56.556>you <00:01:56.817>manage <00:01:57.078>the <00:01:57.339>state <00:01:57.600>differently.

36
00:01:57.805 --> 00:01:59.105
<00:01:57.805>You <00:01:58.195>use <00:01:58.585>mutable <00:01:58.975>objects.

37
00:01:59.205 --> 00:02:02.385
<00:01:59.205>You <00:01:59.405>use <00:01:59.605>observable <00:01:59.804>action, <00:02:00.005>uh, <00:02:00.205>reaction <00:02:00.405>computed <00:02:00.605>values,

38
00:02:02.835 --> 00:02:05.665
<00:02:02.835>which <00:02:02.975>is <00:02:03.115>different <00:02:03.255>than <00:02:03.395>how <00:02:03.535>you <00:02:03.675>do <00:02:03.815>it <00:02:03.955>locally, <00:02:04.095>which <00:02:04.235>means

39
00:02:05.665 --> 00:02:09.065
<00:02:05.665>that <00:02:05.792>you <00:02:05.919>have <00:02:06.046>to <00:02:06.174>keep <00:02:06.301>these <00:02:06.428>two <00:02:06.555>mental <00:02:06.683>models <00:02:06.810>in <00:02:06.937>your <00:02:07.065>mind

40
00:02:09.805 --> 00:02:12.025
<00:02:09.805>and <00:02:10.038>it's <00:02:10.271>hard <00:02:10.505>to <00:02:10.738>switch <00:02:10.971>between <00:02:11.205>them.

41
00:02:12.045 --> 00:02:14.665
<00:02:12.045>And <00:02:12.200>it's <00:02:12.356>harder <00:02:12.511>to <00:02:12.667>train <00:02:12.822>new <00:02:12.978>developers <00:02:13.133>to <00:02:13.289>the <00:02:13.445>team.

42
00:02:16.485 --> 00:02:17.825
<00:02:16.485>And <00:02:16.887>even <00:02:17.289>more <00:02:17.691>frustrating.

43
00:02:18.375 --> 00:02:21.425
<00:02:18.375>Many <00:02:18.530>times, <00:02:18.686>if <00:02:18.841>you're <00:02:18.997>like <00:02:19.152>me, <00:02:19.308>you <00:02:19.463>find <00:02:19.619>yourself <00:02:19.775>start

44
00:02:21.425 --> 00:02:22.945
<00:02:21.425>with <00:02:21.767>some <00:02:22.109>local <00:02:22.451>UI <00:02:22.793>state

45
00:02:23.245 --> 00:02:25.625
<00:02:23.245>for <00:02:23.478>your <00:02:23.711>component <00:02:23.945>only <00:02:24.178>to <00:02:24.411>discover <00:02:24.645>later.

46
00:02:26.045 --> 00:02:27.585
<00:02:26.045>It <00:02:26.322>could <00:02:26.599>be <00:02:26.876>even <00:02:27.153>days <00:02:27.431>later

47
00:02:27.645 --> 00:02:31.025
<00:02:27.645>or <00:02:27.785>weeks <00:02:27.925>later, <00:02:28.065>that <00:02:28.205>you <00:02:28.345>need <00:02:28.485>this <00:02:28.625>state <00:02:28.765>to <00:02:28.905>be <00:02:29.045>shared

48
00:02:31.215 --> 00:02:33.665
<00:02:31.215>with <00:02:31.448>other, <00:02:31.681>uh, <00:02:31.915>components <00:02:32.148>on <00:02:32.381>the <00:02:32.615>screen.

49
00:02:33.845 --> 00:02:36.585
<00:02:33.845>So <00:02:34.000>you <00:02:34.156>have <00:02:34.311>to <00:02:34.467>transform <00:02:34.622>it <00:02:34.778>from <00:02:34.933>local <00:02:35.089>component <00:02:35.245>state

50
00:02:37.085 --> 00:02:38.985
<00:02:37.085>to <00:02:37.365>some <00:02:37.645>shared <00:02:37.925>state, <00:02:38.205>which <00:02:38.485>means

51
00:02:38.985 --> 00:02:41.825
<00:02:38.985>that <00:02:39.160>if <00:02:39.335>you <00:02:39.510>manage <00:02:39.685>the <00:02:39.860>code <00:02:40.035>differently, <00:02:40.210>you <00:02:40.385>have

52
00:02:41.825 --> 00:02:42.865
<00:02:41.825>to <00:02:42.137>now <00:02:42.449>refactor <00:02:42.761>it.

53
00:02:45.845 --> 00:02:48.625
<00:02:45.845>So <00:02:46.020>if <00:02:46.195>you're <00:02:46.370>like <00:02:46.545>me, <00:02:46.720>you're <00:02:46.895>a <00:02:47.070>bit <00:02:47.245>frustrated.

54
00:02:48.805 --> 00:02:51.305
<00:02:48.805>And <00:02:48.960>as <00:02:49.116>you <00:02:49.271>can <00:02:49.427>see, <00:02:49.582>I <00:02:49.738>already <00:02:49.893>pulled <00:02:50.049>out <00:02:50.205>all

55
00:02:51.305 --> 00:02:52.785
<00:02:51.305>of <00:02:51.571>my <00:02:51.837>hair <00:02:52.104>on <00:02:52.370>my <00:02:52.637>head.

56
00:02:53.325 --> 00:02:54.745
<00:02:53.325>So <00:02:53.644>what <00:02:53.964>can <00:02:54.283>I <00:02:54.603>do?

57
00:02:55.885 --> 00:02:58.145
<00:02:55.885>So <00:02:56.234>option <00:02:56.584>number <00:02:56.935>one <00:02:57.285>is

58
00:02:58.245 --> 00:03:01.285
<00:02:58.245>to <00:02:58.400>manage <00:02:58.556>my <00:02:58.711>local <00:02:58.867>state <00:02:59.022>the <00:02:59.178>same <00:02:59.333>way <00:02:59.489>I <00:02:59.645>manage

59
00:03:01.345 --> 00:03:02.365
<00:03:01.345>my <00:03:01.804>global <00:03:02.263>state.

60
00:03:02.705 --> 00:03:03.805
<00:03:02.705>And <00:03:02.870>let <00:03:03.035>me <00:03:03.200>give <00:03:03.365>you <00:03:03.530>an <00:03:03.695>example.

61
00:03:04.665 --> 00:03:07.845
<00:03:04.665>So <00:03:04.864>if <00:03:05.065>I <00:03:05.265>use <00:03:05.465>reducers <00:03:05.665>in <00:03:05.864>with <00:03:06.065>Redux

62
00:03:07.865 --> 00:03:10.645
<00:03:07.865>to <00:03:08.040>manage <00:03:08.215>my <00:03:08.390>global <00:03:08.565>state, <00:03:08.740>I <00:03:08.915>can <00:03:09.090>use <00:03:09.265>Reducers

63
00:03:10.825 --> 00:03:12.845
<00:03:10.825>to <00:03:11.105>manage <00:03:11.385>my <00:03:11.665>local <00:03:11.945>component <00:03:12.225>state.

64
00:03:13.515 --> 00:03:16.245
<00:03:13.515>This <00:03:13.714>way <00:03:13.915>the <00:03:14.114>code <00:03:14.315>will <00:03:14.515>be <00:03:14.714>very <00:03:14.915>similar

65
00:03:16.425 --> 00:03:20.565
<00:03:16.425>and <00:03:16.565>it'll <00:03:16.705>be <00:03:16.845>easier <00:03:16.985>to <00:03:17.125>move <00:03:17.265>a <00:03:17.405>state <00:03:17.545>from <00:03:17.685>being <00:03:17.825>local

66
00:03:20.825 --> 00:03:21.965
<00:03:20.825>to <00:03:21.338>being <00:03:21.851>global.

67
00:03:23.145 --> 00:03:25.445
<00:03:23.145>The <00:03:23.425>same <00:03:23.705>from <00:03:23.985>using <00:03:24.265>Mobic, <00:03:24.545>uh,

68
00:03:25.495 --> 00:03:27.885
<00:03:25.495>Mobic <00:03:25.728>gives <00:03:25.961>something <00:03:26.195>called <00:03:26.428>Use <00:03:26.661>local <00:03:26.895>store,

69
00:03:28.295 --> 00:03:31.685
<00:03:28.295>which <00:03:28.450>allows <00:03:28.606>you <00:03:28.761>to <00:03:28.917>manage <00:03:29.072>local <00:03:29.228>component <00:03:29.383>state <00:03:29.539>the <00:03:29.695>same

70
00:03:31.685 --> 00:03:33.005
<00:03:31.685>way <00:03:31.982>you <00:03:32.279>manage <00:03:32.576>global <00:03:32.873>stores.

71
00:03:33.225 --> 00:03:35.165
<00:03:33.225>So <00:03:33.505>you <00:03:33.785>use <00:03:34.065>observables <00:03:34.345>computer <00:03:34.625>values,

72
00:03:35.195 --> 00:03:37.125
<00:03:35.195>actions, <00:03:35.661>reactions, <00:03:36.128>order <00:03:36.595>run.

73
00:03:37.905 --> 00:03:39.685
<00:03:37.905>And <00:03:38.185>so <00:03:38.465>the <00:03:38.745>code <00:03:39.025>is <00:03:39.305>similar.

74
00:03:40.665 --> 00:03:41.685
<00:03:40.665>Now, <00:03:40.894>this <00:03:41.124>makes <00:03:41.353>a <00:03:41.583>lot

75
00:03:41.685 --> 00:03:44.245
<00:03:41.685>of <00:03:41.860>sense <00:03:42.035>if <00:03:42.210>you <00:03:42.385>like <00:03:42.560>to, <00:03:42.735>you <00:03:42.910>to <00:03:43.085>manage.

76
00:03:44.625 --> 00:03:47.765
<00:03:44.625>If <00:03:44.800>you <00:03:44.975>chosen <00:03:45.150>to <00:03:45.325>manage <00:03:45.500>state <00:03:45.675>this <00:03:45.850>way, <00:03:46.025>uh,

77
00:03:47.765 --> 00:03:50.485
<00:03:47.765>in <00:03:47.920>your <00:03:48.076>global <00:03:48.231>state, <00:03:48.387>why <00:03:48.542>wouldn't <00:03:48.698>you <00:03:48.853>do <00:03:49.009>the <00:03:49.165>same

78
00:03:50.555 --> 00:03:52.365
<00:03:50.555>with <00:03:50.905>your <00:03:51.255>local <00:03:51.605>component <00:03:51.955>state?

79
00:03:53.225 --> 00:03:56.525
<00:03:53.225>Um, <00:03:53.364>so <00:03:53.505>again, <00:03:53.644>it's <00:03:53.785>easier <00:03:53.924>to <00:03:54.065>wrap <00:03:54.204>your <00:03:54.345>hand <00:03:54.484>around <00:03:54.625>it.

80
00:03:56.835 --> 00:03:58.365
<00:03:56.835>It's <00:03:57.110>easier <00:03:57.385>to <00:03:57.661>train <00:03:57.936>your <00:03:58.212>developers

81
00:03:58.385 --> 00:04:00.445
<00:03:58.385>and <00:03:58.584>it's <00:03:58.785>easier <00:03:58.984>to <00:03:59.185>migrate <00:03:59.385>code <00:03:59.584>from <00:03:59.785>local

82
00:04:00.445 --> 00:04:01.685
<00:04:00.445>state <00:04:00.817>to <00:04:01.189>shared <00:04:01.561>state.

83
00:04:03.825 --> 00:04:06.685
<00:04:03.825>But <00:04:03.980>I'd <00:04:04.136>like <00:04:04.291>to <00:04:04.447>discuss <00:04:04.602>one <00:04:04.758>drawback <00:04:04.913>to <00:04:05.069>this <00:04:05.225>approach.

84
00:04:07.265 --> 00:04:11.565
<00:04:07.265>And <00:04:07.392>the <00:04:07.519>drawback <00:04:07.646>is <00:04:07.774>that <00:04:07.901>we're <00:04:08.028>not <00:04:08.155>really <00:04:08.283>using <00:04:08.410>all <00:04:08.537>of <00:04:08.665>hooks

85
00:04:12.085 --> 00:04:13.365
<00:04:12.085>benefits <00:04:12.469>in <00:04:12.853>this <00:04:13.237>approach.

86
00:04:13.785 --> 00:04:15.085
<00:04:13.785>And <00:04:14.077>let <00:04:14.370>me <00:04:14.662>explain <00:04:14.955>why.

87
00:04:16.265 --> 00:04:19.005
<00:04:16.265>So <00:04:16.420>let's <00:04:16.576>look <00:04:16.731>at <00:04:16.887>some, <00:04:17.042>uh, <00:04:17.198>example <00:04:17.353>code <00:04:17.509>using <00:04:17.664>hooks,

88
00:04:19.705 --> 00:04:23.045
<00:04:19.704>and <00:04:19.904>let's <00:04:20.104>talk <00:04:20.305>about <00:04:20.505>some <00:04:20.704>traits <00:04:20.904>of <00:04:21.104>hooks

89
00:04:23.425 --> 00:04:25.325
<00:04:23.425>and <00:04:23.658>see <00:04:23.891>why <00:04:24.125>they <00:04:24.358>can <00:04:24.591>benefit <00:04:24.825>us.

90
00:04:25.985 --> 00:04:27.765
<00:04:25.985>So <00:04:26.185>first <00:04:26.385>of <00:04:26.585>all, <00:04:26.785>as <00:04:26.985>you <00:04:27.185>probably <00:04:27.385>know,

91
00:04:27.815 --> 00:04:30.685
<00:04:27.815>hooks <00:04:27.990>don't <00:04:28.165>use <00:04:28.340>any <00:04:28.515>keys <00:04:28.690>to <00:04:28.865>identify <00:04:29.040>the <00:04:29.215>state.

92
00:04:30.715 --> 00:04:32.245
<00:04:30.715>They <00:04:31.059>rely <00:04:31.403>on <00:04:31.747>call <00:04:32.092>order.

93
00:04:33.345 --> 00:04:35.245
<00:04:33.345>Um, <00:04:34.745>also,

94
00:04:38.145 --> 00:04:40.005
<00:04:38.145>uh, <00:04:38.378>mostly <00:04:38.611>because <00:04:38.844>they <00:04:39.078>don't <00:04:39.311>use <00:04:39.544>keys.

95
00:04:40.545 --> 00:04:42.885
<00:04:40.545>Um, <00:04:40.778>code <00:04:41.011>that <00:04:41.245>uses <00:04:41.478>hooks <00:04:41.711>is <00:04:41.945>flat.

96
00:04:43.035 --> 00:04:45.845
<00:04:43.034>It's <00:04:43.234>not <00:04:43.434>nested <00:04:43.635>inside <00:04:43.835>some <00:04:44.034>object, <00:04:44.234>some <00:04:44.434>object.

97
00:04:46.425 --> 00:04:48.725
<00:04:46.425>Um, <00:04:46.600>it's <00:04:46.775>in <00:04:46.950>the <00:04:47.125>top <00:04:47.300>level <00:04:47.475>of <00:04:47.650>our <00:04:47.825>function.

98
00:04:49.425 --> 00:04:52.325
<00:04:49.425>And <00:04:49.625>it <00:04:49.825>also <00:04:50.025>helps <00:04:50.225>us <00:04:50.425>to <00:04:50.625>co-locate <00:04:50.825>a,

99
00:04:52.725 --> 00:04:53.925
<00:04:52.725>a <00:04:53.085>relevant <00:04:53.445>code <00:04:53.805>together.

100
00:04:54.105 --> 00:04:56.045
<00:04:54.105>So <00:04:54.338>I <00:04:54.571>can <00:04:54.805>have <00:04:55.038>the <00:04:55.271>initialization <00:04:55.505>code

101
00:04:56.505 --> 00:04:59.405
<00:04:56.505>and <00:04:56.705>the <00:04:56.905>callbacks <00:04:57.105>that, <00:04:57.305>uh, <00:04:57.505>change <00:04:57.705>the <00:04:57.905>state

102
00:04:59.785 --> 00:05:02.005
<00:04:59.784>and <00:04:59.984>also <00:05:00.184>side <00:05:00.385>effects <00:05:00.585>and <00:05:00.784>the <00:05:00.984>cleanup <00:05:01.184>functions

103
00:05:02.005 --> 00:05:04.445
<00:05:02.005>of <00:05:02.205>these <00:05:02.405>side <00:05:02.605>effects <00:05:02.805>co-located <00:05:03.005>in <00:05:03.205>the <00:05:03.405>same

104
00:05:04.445 --> 00:05:05.845
<00:05:04.445>place <00:05:04.865>inside <00:05:05.285>the <00:05:05.705>code.

105
00:05:07.235 --> 00:05:08.485
<00:05:07.235>What <00:05:07.516>all <00:05:07.797>of <00:05:08.078>this, <00:05:08.360>uh,

106
00:05:08.895 --> 00:05:13.045
<00:05:08.895>gives <00:05:09.011>me <00:05:09.128>I <00:05:09.245>can <00:05:09.361>benefit <00:05:09.478>from <00:05:09.594>is <00:05:09.711>I <00:05:09.828>can <00:05:09.945>take <00:05:10.061>code, <00:05:10.178>uh, <00:05:10.294>written

107
00:05:13.115 --> 00:05:14.845
<00:05:13.115>with <00:05:13.581>using <00:05:14.048>React <00:05:14.515>hooks

108
00:05:15.545 --> 00:05:20.285
<00:05:15.545>and <00:05:15.685>simply <00:05:15.825>move <00:05:15.965>it <00:05:16.105>to <00:05:16.245>somewhere <00:05:16.385>else, <00:05:16.525>like <00:05:16.665>a <00:05:16.805>custom <00:05:16.945>hook

109
00:05:20.865 --> 00:05:22.285
<00:05:20.865>or <00:05:21.504>another <00:05:22.143>component.

110
00:05:22.945 --> 00:05:25.085
<00:05:22.945>And <00:05:23.178>it's <00:05:23.411>guaranteed <00:05:23.645>that <00:05:23.878>it'll <00:05:24.111>just <00:05:24.344>work.

111
00:05:25.785 --> 00:05:27.805
<00:05:25.785>Uh, <00:05:25.960>this <00:05:26.135>is <00:05:26.310>due <00:05:26.485>to <00:05:26.660>all <00:05:26.835>of <00:05:27.010>these <00:05:27.185>traits

112
00:05:27.805 --> 00:05:30.525
<00:05:27.805>that <00:05:27.980>we <00:05:28.155>just <00:05:28.330>discussed <00:05:28.505>about <00:05:28.680>hooks, <00:05:28.855>not <00:05:29.030>using <00:05:29.205>keys

113
00:05:30.705 --> 00:05:32.445
<00:05:30.705>and <00:05:30.984>et <00:05:31.265>cetera, <00:05:31.544>relying <00:05:31.825>on <00:05:32.104>color.

114
00:05:34.345 --> 00:05:37.885
<00:05:34.345>And <00:05:34.500>this <00:05:34.656>allows <00:05:34.811>us <00:05:34.967>to <00:05:35.122>create <00:05:35.278>more <00:05:35.433>reusable, <00:05:35.589>uh, <00:05:35.745>code

115
00:05:38.265 --> 00:05:40.005
<00:05:38.265>and <00:05:38.731>more <00:05:39.198>modular <00:05:39.664>applications.

116
00:05:40.505 --> 00:05:43.245
<00:05:40.505>If <00:05:40.680>it's <00:05:40.855>easy <00:05:41.030>to <00:05:41.205>reuse, <00:05:41.380>we <00:05:41.555>will <00:05:41.730>do <00:05:41.905>it.

117
00:05:43.425 --> 00:05:45.445
<00:05:43.425>And <00:05:43.580>if <00:05:43.736>it's <00:05:43.891>not <00:05:44.047>easy, <00:05:44.202>we'll <00:05:44.358>probably <00:05:44.513>do <00:05:44.669>it <00:05:44.825>less.

118
00:05:46.285 --> 00:05:48.245
<00:05:46.284>'cause <00:05:46.484>we're <00:05:46.684>developers <00:05:46.885>and <00:05:47.085>we <00:05:47.284>are <00:05:47.484>pretty <00:05:47.684>lazy.

119
00:05:50.225 --> 00:05:53.925
<00:05:50.225>And <00:05:50.365>let's <00:05:50.505>try <00:05:50.645>to <00:05:50.785>examine <00:05:50.925>why <00:05:51.065>this <00:05:51.205>is <00:05:51.345>more <00:05:51.485>difficult <00:05:51.625>when,

120
00:05:53.925 --> 00:05:55.845
<00:05:53.925>when <00:05:54.158>we're <00:05:54.391>using, <00:05:54.625>for <00:05:54.858>example, <00:05:55.091>a <00:05:55.325>reducer.

121
00:05:55.945 --> 00:05:59.125
<00:05:55.945>So <00:05:56.100>let's <00:05:56.256>try <00:05:56.411>to <00:05:56.567>visualize <00:05:56.722>the <00:05:56.878>code <00:05:57.033>in <00:05:57.189>this <00:05:57.344>reducer,

122
00:05:59.745 --> 00:06:02.885
<00:05:59.745>and <00:05:59.900>you <00:06:00.056>can <00:06:00.211>see <00:06:00.367>that <00:06:00.522>it's <00:06:00.678>split <00:06:00.833>to <00:06:00.989>initialization <00:06:01.145>code,

123
00:06:02.985 --> 00:06:05.085
<00:06:02.985>update <00:06:03.265>code, <00:06:03.545>side <00:06:03.825>effects, <00:06:04.105>et <00:06:04.385>cetera.

124
00:06:05.985 --> 00:06:09.285
<00:06:05.985>And <00:06:06.125>let's <00:06:06.265>say <00:06:06.405>we <00:06:06.545>want <00:06:06.685>to <00:06:06.825>take <00:06:06.965>part <00:06:07.105>of <00:06:07.245>this <00:06:07.385>code

125
00:06:09.545 --> 00:06:12.005
<00:06:09.545>and <00:06:09.720>extract <00:06:09.895>it <00:06:10.070>outside <00:06:10.245>and <00:06:10.420>reuse <00:06:10.595>it <00:06:10.770>somewhere <00:06:10.945>else.

126
00:06:12.265 --> 00:06:15.125
<00:06:12.265>So <00:06:12.440>for <00:06:12.615>example, <00:06:12.789>uh, <00:06:12.965>the <00:06:13.140>parts <00:06:13.315>that <00:06:13.490>are <00:06:13.664>colored

127
00:06:15.125 --> 00:06:19.365
<00:06:15.125>with <00:06:15.241>light <00:06:15.358>blue <00:06:15.475>in <00:06:15.591>this <00:06:15.708>slide, <00:06:15.825>if <00:06:15.941>we <00:06:16.058>want <00:06:16.175>to <00:06:16.291>reuse <00:06:16.408>them, <00:06:16.525>we,

128
00:06:19.425 --> 00:06:22.045
<00:06:19.425>we <00:06:19.600>can <00:06:19.775>just <00:06:19.950>simply, <00:06:20.125>uh, <00:06:20.300>move <00:06:20.475>them <00:06:20.650>somewhere <00:06:20.825>else.

129
00:06:22.265 --> 00:06:25.845
<00:06:22.265>We <00:06:22.440>have <00:06:22.615>to <00:06:22.789>cherry <00:06:22.965>pick <00:06:23.140>them <00:06:23.315>outside, <00:06:23.490>like <00:06:23.664>surgically,

130
00:06:25.845 --> 00:06:27.205
<00:06:25.845>remove <00:06:26.151>them <00:06:26.457>from <00:06:26.763>our <00:06:27.068>code,

131
00:06:28.395 --> 00:06:31.045
<00:06:28.395>wrap <00:06:28.628>them <00:06:28.861>in <00:06:29.094>some <00:06:29.328>reusable <00:06:29.561>container, <00:06:29.794>like

132
00:06:32.045 --> 00:06:33.325
<00:06:32.045>a <00:06:32.621>another <00:06:33.197>reducer,

133
00:06:34.625 --> 00:06:38.005
<00:06:34.625>and <00:06:34.765>then <00:06:34.905>to <00:06:35.045>apply <00:06:35.185>them <00:06:35.325>to <00:06:35.465>another <00:06:35.605>part <00:06:35.745>of <00:06:35.885>our <00:06:36.025>application,

134
00:06:38.065 --> 00:06:41.805
<00:06:38.065>we <00:06:38.205>have <00:06:38.344>to <00:06:38.485>somehow, <00:06:38.625>uh, <00:06:38.765>stick <00:06:38.905>the, <00:06:39.045>the, <00:06:39.185>the <00:06:39.325>right <00:06:39.465>places,

135
00:06:42.425 --> 00:06:44.605
<00:06:42.425>the <00:06:42.625>right <00:06:42.825>code <00:06:43.025>in <00:06:43.225>the <00:06:43.425>right <00:06:43.625>places, <00:06:43.825>uh,

136
00:06:44.605 --> 00:06:45.965
<00:06:44.605>which <00:06:44.911>is <00:06:45.217>not <00:06:45.523>so <00:06:45.829>straightforward.

137
00:06:46.385 --> 00:06:48.405
<00:06:46.385>For <00:06:46.560>example, <00:06:46.735>for <00:06:46.909>a <00:06:47.085>reducer, <00:06:47.260>usually <00:06:47.435>we <00:06:47.610>do <00:06:47.784>it

138
00:06:48.405 --> 00:06:52.765
<00:06:48.405>with <00:06:48.580>a <00:06:48.755>higher <00:06:48.929>order <00:06:49.104>reducer, <00:06:49.280>um, <00:06:49.455>which <00:06:49.630>is, <00:06:49.804>again,

139
00:06:52.795 --> 00:06:55.285
<00:06:52.795>it's <00:06:52.995>possible <00:06:53.195>we've <00:06:53.395>been <00:06:53.595>doing <00:06:53.795>it <00:06:53.995>for <00:06:54.195>years

140
00:06:55.285 --> 00:06:56.365
<00:06:55.284>before <00:06:55.609>there <00:06:55.933>were <00:06:56.257>hooks.

141
00:06:57.025 --> 00:06:59.565
<00:06:57.025>Um, <00:06:57.375>but <00:06:57.724>it's <00:06:58.075>less <00:06:58.424>simple.

142
00:07:00.945 --> 00:07:05.045
<00:07:00.945>And <00:07:01.085>you <00:07:01.224>have <00:07:01.365>the, <00:07:01.505>uh, <00:07:01.645>chance <00:07:01.784>of <00:07:01.925>running <00:07:02.065>into <00:07:02.205>name <00:07:02.344>clashes,

143
00:07:05.265 --> 00:07:07.845
<00:07:05.265>so <00:07:05.420>keys <00:07:05.576>that <00:07:05.731>have <00:07:05.887>the <00:07:06.042>same <00:07:06.198>name <00:07:06.353>and <00:07:06.509>they <00:07:06.664>collide.

144
00:07:08.505 --> 00:07:11.845
<00:07:08.505>And <00:07:08.660>also <00:07:08.816>you <00:07:08.971>get <00:07:09.127>these <00:07:09.282>magic <00:07:09.438>properties <00:07:09.593>inside <00:07:09.749>your <00:07:09.905>state

145
00:07:11.845 --> 00:07:13.565
<00:07:11.845>that <00:07:12.020>you <00:07:12.195>don't <00:07:12.370>really <00:07:12.545>know <00:07:12.720>where <00:07:12.895>they <00:07:13.070>came <00:07:13.245>from.

146
00:07:13.585 --> 00:07:17.805
<00:07:13.585>You <00:07:13.724>have <00:07:13.864>to <00:07:14.005>start <00:07:14.145>going <00:07:14.284>up <00:07:14.424>the <00:07:14.565>hierarchy <00:07:14.705>of <00:07:14.844>reducers, <00:07:14.984>um,

147
00:07:18.015 --> 00:07:20.485
<00:07:18.015>which <00:07:18.170>is <00:07:18.326>pretty <00:07:18.481>much <00:07:18.637>the <00:07:18.792>same <00:07:18.948>problems <00:07:19.103>that <00:07:19.259>we <00:07:19.414>have

148
00:07:20.485 --> 00:07:21.805
<00:07:20.485>with <00:07:20.881>higher <00:07:21.277>order <00:07:21.673>components.

149
00:07:25.585 --> 00:07:28.045
<00:07:25.585>If <00:07:25.760>you <00:07:25.935>want <00:07:26.109>to <00:07:26.284>read <00:07:26.460>more, <00:07:26.635>and <00:07:26.810>I <00:07:26.984>suggest

150
00:07:28.045 --> 00:07:30.045
<00:07:28.045>and <00:07:28.245>recommend <00:07:28.445>that <00:07:28.645>you <00:07:28.845>read <00:07:29.045>more <00:07:29.245>about <00:07:29.445>all

151
00:07:30.045 --> 00:07:32.205
<00:07:30.045>of <00:07:30.278>these <00:07:30.511>benefits, <00:07:30.745>I <00:07:30.978>really <00:07:31.211>recommend, <00:07:31.445>uh,

152
00:07:32.305 --> 00:07:34.045
<00:07:32.305>Dan <00:07:32.655>AOVs, <00:07:33.005>uh, <00:07:33.355>blog <00:07:33.705>post.

153
00:07:34.185 --> 00:07:37.525
<00:07:34.185>Why <00:07:34.301>do <00:07:34.418>hooks <00:07:34.535>rely <00:07:34.651>on <00:07:34.768>call <00:07:34.885>order, <00:07:35.001>uh, <00:07:35.118>in <00:07:35.235>his, <00:07:35.351>uh, <00:07:35.468>blog <00:07:35.585>post,

154
00:07:37.905 --> 00:07:39.725
<00:07:37.905>in <00:07:38.255>his <00:07:38.604>blog, <00:07:38.955>uh, <00:07:39.304>overreacted.

155
00:07:42.525 --> 00:07:47.265
<00:07:42.525>So <00:07:42.700>all <00:07:42.875>of <00:07:43.049>this <00:07:43.224>brings <00:07:43.400>me <00:07:43.575>to <00:07:43.750>the <00:07:43.924>option

156
00:07:47.265 --> 00:07:51.265
<00:07:47.265>that <00:07:47.440>we <00:07:47.615>need <00:07:47.789>state <00:07:47.965>management <00:07:48.140>that <00:07:48.315>uses <00:07:48.490>hooks <00:07:48.664>inside

157
00:07:51.285 --> 00:07:54.025
<00:07:51.284>so <00:07:51.440>we <00:07:51.596>can <00:07:51.751>enjoy <00:07:51.907>all <00:07:52.062>the <00:07:52.218>benefits, <00:07:52.373>uh, <00:07:52.529>of <00:07:52.684>hooks.

158
00:07:54.525 --> 00:07:57.625
<00:07:54.525>And <00:07:54.652>also <00:07:54.779>we <00:07:54.906>will <00:07:55.034>manage <00:07:55.161>our <00:07:55.288>local <00:07:55.415>state <00:07:55.543>the <00:07:55.670>same <00:07:55.797>way <00:07:55.924>we

159
00:07:57.625 --> 00:07:58.985
<00:07:57.625>manage <00:07:58.033>our <00:07:58.441>global <00:07:58.849>state.

160
00:08:01.565 --> 00:08:03.905
<00:08:01.565>So <00:08:01.844>before <00:08:02.125>looking <00:08:02.405>at <00:08:02.685>the <00:08:02.965>solution,

161
00:08:04.505 --> 00:08:05.585
<00:08:04.505>I <00:08:04.667>want <00:08:04.829>to <00:08:04.991>tell <00:08:05.152>you <00:08:05.315>a <00:08:05.477>story.

162
00:08:06.025 --> 00:08:09.825
<00:08:06.025>A <00:08:06.141>few <00:08:06.258>days <00:08:06.375>ago <00:08:06.491>I <00:08:06.608>ran, <00:08:06.724>uh, <00:08:06.841>I <00:08:06.958>logged <00:08:07.075>into <00:08:07.191>my <00:08:07.308>Facebook <00:08:07.424>account

163
00:08:10.365 --> 00:08:12.585
<00:08:10.365>and <00:08:10.565>I <00:08:10.765>saw <00:08:10.965>an <00:08:11.165>invitation <00:08:11.365>f <00:08:11.565>from <00:08:11.765>Facebook

164
00:08:12.605 --> 00:08:14.945
<00:08:12.605>to <00:08:12.885>try <00:08:13.165>their <00:08:13.445>new <00:08:13.725>UI <00:08:14.005>experience.

165
00:08:15.525 --> 00:08:17.025
<00:08:15.525>So <00:08:15.862>obviously <00:08:16.200>I <00:08:16.537>opted <00:08:16.875>in

166
00:08:17.325 --> 00:08:19.825
<00:08:17.325>and <00:08:17.480>the <00:08:17.636>first <00:08:17.791>thing <00:08:17.947>I <00:08:18.102>did <00:08:18.258>as <00:08:18.413>a <00:08:18.569>developer <00:08:18.724>was

167
00:08:20.285 --> 00:08:21.745
<00:08:20.285>to <00:08:20.613>open <00:08:20.942>the <00:08:21.270>developer <00:08:21.599>tools

168
00:08:22.045 --> 00:08:25.785
<00:08:22.045>and <00:08:22.245>look <00:08:22.445>at <00:08:22.645>the <00:08:22.845>React, <00:08:23.045>uh, <00:08:23.245>components <00:08:23.445>inspector.

169
00:08:26.885 --> 00:08:31.065
<00:08:26.885>And <00:08:27.012>what <00:08:27.139>I <00:08:27.266>saw <00:08:27.394>was <00:08:27.521>lots <00:08:27.648>of, <00:08:27.775>lots <00:08:27.903>of, <00:08:28.030>lots <00:08:28.157>of, <00:08:28.284>uh,

170
00:08:31.065 --> 00:08:35.425
<00:08:31.065>context <00:08:31.265>providers <00:08:31.465>nested <00:08:31.665>one <00:08:31.865>inside, <00:08:32.064>uh, <00:08:32.265>each <00:08:32.465>other.

171
00:08:37.045 --> 00:08:41.085
<00:08:37.044>Um, <00:08:37.324>so <00:08:37.604>I <00:08:37.885>wasn't <00:08:38.164>very <00:08:38.444>surprised,

172
00:08:41.085 --> 00:08:42.525
<00:08:41.085>but <00:08:41.344>I <00:08:41.603>was <00:08:41.862>a <00:08:42.121>bit <00:08:42.381>surprised.

173
00:08:43.185 --> 00:08:46.805
<00:08:43.184>Um, <00:08:43.324>so <00:08:43.464>it <00:08:43.604>appears <00:08:43.744>that <00:08:43.885>Facebook, <00:08:44.025>it's <00:08:44.164>a <00:08:44.305>very <00:08:44.444>big, <00:08:44.584>uh,

174
00:08:46.905 --> 00:08:49.045
<00:08:46.905>client <00:08:47.185>side <00:08:47.464>application <00:08:47.745>is <00:08:48.025>managing <00:08:48.305>state

175
00:08:49.745 --> 00:08:52.925
<00:08:49.745>or <00:08:49.885>probably <00:08:50.025>a <00:08:50.165>lot <00:08:50.305>of <00:08:50.445>it's <00:08:50.585>state, <00:08:50.725>shared <00:08:50.865>state <00:08:51.005>using <00:08:51.145>context.

176
00:08:54.345 --> 00:08:56.245
<00:08:54.345>So <00:08:54.578>if <00:08:54.811>Facebook <00:08:55.045>can, <00:08:55.278>why <00:08:55.511>can't <00:08:55.745>I?

177
00:08:56.505 --> 00:08:59.245
<00:08:56.505>So <00:08:56.680>let's <00:08:56.855>examine <00:08:57.030>how <00:08:57.205>it <00:08:57.380>looks <00:08:57.555>with <00:08:57.730>React <00:08:57.905>context.

178
00:08:59.865 --> 00:09:03.485
<00:08:59.865>So <00:09:00.005>first <00:09:00.145>of <00:09:00.285>all, <00:09:00.425>uh, <00:09:00.565>when <00:09:00.705>you <00:09:00.845>manage <00:09:00.985>a <00:09:01.125>shared <00:09:01.265>state

179
00:09:03.485 --> 00:09:06.685
<00:09:03.485>with <00:09:03.685>React <00:09:03.885>context, <00:09:04.085>it's <00:09:04.285>still <00:09:04.485>local <00:09:04.685>component <00:09:04.885>state.

180
00:09:06.955 --> 00:09:09.165
<00:09:06.955>It's <00:09:07.110>the <00:09:07.266>same <00:09:07.421>state <00:09:07.577>that <00:09:07.732>is <00:09:07.888>local <00:09:08.043>to <00:09:08.199>a <00:09:08.355>component.

181
00:09:09.665 --> 00:09:13.405
<00:09:09.665>Now <00:09:09.805>it's <00:09:09.944>local <00:09:10.084>to <00:09:10.224>a <00:09:10.365>provider, <00:09:10.505>which <00:09:10.645>is <00:09:10.785>also <00:09:10.925>a <00:09:11.064>component.

182
00:09:13.745 --> 00:09:15.445
<00:09:13.745>So <00:09:13.945>you <00:09:14.145>manage <00:09:14.345>the <00:09:14.545>state <00:09:14.745>the <00:09:14.945>same <00:09:15.145>way,

183
00:09:15.445 --> 00:09:18.925
<00:09:15.445>and <00:09:15.572>it's <00:09:15.699>also <00:09:15.826>easy <00:09:15.954>to <00:09:16.081>move <00:09:16.208>it <00:09:16.335>from <00:09:16.463>being <00:09:16.590>local, <00:09:16.717>uh, <00:09:16.845>state

184
00:09:19.105 --> 00:09:20.925
<00:09:19.105>to <00:09:19.455>being <00:09:19.805>a <00:09:20.155>shared <00:09:20.505>state.

185
00:09:22.705 --> 00:09:23.925
<00:09:22.705>And <00:09:22.924>then <00:09:23.144>you <00:09:23.363>can <00:09:23.583>consume <00:09:23.803>it

186
00:09:24.175 --> 00:09:26.525
<00:09:24.175>where <00:09:24.454>directly <00:09:24.734>wherever <00:09:25.015>you <00:09:25.295>want, <00:09:25.574>uh,

187
00:09:26.905 --> 00:09:28.885
<00:09:26.905>in <00:09:27.185>the <00:09:27.464>componentry <00:09:27.745>below <00:09:28.025>this <00:09:28.305>provider.

188
00:09:32.185 --> 00:09:33.685
<00:09:32.185>So <00:09:32.635>all <00:09:33.084>in <00:09:33.535>all,

189
00:09:33.685 --> 00:09:36.885
<00:09:33.685>it <00:09:33.824>looks <00:09:33.964>like <00:09:34.104>React <00:09:34.244>contact <00:09:34.385>context <00:09:34.525>is <00:09:34.665>a <00:09:34.805>good, <00:09:34.944>uh, <00:09:35.084>candidate

190
00:09:36.885 --> 00:09:39.845
<00:09:36.885>for <00:09:37.118>state <00:09:37.351>management, <00:09:37.585>uh, <00:09:37.818>using <00:09:38.051>hooks, <00:09:38.285>uh,

191
00:09:39.845 --> 00:09:41.045
<00:09:39.845>because <00:09:40.205>it <00:09:40.564>uses <00:09:40.925>hooks

192
00:09:41.045 --> 00:09:43.845
<00:09:41.045>because <00:09:41.219>it's <00:09:41.395>easy <00:09:41.569>to <00:09:41.745>migrate <00:09:41.920>from <00:09:42.094>local <00:09:42.270>to <00:09:42.444>shared,

193
00:09:44.545 --> 00:09:47.085
<00:09:44.545>and <00:09:44.672>also <00:09:44.799>it's <00:09:44.926>a <00:09:45.054>native <00:09:45.181>part <00:09:45.308>of <00:09:45.435>React, <00:09:45.563>which <00:09:45.690>is <00:09:45.817>a <00:09:45.944>nice,

194
00:09:47.225 --> 00:09:48.365
<00:09:47.225>uh, <00:09:47.567>benefit <00:09:47.909>to <00:09:48.251>have.

195
00:09:50.095 --> 00:09:53.045
<00:09:50.095>Let's <00:09:50.235>talk <00:09:50.375>about <00:09:50.515>some <00:09:50.655>of <00:09:50.795>the <00:09:50.935>drawbacks <00:09:51.075>that <00:09:51.215>the <00:09:51.355>context <00:09:51.495>has.

196
00:09:53.905 --> 00:09:57.205
<00:09:53.905>So <00:09:54.032>when <00:09:54.159>we <00:09:54.286>start <00:09:54.414>with <00:09:54.541>a <00:09:54.668>small <00:09:54.795>application, <00:09:54.923>we <00:09:55.050>see <00:09:55.177>it <00:09:55.305>less,

197
00:09:57.225 --> 00:10:00.845
<00:09:57.225>but <00:09:57.365>as <00:09:57.505>our <00:09:57.645>application <00:09:57.785>grows, <00:09:57.925>we <00:09:58.065>add <00:09:58.205>more <00:09:58.345>and <00:09:58.485>more <00:09:58.625>providers

198
00:10:00.845 --> 00:10:04.525
<00:10:00.845>because <00:10:00.972>we <00:10:01.099>have <00:10:01.226>more <00:10:01.354>and <00:10:01.481>more <00:10:01.608>shared <00:10:01.735>state, <00:10:01.863>uh, <00:10:01.990>until <00:10:02.117>we <00:10:02.245>get

199
00:10:04.525 --> 00:10:06.445
<00:10:04.525>to <00:10:04.875>a <00:10:05.225>very, <00:10:05.574>uh, <00:10:05.925>deep

200
00:10:06.445 --> 00:10:09.925
<00:10:06.445>and <00:10:06.725>narrow <00:10:07.005>hierarchy <00:10:07.285>of <00:10:07.565>providers, <00:10:07.845>uh,

201
00:10:09.925 --> 00:10:12.285
<00:10:09.925>which <00:10:10.099>makes <00:10:10.275>it <00:10:10.449>a <00:10:10.625>little, <00:10:10.800>uh, <00:10:10.974>annoying <00:10:11.150>to <00:10:11.324>debug

202
00:10:12.285 --> 00:10:16.405
<00:10:12.285>because <00:10:12.425>our <00:10:12.564>app, <00:10:12.704>our <00:10:12.844>real <00:10:12.985>app <00:10:13.125>components <00:10:13.265>only <00:10:13.405>start <00:10:13.545>way <00:10:13.685>deep

203
00:10:16.405 --> 00:10:20.325
<00:10:16.405>inside <00:10:16.579>the <00:10:16.755>hierarchy, <00:10:16.930>but <00:10:17.105>also <00:10:17.280>introduces <00:10:17.454>a <00:10:17.630>new <00:10:17.805>problem,

204
00:10:20.375 --> 00:10:23.045
<00:10:20.375>which <00:10:20.655>is <00:10:20.935>sometimes <00:10:21.215>our <00:10:21.495>providers, <00:10:21.775>uh,

205
00:10:23.075 --> 00:10:25.045
<00:10:23.075>require <00:10:23.425>values <00:10:23.775>from <00:10:24.125>other <00:10:24.475>providers,

206
00:10:25.745 --> 00:10:29.485
<00:10:25.745>and <00:10:25.872>now <00:10:25.999>they <00:10:26.126>can <00:10:26.254>only <00:10:26.381>use <00:10:26.508>providers <00:10:26.635>that, <00:10:26.763>that <00:10:26.890>are <00:10:27.017>on <00:10:27.145>top

207
00:10:29.485 --> 00:10:30.485
<00:10:29.485>of <00:10:29.710>them <00:10:29.935>in <00:10:30.160>the <00:10:30.385>hierarchy.

208
00:10:30.545 --> 00:10:34.525
<00:10:30.545>So <00:10:30.700>we <00:10:30.856>need <00:10:31.011>to <00:10:31.167>start <00:10:31.322>carefully <00:10:31.478>reorganizing <00:10:31.633>the <00:10:31.789>providers <00:10:31.944>in

209
00:10:34.525 --> 00:10:36.645
<00:10:34.525>a <00:10:34.699>way <00:10:34.875>that <00:10:35.050>they <00:10:35.225>can <00:10:35.400>depend <00:10:35.574>on <00:10:35.750>each <00:10:35.925>other,

210
00:10:37.345 --> 00:10:40.445
<00:10:37.345>and <00:10:37.485>sometimes <00:10:37.625>we <00:10:37.765>have <00:10:37.905>to <00:10:38.045>move <00:10:38.185>them <00:10:38.325>around <00:10:38.465>and <00:10:38.605>things <00:10:38.745>break

211
00:10:40.445 --> 00:10:42.365
<00:10:40.445>because <00:10:40.600>they <00:10:40.756>can't <00:10:40.911>find <00:10:41.067>the <00:10:41.222>provider <00:10:41.378>on <00:10:41.533>top <00:10:41.689>of <00:10:41.845>them.

212
00:10:42.825 --> 00:10:47.245
<00:10:42.825>So <00:10:42.941>basically <00:10:43.058>what <00:10:43.175>we <00:10:43.291>do <00:10:43.408>is <00:10:43.525>we, <00:10:43.641>uh, <00:10:43.758>it's <00:10:43.875>our <00:10:43.991>state <00:10:44.108>is <00:10:44.225>coupled

213
00:10:47.245 --> 00:10:49.205
<00:10:47.245>to <00:10:47.445>the <00:10:47.645>componentry, <00:10:47.845>which <00:10:48.045>is <00:10:48.245>a <00:10:48.445>bit <00:10:48.645>limiting.

214
00:10:50.945 --> 00:10:55.605
<00:10:50.945>Um, <00:10:51.085>a <00:10:51.225>a <00:10:51.365>bigger <00:10:51.505>challenge <00:10:51.645>I <00:10:51.785>would <00:10:51.925>say, <00:10:52.065>uh, <00:10:52.205>is <00:10:52.345>performance.

215
00:10:55.825 --> 00:11:00.685
<00:10:55.825>So <00:10:55.980>a <00:10:56.136>provider <00:10:56.291>is <00:10:56.447>just <00:10:56.602>a <00:10:56.758>component <00:10:56.913>with <00:10:57.069>local <00:10:57.225>state.

216
00:11:00.745 --> 00:11:04.205
<00:11:00.745>So <00:11:00.945>whenever <00:11:01.145>the <00:11:01.345>state <00:11:01.545>changes, <00:11:01.745>the <00:11:01.945>provider <00:11:02.145>rear-ends

217
00:11:04.505 --> 00:11:06.645
<00:11:04.505>and <00:11:04.705>react <00:11:04.905>by <00:11:05.105>default <00:11:05.305>re <00:11:05.505>renders <00:11:05.705>the <00:11:05.905>entire

218
00:11:06.645 --> 00:11:07.765
<00:11:06.645>componentry <00:11:07.149>below <00:11:07.653>it.

219
00:11:08.185 --> 00:11:10.765
<00:11:08.185>So <00:11:08.359>we <00:11:08.535>need <00:11:08.709>to <00:11:08.885>start <00:11:09.060>introducing <00:11:09.234>a <00:11:09.410>memoirs <00:11:09.584>component

220
00:11:10.875 --> 00:11:14.005
<00:11:10.875>with <00:11:11.075>React <00:11:11.275>memo <00:11:11.475>to <00:11:11.675>avoid, <00:11:11.875>uh, <00:11:12.075>re <00:11:12.275>rendering.

221
00:11:15.585 --> 00:11:17.685
<00:11:15.585>And <00:11:15.740>the <00:11:15.896>third <00:11:16.051>part, <00:11:16.207>which <00:11:16.362>is <00:11:16.518>probably <00:11:16.673>the <00:11:16.829>most <00:11:16.985>important

222
00:11:17.825 --> 00:11:20.005
<00:11:17.825>one, <00:11:17.965>is <00:11:18.105>that <00:11:18.245>there's <00:11:18.385>no <00:11:18.525>way <00:11:18.665>to <00:11:18.805>bail <00:11:18.945>out <00:11:19.085>of <00:11:19.225>render.

223
00:11:20.145 --> 00:11:22.525
<00:11:20.145>So <00:11:20.378>when <00:11:20.611>you <00:11:20.845>use <00:11:21.078>a <00:11:21.311>context, <00:11:21.545>um,

224
00:11:23.345 --> 00:11:26.365
<00:11:23.345>you <00:11:23.472>can't <00:11:23.599>just <00:11:23.726>use <00:11:23.854>one <00:11:23.981>property <00:11:24.108>of <00:11:24.235>the <00:11:24.363>value <00:11:24.490>you <00:11:24.617>have <00:11:24.745>to,

225
00:11:26.585 --> 00:11:28.805
<00:11:26.585>uh, <00:11:26.818>get <00:11:27.051>every <00:11:27.285>time <00:11:27.518>the <00:11:27.751>value <00:11:27.985>changes,

226
00:11:29.115 --> 00:11:30.405
<00:11:29.115>your <00:11:29.502>component <00:11:29.889>will <00:11:30.276>rear-end.

227
00:11:30.405 --> 00:11:31.965
<00:11:30.405>There's <00:11:30.605>no <00:11:30.805>way <00:11:31.005>to <00:11:31.204>bail <00:11:31.405>out <00:11:31.605>a <00:11:31.805>render.

228
00:11:32.785 --> 00:11:36.645
<00:11:32.785>And <00:11:32.940>also <00:11:33.096>you <00:11:33.251>have <00:11:33.407>to <00:11:33.562>be <00:11:33.718>very <00:11:33.873>careful, <00:11:34.029>um, <00:11:34.185>not

229
00:11:36.825 --> 00:11:38.805
<00:11:36.825>to <00:11:37.058>provide <00:11:37.291>new <00:11:37.525>reference <00:11:37.758>to <00:11:37.991>the <00:11:38.225>value,

230
00:11:38.805 --> 00:11:39.925
<00:11:38.805>even <00:11:39.056>if <00:11:39.309>it <00:11:39.560>didn't <00:11:39.813>change.

231
00:11:41.145 --> 00:11:43.485
<00:11:41.145>Um, <00:11:41.425>otherwise, <00:11:41.704>all <00:11:41.985>of <00:11:42.265>the <00:11:42.545>components

232
00:11:43.485 --> 00:11:45.485
<00:11:43.485>that <00:11:43.765>use <00:11:44.045>this <00:11:44.325>context <00:11:44.605>will <00:11:44.885>re-render.

233
00:11:47.705 --> 00:11:51.965
<00:11:47.705>So <00:11:47.938>I'm <00:11:48.171>saying <00:11:48.405>that <00:11:48.638>it's, <00:11:48.871>uh, <00:11:49.105>challenging

234
00:11:52.025 --> 00:11:54.965
<00:11:52.025>to <00:11:52.199>manage <00:11:52.375>a <00:11:52.550>large <00:11:52.725>scale <00:11:52.900>application <00:11:53.074>using <00:11:53.250>a <00:11:53.425>context,

235
00:11:55.425 --> 00:11:58.725
<00:11:55.425>but <00:11:55.580>we <00:11:55.736>just <00:11:55.891>saw <00:11:56.047>that <00:11:56.202>Facebook <00:11:56.358>is <00:11:56.513>using <00:11:56.669>context <00:11:56.824>heavily

236
00:11:59.305 --> 00:12:01.005
<00:11:59.305>inside <00:12:00.005>its <00:12:00.704>application.

237
00:12:01.145 --> 00:12:04.325
<00:12:01.145>So <00:12:01.378>I <00:12:01.611>was <00:12:01.845>wondering, <00:12:02.078>maybe <00:12:02.311>I'm <00:12:02.545>wrong.

238
00:12:05.665 --> 00:12:06.885
<00:12:05.665>So <00:12:05.939>I <00:12:06.214>tweeted <00:12:06.488>about <00:12:06.763>it.

239
00:12:07.425 --> 00:12:10.765
<00:12:07.425>Um, <00:12:07.775>and <00:12:08.125>I <00:12:08.474>mentioned <00:12:08.824>some

240
00:12:10.765 --> 00:12:12.485
<00:12:10.765>of <00:12:11.045>the <00:12:11.324>React <00:12:11.605>core <00:12:11.885>team <00:12:12.165>members,

241
00:12:13.025 --> 00:12:17.335
<00:12:13.025>and <00:12:13.141>this <00:12:13.258>is <00:12:13.375>one <00:12:13.491>of <00:12:13.608>the <00:12:13.725>best <00:12:13.841>part <00:12:13.958>about <00:12:14.074>the <00:12:14.191>React <00:12:14.308>core <00:12:14.425>team.

242
00:12:17.335 --> 00:12:20.375
<00:12:17.335>They're <00:12:17.490>really <00:12:17.646>available <00:12:17.801>on <00:12:17.957>social <00:12:18.112>media <00:12:18.268>and <00:12:18.423>on <00:12:18.579>GI <00:12:18.735>lab,

243
00:12:20.635 --> 00:12:21.895
<00:12:20.635>and <00:12:20.824>uh, <00:12:21.013>I <00:12:21.202>think <00:12:21.391>it's <00:12:21.579>really <00:12:21.769>great

244
00:12:21.955 --> 00:12:23.175
<00:12:21.955>for <00:12:22.229>the, <00:12:22.504>for <00:12:22.778>the <00:12:23.053>community.

245
00:12:23.875 --> 00:12:26.455
<00:12:23.875>So <00:12:24.108>Andrew <00:12:24.341>Clark <00:12:24.575>answered <00:12:24.808>that <00:12:25.041>pretty <00:12:25.275>quickly

246
00:12:27.315 --> 00:12:29.655
<00:12:27.315>and <00:12:27.665>he <00:12:28.015>wrote <00:12:28.365>back, <00:12:28.715>um,

247
00:12:30.645 --> 00:12:33.735
<00:12:30.645>that <00:12:30.845>indeed <00:12:31.045>they <00:12:31.245>have <00:12:31.444>observed <00:12:31.645>performance <00:12:31.845>problems <00:12:32.045>when

248
00:12:33.735 --> 00:12:35.975
<00:12:33.735>propagating <00:12:34.085>context <00:12:34.435>to <00:12:34.785>large <00:12:35.135>trees.

249
00:12:36.475 --> 00:12:37.655
<00:12:36.475>So <00:12:36.829>I <00:12:37.183>wasn't <00:12:37.537>delusional.

250
00:12:37.665 --> 00:12:38.975
<00:12:37.665>These <00:12:38.058>problems <00:12:38.451>do <00:12:38.844>exist

251
00:12:40.955 --> 00:12:44.135
<00:12:40.955>and <00:12:41.071>the <00:12:41.188>good <00:12:41.305>thing <00:12:41.421>is <00:12:41.538>that <00:12:41.655>he <00:12:41.771>said <00:12:41.888>we <00:12:42.005>do <00:12:42.121>have <00:12:42.238>a <00:12:42.355>plan,

252
00:12:44.355 --> 00:12:46.375
<00:12:44.355>but <00:12:44.635>it'll <00:12:44.915>require <00:12:45.195>a <00:12:45.475>significant <00:12:45.755>refactor.

253
00:12:46.435 --> 00:12:47.655
<00:12:46.435>So <00:12:46.654>it <00:12:46.874>might <00:12:47.093>take <00:12:47.313>a <00:12:47.533>while.

254
00:12:48.275 --> 00:12:50.935
<00:12:48.275>And <00:12:48.402>then <00:12:48.529>he <00:12:48.656>road <00:12:48.784>that <00:12:48.911>his <00:12:49.038>current <00:12:49.165>preference <00:12:49.293>would <00:12:49.420>be <00:12:49.547>to <00:12:49.675>try

255
00:12:50.935 --> 00:12:53.695
<00:12:50.935>to <00:12:51.109>tackle <00:12:51.285>this <00:12:51.459>sometime <00:12:51.635>within <00:12:51.810>the <00:12:51.984>next <00:12:52.160>few <00:12:52.334>months.

256
00:12:54.555 --> 00:12:57.215
<00:12:54.555>Um, <00:12:54.729>we <00:12:54.905>don't <00:12:55.079>really <00:12:55.255>know <00:12:55.430>when <00:12:55.604>it'll <00:12:55.780>be <00:12:55.954>ready,

257
00:12:57.355 --> 00:13:00.735
<00:12:57.355>but <00:12:57.510>what, <00:12:57.666>uh, <00:12:57.821>Andrew <00:12:57.977>is <00:12:58.132>referring <00:12:58.288>to <00:12:58.443>is <00:12:58.599>this <00:12:58.755>request

258
00:13:00.755 --> 00:13:05.135
<00:13:00.755>for <00:13:00.910>change, <00:13:01.066>um, <00:13:01.221>which <00:13:01.377>is <00:13:01.532>a <00:13:01.688>publicly <00:13:01.843>available <00:13:01.999>on <00:13:02.155>GitHub.

259
00:13:05.135 --> 00:13:07.335
<00:13:05.135>You <00:13:05.368>can <00:13:05.601>look <00:13:05.835>at <00:13:06.068>it <00:13:06.301>and <00:13:06.535>basically

260
00:13:07.605 --> 00:13:11.815
<00:13:07.605>what <00:13:07.745>this <00:13:07.885>poly <00:13:08.025>press <00:13:08.165>is <00:13:08.305>about <00:13:08.445>is <00:13:08.585>adding <00:13:08.725>a <00:13:08.865>second <00:13:09.005>parameter

261
00:13:11.815 --> 00:13:14.975
<00:13:11.815>to <00:13:11.990>use <00:13:12.165>context, <00:13:12.340>uh, <00:13:12.515>which <00:13:12.690>is <00:13:12.865>just <00:13:13.040>a <00:13:13.215>selector,

262
00:13:14.985 --> 00:13:17.175
<00:13:14.985>which <00:13:15.185>will <00:13:15.385>allow <00:13:15.585>you <00:13:15.785>to <00:13:15.985>use <00:13:16.185>a <00:13:16.385>context

263
00:13:17.635 --> 00:13:19.735
<00:13:17.635>and <00:13:17.835>just <00:13:18.035>select <00:13:18.235>whatever <00:13:18.435>WA <00:13:18.635>values <00:13:18.835>you <00:13:19.035>want

264
00:13:19.795 --> 00:13:21.775
<00:13:19.795>and <00:13:20.074>only <00:13:20.354>if <00:13:20.635>they <00:13:20.915>change, <00:13:21.194>um,

265
00:13:22.205 --> 00:13:23.895
<00:13:22.205>then <00:13:22.555>your <00:13:22.905>component <00:13:23.255>will <00:13:23.605>re-render.

266
00:13:24.195 --> 00:13:26.535
<00:13:24.195>So <00:13:24.428>it'll <00:13:24.661>solve <00:13:24.895>many <00:13:25.128>of <00:13:25.361>the, <00:13:25.595>uh,

267
00:13:26.535 --> 00:13:29.415
<00:13:26.535>performer <00:13:26.735>prob <00:13:26.935>performance <00:13:27.135>problems <00:13:27.334>with, <00:13:27.535>uh, <00:13:27.735>react <00:13:27.935>context.

268
00:13:32.115 --> 00:13:35.775
<00:13:32.115>So <00:13:32.290>to <00:13:32.465>summarize, <00:13:32.640>react <00:13:32.815>context <00:13:32.990>for <00:13:33.165>large <00:13:33.340>applications, <00:13:33.515>um,

269
00:13:36.155 --> 00:13:38.815
<00:13:36.155>the <00:13:36.310>drawbacks <00:13:36.466>are <00:13:36.621>that <00:13:36.777>the <00:13:36.932>architecture <00:13:37.088>is <00:13:37.243>a <00:13:37.399>bit <00:13:37.555>limiting

270
00:13:38.815 --> 00:13:42.175
<00:13:38.815>because <00:13:38.970>you <00:13:39.126>have <00:13:39.281>your <00:13:39.437>state <00:13:39.592>is <00:13:39.748>coupled <00:13:39.903>to <00:13:40.059>your <00:13:40.215>componentry

271
00:13:42.795 --> 00:13:44.415
<00:13:42.795>and <00:13:43.074>the <00:13:43.354>performance <00:13:43.635>is <00:13:43.915>an <00:13:44.194>issue.

272
00:13:44.555 --> 00:13:47.175
<00:13:44.555>For <00:13:44.729>now. <00:13:44.905>We <00:13:45.079>are <00:13:45.255>really <00:13:45.430>holding, <00:13:45.604>crossing <00:13:45.780>our <00:13:45.954>fingers

273
00:13:47.245 --> 00:13:51.135
<00:13:47.245>that <00:13:47.372>this <00:13:47.499>will <00:13:47.626>be <00:13:47.754>solved <00:13:47.881>in <00:13:48.008>the <00:13:48.135>next <00:13:48.263>few <00:13:48.390>months <00:13:48.517>or <00:13:48.645>year.

274
00:13:52.385 --> 00:13:55.975
<00:13:52.385>Which <00:13:52.540>brings <00:13:52.696>me <00:13:52.851>to <00:13:53.007>the <00:13:53.162>third <00:13:53.318>option, <00:13:53.473>which <00:13:53.629>is <00:13:53.785>something

275
00:13:55.975 --> 00:13:59.095
<00:13:55.975>that, <00:13:56.130>uh, <00:13:56.286>a <00:13:56.441>thought <00:13:56.597>experiment <00:13:56.752>that <00:13:56.908>I <00:13:57.063>started <00:13:57.219>doing, <00:13:57.375>uh,

276
00:13:59.095 --> 00:14:02.175
<00:13:59.095>with <00:13:59.270>a <00:13:59.445>colleague <00:13:59.620>of <00:13:59.795>mine <00:13:59.970>called <00:14:00.145>the <00:14:00.320>Mayan, <00:14:00.495>uh,

277
00:14:02.465 --> 00:14:04.175
<00:14:02.465>about <00:14:02.665>one <00:14:02.865>and <00:14:03.065>a <00:14:03.265>half, <00:14:03.465>two <00:14:03.665>years <00:14:03.865>ago.

278
00:14:04.755 --> 00:14:07.615
<00:14:04.755>And <00:14:04.895>we <00:14:05.035>thought, <00:14:05.175>what <00:14:05.314>will <00:14:05.455>be <00:14:05.595>the <00:14:05.735>ideal <00:14:05.875>API <00:14:06.015>for <00:14:06.155>us?

279
00:14:08.515 --> 00:14:11.815
<00:14:08.515>So <00:14:08.642>first <00:14:08.769>of <00:14:08.896>all, <00:14:09.024>uh, <00:14:09.151>we <00:14:09.278>want <00:14:09.405>the <00:14:09.533>state <00:14:09.660>management <00:14:09.787>to <00:14:09.915>be

280
00:14:11.815 --> 00:14:14.775
<00:14:11.815>to <00:14:12.015>handle <00:14:12.215>immutable <00:14:12.415>objects, <00:14:12.615>so <00:14:12.815>it'll <00:14:13.015>play <00:14:13.215>nicely

281
00:14:14.925 --> 00:14:17.655
<00:14:14.925>with <00:14:15.158>other <00:14:15.391>tools <00:14:15.625>and <00:14:15.858>react <00:14:16.091>change <00:14:16.324>detection.

282
00:14:18.085 --> 00:14:21.215
<00:14:18.085>Also, <00:14:18.240>we <00:14:18.396>want <00:14:18.551>to <00:14:18.707>allow <00:14:18.862>for <00:14:19.018>modularity <00:14:19.173>of <00:14:19.329>our <00:14:19.485>application,

283
00:14:21.795 --> 00:14:23.415
<00:14:21.795>not <00:14:22.074>just <00:14:22.354>in <00:14:22.635>the <00:14:22.915>micro <00:14:23.194>level,

284
00:14:23.435 --> 00:14:26.855
<00:14:23.435>but <00:14:23.562>also <00:14:23.689>in <00:14:23.816>the <00:14:23.944>micro <00:14:24.071>level, <00:14:24.198>uh, <00:14:24.325>that <00:14:24.453>we <00:14:24.580>can <00:14:24.707>create <00:14:24.834>modules

285
00:14:27.125 --> 00:14:30.535
<00:14:27.125>with <00:14:27.280>shared <00:14:27.436>state <00:14:27.591>that <00:14:27.747>we <00:14:27.902>can <00:14:28.058>plug <00:14:28.213>into <00:14:28.369>other <00:14:28.525>applications

286
00:14:30.635 --> 00:14:32.935
<00:14:30.635>or <00:14:30.985>exporters <00:14:31.335>third <00:14:31.685>party <00:14:32.035>libraries.

287
00:14:33.995 --> 00:14:36.695
<00:14:33.995>We <00:14:34.170>want <00:14:34.345>the <00:14:34.520>state <00:14:34.695>management <00:14:34.870>to <00:14:35.045>use <00:14:35.220>hooks <00:14:35.395>inside

288
00:14:36.955 --> 00:14:39.535
<00:14:36.955>and <00:14:37.155>we <00:14:37.355>want <00:14:37.555>it <00:14:37.755>to <00:14:37.955>be <00:14:38.155>gradually <00:14:38.355>adoptable.

289
00:14:41.595 --> 00:14:45.295
<00:14:41.595>So <00:14:41.770>we <00:14:41.945>did <00:14:42.120>some <00:14:42.295>attempts <00:14:42.470>for, <00:14:42.645>uh, <00:14:42.820>this <00:14:42.995>API.

290
00:14:45.755 --> 00:14:48.775
<00:14:45.755>So <00:14:45.955>our <00:14:46.155>first <00:14:46.355>attempt <00:14:46.555>was <00:14:46.755>to <00:14:46.955>use <00:14:47.155>keys.

291
00:14:49.435 --> 00:14:52.005
<00:14:49.435>So <00:14:49.609>we <00:14:49.785>said <00:14:49.959>we <00:14:50.135>want <00:14:50.310>to <00:14:50.484>use <00:14:50.660>a <00:14:50.834>state

292
00:14:52.585 --> 00:14:56.125
<00:14:52.585>and <00:14:52.725>we <00:14:52.865>want <00:14:53.005>to <00:14:53.145>use <00:14:53.285>the <00:14:53.425>same <00:14:53.565>state <00:14:53.705>in <00:14:53.845>different <00:14:53.985>components.

293
00:14:56.665 --> 00:14:58.525
<00:14:56.665>How <00:14:56.820>can <00:14:56.976>we <00:14:57.131>know <00:14:57.287>that <00:14:57.442>this <00:14:57.598>is <00:14:57.753>the <00:14:57.909>same <00:14:58.064>state?

294
00:14:59.175 --> 00:15:02.165
<00:14:59.175>Let's <00:14:59.330>give <00:14:59.486>it <00:14:59.641>a <00:14:59.797>name. <00:14:59.952>So <00:15:00.108>instead <00:15:00.263>of <00:15:00.419>use <00:15:00.574>state,

295
00:15:02.345 --> 00:15:04.405
<00:15:02.345>use <00:15:02.578>global <00:15:02.811>state, <00:15:03.045>give <00:15:03.278>it <00:15:03.511>the <00:15:03.745>name

296
00:15:04.785 --> 00:15:06.205
<00:15:04.785>and <00:15:04.967>then <00:15:05.150>you <00:15:05.332>give <00:15:05.515>it <00:15:05.697>the <00:15:05.880>initial <00:15:06.063>value.

297
00:15:07.785 --> 00:15:10.805
<00:15:07.785>The <00:15:07.925>problems <00:15:08.064>with <00:15:08.204>this <00:15:08.344>is, <00:15:08.485>first <00:15:08.625>of <00:15:08.765>all, <00:15:08.905>it's <00:15:09.045>using <00:15:09.185>keys.

298
00:15:11.145 --> 00:15:12.965
<00:15:11.145>And <00:15:11.319>so <00:15:11.495>it <00:15:11.670>comes <00:15:11.845>with <00:15:12.020>all <00:15:12.194>of <00:15:12.370>the <00:15:12.545>problems

299
00:15:12.965 --> 00:15:13.965
<00:15:12.965>that <00:15:13.415>keys <00:15:13.865>introduced.

300
00:15:14.035 --> 00:15:16.565
<00:15:14.035>It's <00:15:14.235>not <00:15:14.435>so <00:15:14.635>easy <00:15:14.834>to, <00:15:15.035>uh, <00:15:15.235>reuse <00:15:15.435>this.

301
00:15:17.265 --> 00:15:19.365
<00:15:17.265>And <00:15:17.465>second <00:15:17.665>is <00:15:17.865>that <00:15:18.064>we <00:15:18.265>had <00:15:18.465>a <00:15:18.665>problem

302
00:15:19.595 --> 00:15:21.445
<00:15:19.595>with <00:15:20.295>initialization <00:15:20.995>code.

303
00:15:21.825 --> 00:15:24.765
<00:15:21.825>So <00:15:21.965>it <00:15:22.105>doesn't <00:15:22.245>make <00:15:22.385>sense <00:15:22.525>to <00:15:22.665>write <00:15:22.805>the <00:15:22.945>same <00:15:23.085>initial <00:15:23.225>value

304
00:15:25.125 --> 00:15:29.245
<00:15:25.125>whenever <00:15:25.280>you <00:15:25.436>use, <00:15:25.591>um, <00:15:25.747>the <00:15:25.902>use <00:15:26.058>global <00:15:26.213>state, <00:15:26.369>which <00:15:26.525>means

305
00:15:29.245 --> 00:15:30.245
<00:15:29.245>that <00:15:29.425>you <00:15:29.605>have <00:15:29.785>to <00:15:29.965>extract <00:15:30.145>it

306
00:15:30.245 --> 00:15:33.005
<00:15:30.245>and <00:15:30.445>put <00:15:30.645>it <00:15:30.845>somewhere <00:15:31.045>else, <00:15:31.245>which <00:15:31.445>means <00:15:31.645>also

307
00:15:33.005 --> 00:15:35.045
<00:15:33.005>that <00:15:33.285>you're <00:15:33.564>not <00:15:33.845>co-locating <00:15:34.125>your <00:15:34.405>code.

308
00:15:35.785 --> 00:15:39.885
<00:15:35.785>So <00:15:35.925>again, <00:15:36.064>we <00:15:36.204>are <00:15:36.344>not <00:15:36.485>really <00:15:36.625>using <00:15:36.765>hook's <00:15:36.905>benefits <00:15:37.045>if <00:15:37.185>we

309
00:15:40.465 --> 00:15:41.765
<00:15:40.465>if <00:15:40.757>we <00:15:41.050>try <00:15:41.342>this <00:15:41.635>approach.

310
00:15:43.465 --> 00:15:46.045
<00:15:43.465>So <00:15:43.640>we <00:15:43.815>thought, <00:15:43.990>okay, <00:15:44.165>we <00:15:44.340>need <00:15:44.515>to <00:15:44.690>somehow <00:15:44.865>recognize

311
00:15:46.765 --> 00:15:49.045
<00:15:46.765>that <00:15:46.939>we're <00:15:47.115>referring <00:15:47.290>to <00:15:47.465>the <00:15:47.640>same <00:15:47.814>state <00:15:47.990>from <00:15:48.165>different

312
00:15:49.045 --> 00:15:51.445
<00:15:49.045>components, <00:15:49.200>but <00:15:49.356>we <00:15:49.511>don't <00:15:49.667>want <00:15:49.822>to <00:15:49.978>use <00:15:50.133>strings <00:15:50.289>as <00:15:50.444>keys.

313
00:15:52.465 --> 00:15:55.485
<00:15:52.465>So <00:15:52.620>we <00:15:52.776>said, <00:15:52.931>okay, <00:15:53.087>let's <00:15:53.242>put <00:15:53.398>all <00:15:53.553>of <00:15:53.709>the <00:15:53.865>code

314
00:15:55.485 --> 00:15:58.765
<00:15:55.485>that <00:15:55.685>manages <00:15:55.885>the <00:15:56.085>reusable <00:15:56.285>state <00:15:56.485>in <00:15:56.685>a <00:15:56.885>function

315
00:15:59.145 --> 00:16:01.925
<00:15:59.145>and <00:15:59.285>the <00:15:59.425>function <00:15:59.564>itself <00:15:59.704>will <00:15:59.845>be <00:15:59.985>the <00:16:00.125>key <00:16:00.265>that <00:16:00.405>we <00:16:00.545>recognize.

316
00:16:03.705 --> 00:16:07.485
<00:16:03.705>So <00:16:03.905>in <00:16:04.105>this <00:16:04.305>approach, <00:16:04.505>you <00:16:04.705>create <00:16:04.905>a <00:16:05.105>function

317
00:16:07.485 --> 00:16:08.605
<00:16:07.485>that <00:16:07.737>is <00:16:07.989>like <00:16:08.241>a <00:16:08.493>store

318
00:16:09.465 --> 00:16:12.565
<00:16:09.465>and <00:16:09.665>you <00:16:09.865>manage <00:16:10.065>the <00:16:10.265>state <00:16:10.465>inside <00:16:10.665>using <00:16:10.865>hooks,

319
00:16:12.945 --> 00:16:16.805
<00:16:12.945>but <00:16:13.120>it's <00:16:13.295>not <00:16:13.470>the <00:16:13.645>react <00:16:13.820>hooks, <00:16:13.995>it's <00:16:14.170>our <00:16:14.345>implementation

320
00:16:16.805 --> 00:16:19.925
<00:16:16.805>of <00:16:16.960>hooks, <00:16:17.116>uh, <00:16:17.271>in <00:16:17.427>which <00:16:17.582>instead <00:16:17.738>of <00:16:17.893>calling <00:16:18.049>use <00:16:18.204>state,

321
00:16:20.065 --> 00:16:23.445
<00:16:20.065>you <00:16:20.240>call <00:16:20.415>reuse <00:16:20.590>state <00:16:20.765>instead <00:16:20.940>of <00:16:21.115>calling <00:16:21.290>use <00:16:21.465>effect,

322
00:16:23.445 --> 00:16:25.165
<00:16:23.445>you <00:16:23.725>call <00:16:24.005>reuse <00:16:24.285>effect, <00:16:24.565>et <00:16:24.845>cetera.

323
00:16:26.105 --> 00:16:28.845
<00:16:26.105>And <00:16:26.338>our <00:16:26.571>own <00:16:26.805>implementation <00:16:27.038>of <00:16:27.271>hooks, <00:16:27.505>uh,

324
00:16:28.915 --> 00:16:31.685
<00:16:28.915>doesn't <00:16:29.115>give <00:16:29.314>you <00:16:29.515>a <00:16:29.714>local <00:16:29.915>state <00:16:30.115>per <00:16:30.314>component.

325
00:16:31.825 --> 00:16:35.725
<00:16:31.825>It <00:16:32.000>gives <00:16:32.175>you <00:16:32.350>one, <00:16:32.525>uh, <00:16:32.700>shared <00:16:32.875>state <00:16:33.050>as <00:16:33.225>long

326
00:16:35.725 --> 00:16:38.525
<00:16:35.725>as <00:16:35.900>you <00:16:36.075>use <00:16:36.250>the <00:16:36.425>same <00:16:36.600>function <00:16:36.775>as <00:16:36.950>a <00:16:37.125>reference.

327
00:16:39.305 --> 00:16:42.805
<00:16:39.305>And <00:16:39.432>to <00:16:39.559>use <00:16:39.686>this <00:16:39.814>function <00:16:39.941>as <00:16:40.068>a <00:16:40.195>reusable <00:16:40.323>state, <00:16:40.450>you <00:16:40.577>call <00:16:40.704>use,

328
00:16:43.245 --> 00:16:44.525
<00:16:43.245>reuse, <00:16:44.396>uh,

329
00:16:44.865 --> 00:16:46.485
<00:16:44.865>and <00:16:45.215>pass <00:16:45.565>in <00:16:45.915>the <00:16:46.265>function

330
00:16:46.945 --> 00:16:49.925
<00:16:46.945>as <00:16:47.411>a <00:16:47.878>variable <00:16:48.345>parameter.

331
00:16:51.145 --> 00:16:54.285
<00:16:51.145>So <00:16:51.261>this <00:16:51.378>has, <00:16:51.495>uh, <00:16:51.611>we, <00:16:51.728>we <00:16:51.845>wrote <00:16:51.961>it <00:16:52.078>and <00:16:52.194>we <00:16:52.311>started <00:16:52.428>using <00:16:52.545>it

332
00:16:54.345 --> 00:16:56.205
<00:16:54.345>and <00:16:54.500>we <00:16:54.656>saw <00:16:54.811>that <00:16:54.967>there <00:16:55.122>are <00:16:55.278>a <00:16:55.433>couple <00:16:55.589>of <00:16:55.745>problems.

333
00:16:56.375 --> 00:16:58.925
<00:16:56.375>First <00:16:56.575>of <00:16:56.775>all, <00:16:56.975>we <00:16:57.175>had <00:16:57.375>to <00:16:57.575>rewrite <00:16:57.775>hooks.

334
00:16:59.545 --> 00:17:03.445
<00:16:59.545>So <00:16:59.672>for <00:16:59.799>every <00:16:59.926>hook <00:17:00.054>we <00:17:00.181>had <00:17:00.308>to <00:17:00.435>match <00:17:00.563>the <00:17:00.690>API, <00:17:00.817>we <00:17:00.944>had

335
00:17:03.445 --> 00:17:05.245
<00:17:03.445>to <00:17:03.678>match <00:17:03.911>the <00:17:04.145>type, <00:17:04.378>the <00:17:04.611>TypeScript <00:17:04.845>types.

336
00:17:06.265 --> 00:17:09.325
<00:17:06.265>And <00:17:06.405>also <00:17:06.545>we <00:17:06.685>couldn't <00:17:06.825>really <00:17:06.965>use <00:17:07.105>the, <00:17:07.245>the <00:17:07.385>nice <00:17:07.525>dev <00:17:07.665>tools

337
00:17:09.325 --> 00:17:11.845
<00:17:09.325>around <00:17:09.525>hooks <00:17:09.725>like <00:17:09.925>the <00:17:10.125>linter <00:17:10.325>that <00:17:10.525>helps <00:17:10.725>you

338
00:17:11.875 --> 00:17:14.965
<00:17:11.875>with <00:17:12.050>the <00:17:12.224>dependencies <00:17:12.400>and <00:17:12.575>uh, <00:17:12.750>and <00:17:12.925>stuff <00:17:13.099>like <00:17:13.275>that.

339
00:17:15.345 --> 00:17:18.765
<00:17:15.345>And <00:17:15.485>uh, <00:17:15.625>uh, <00:17:15.765>react <00:17:15.905>dev <00:17:16.045>tools <00:17:16.185>that <00:17:16.325>show <00:17:16.464>you <00:17:16.605>the <00:17:16.745>value

340
00:17:19.465 --> 00:17:21.485
<00:17:19.464>allows <00:17:19.665>you <00:17:19.865>to <00:17:20.064>inspect <00:17:20.264>the <00:17:20.464>values <00:17:20.665>of <00:17:20.865>hooks.

341
00:17:22.225 --> 00:17:23.725
<00:17:22.224>So <00:17:22.494>this <00:17:22.764>was <00:17:23.034>a <00:17:23.304>major <00:17:23.574>drawback.

342
00:17:24.705 --> 00:17:27.485
<00:17:24.704>And <00:17:24.832>also <00:17:24.959>we <00:17:25.086>noticed <00:17:25.214>that <00:17:25.341>the <00:17:25.468>a <00:17:25.595>i <00:17:25.723>is <00:17:25.850>a <00:17:25.977>bit <00:17:26.105>confusing,

343
00:17:27.485 --> 00:17:30.085
<00:17:27.484>like <00:17:27.685>what's <00:17:27.885>exactly <00:17:28.084>the <00:17:28.284>difference <00:17:28.484>between <00:17:28.685>use <00:17:28.885>state

344
00:17:30.085 --> 00:17:32.045
<00:17:30.085>and <00:17:30.435>reuse <00:17:30.785>state, <00:17:31.135>what <00:17:31.485>exactly

345
00:17:32.045 --> 00:17:34.245
<00:17:32.045>that <00:17:32.278>does <00:17:32.511>use <00:17:32.745>reuse, <00:17:32.978>do, <00:17:33.211>et <00:17:33.445>cetera.

346
00:17:36.105 --> 00:17:39.965
<00:17:36.105>So <00:17:36.221>we <00:17:36.338>said, <00:17:36.455>okay, <00:17:36.571>so <00:17:36.688>we <00:17:36.805>know <00:17:36.921>that <00:17:37.038>we, <00:17:37.155>we <00:17:37.271>want <00:17:37.388>to <00:17:37.505>keep

347
00:17:40.485 --> 00:17:42.325
<00:17:40.485>functions <00:17:40.718>as <00:17:40.951>the <00:17:41.185>key <00:17:41.418>to <00:17:41.651>the <00:17:41.885>store,

348
00:17:43.385 --> 00:17:46.285
<00:17:43.385>but <00:17:43.540>uh, <00:17:43.696>we <00:17:43.851>want <00:17:44.007>to <00:17:44.162>use <00:17:44.318>the <00:17:44.473>native <00:17:44.629>React <00:17:44.785>hooks.

349
00:17:46.285 --> 00:17:48.205
<00:17:46.285>We <00:17:46.485>don't <00:17:46.685>want <00:17:46.885>to <00:17:47.085>create <00:17:47.285>our <00:17:47.485>own <00:17:47.685>implementation.

350
00:17:48.505 --> 00:17:51.805
<00:17:48.505>So <00:17:48.738>the <00:17:48.971>ideal <00:17:49.205>API <00:17:49.438>would <00:17:49.671>be, <00:17:49.905>uh,

351
00:17:51.825 --> 00:17:54.205
<00:17:51.825>to <00:17:51.980>use <00:17:52.136>a <00:17:52.291>function <00:17:52.447>which <00:17:52.602>is <00:17:52.758>like <00:17:52.913>a <00:17:53.069>custom <00:17:53.225>hook.

352
00:17:54.905 --> 00:17:57.085
<00:17:54.905>Uh, <00:17:55.105>it's <00:17:55.305>a <00:17:55.504>function <00:17:55.705>that <00:17:55.905>uses <00:17:56.105>hooks <00:17:56.305>inside

353
00:17:57.745 --> 00:17:59.965
<00:17:57.745>and <00:17:57.900>you <00:17:58.056>wrap <00:17:58.211>it <00:17:58.367>with <00:17:58.522>a <00:17:58.678>cold <00:17:58.833>hook <00:17:58.989>create <00:17:59.145>store.

354
00:18:00.385 --> 00:18:03.565
<00:18:00.385>And <00:18:00.525>what <00:18:00.665>we <00:18:00.805>wanted <00:18:00.945>this <00:18:01.085>to <00:18:01.225>do <00:18:01.365>is <00:18:01.504>take <00:18:01.645>this <00:18:01.785>hook

355
00:18:03.905 --> 00:18:07.605
<00:18:03.905>and <00:18:04.032>run <00:18:04.159>it <00:18:04.286>in <00:18:04.414>a <00:18:04.541>shared <00:18:04.668>place <00:18:04.795>in <00:18:04.923>like <00:18:05.050>a <00:18:05.177>Singleton <00:18:05.305>store.

356
00:18:08.145 --> 00:18:10.805
<00:18:08.145>So <00:18:08.425>whenever <00:18:08.705>components <00:18:08.985>will <00:18:09.264>use <00:18:09.545>this,

357
00:18:11.065 --> 00:18:12.805
<00:18:11.065>the <00:18:11.345>return <00:18:11.625>value <00:18:11.905>they'll <00:18:12.185>use <00:18:12.465>Locate,

358
00:18:12.805 --> 00:18:14.285
<00:18:12.805>they <00:18:13.071>will <00:18:13.337>get <00:18:13.604>the <00:18:13.870>same <00:18:14.137>state.

359
00:18:15.905 --> 00:18:19.085
<00:18:15.905>And <00:18:16.045>then <00:18:16.185>in <00:18:16.325>the <00:18:16.465>component <00:18:16.605>you <00:18:16.745>use <00:18:16.885>the <00:18:17.024>hook <00:18:17.165>that <00:18:17.305>subscribes

360
00:18:19.085 --> 00:18:22.085
<00:18:19.085>to <00:18:19.212>the <00:18:19.339>store, <00:18:19.466>uh, <00:18:19.594>just <00:18:19.721>like <00:18:19.848>you <00:18:19.975>would <00:18:20.103>use <00:18:20.230>any <00:18:20.357>other <00:18:20.485>hook.

361
00:18:23.705 --> 00:18:28.205
<00:18:23.705>But <00:18:23.832>there <00:18:23.959>is <00:18:24.086>a <00:18:24.214>problem. <00:18:24.341>How <00:18:24.468>can <00:18:24.595>we <00:18:24.723>use <00:18:24.850>Native <00:18:24.977>React <00:18:25.105>hooks?

362
00:18:28.775 --> 00:18:32.125
<00:18:28.775>React <00:18:28.975>Hooks <00:18:29.175>can <00:18:29.375>only <00:18:29.575>run <00:18:29.775>inside <00:18:29.975>React <00:18:30.175>components.

363
00:18:32.555 --> 00:18:33.925
<00:18:32.555>They <00:18:32.966>can <00:18:33.377>run <00:18:33.788>outside.

364
00:18:35.145 --> 00:18:38.245
<00:18:35.145>So <00:18:35.300>what <00:18:35.456>we <00:18:35.611>do <00:18:35.767>is <00:18:35.922>we, <00:18:36.078>we <00:18:36.233>render <00:18:36.389>some <00:18:36.545>kind

365
00:18:38.245 --> 00:18:40.325
<00:18:38.245>of <00:18:38.594>dummy <00:18:38.945>component <00:18:39.294>per <00:18:39.645>store.

366
00:18:40.625 --> 00:18:43.205
<00:18:40.625>So <00:18:40.858>each <00:18:41.091>store <00:18:41.325>that <00:18:41.558>you <00:18:41.791>create, <00:18:42.025>uh,

367
00:18:43.205 --> 00:18:44.885
<00:18:43.205>we <00:18:43.485>will <00:18:43.764>create <00:18:44.044>a <00:18:44.324>dummy <00:18:44.605>component

368
00:18:44.955 --> 00:18:47.085
<00:18:44.955>that <00:18:45.155>doesn't <00:18:45.355>really <00:18:45.554>render <00:18:45.754>anything <00:18:45.955>to <00:18:46.155>the <00:18:46.355>screen.

369
00:18:47.145 --> 00:18:51.245
<00:18:47.145>It <00:18:47.300>just <00:18:47.456>runs <00:18:47.611>your, <00:18:47.767>uh, <00:18:47.922>your <00:18:48.078>function <00:18:48.233>that <00:18:48.389>runs <00:18:48.545>hooks.

370
00:18:52.425 --> 00:18:55.285
<00:18:52.425>So <00:18:52.580>we <00:18:52.736>have <00:18:52.891>a <00:18:53.047>provider, <00:18:53.202>the <00:18:53.358>provider <00:18:53.513>renders <00:18:53.669>your <00:18:53.825>app

371
00:18:55.865 --> 00:19:00.245
<00:18:55.865>and <00:18:56.005>to <00:18:56.145>decide <00:18:56.285>it <00:18:56.425>also, <00:18:56.565>uh, <00:18:56.705>renders <00:18:56.845>a <00:18:56.985>stores <00:18:57.125>component, <00:18:57.265>uh,

372
00:19:00.245 --> 00:19:02.685
<00:19:00.245>that <00:19:00.478>will <00:19:00.711>render <00:19:00.945>one <00:19:01.178>dummy <00:19:01.411>component <00:19:01.645>per

373
00:19:02.695 --> 00:19:04.005
<00:19:02.695>store <00:19:03.088>that <00:19:03.481>you <00:19:03.874>create.

374
00:19:05.185 --> 00:19:08.045
<00:19:05.185>And <00:19:05.340>now <00:19:05.496>the <00:19:05.651>store <00:19:05.807>runs <00:19:05.962>the <00:19:06.118>function <00:19:06.273>with <00:19:06.429>the <00:19:06.585>hooks,

375
00:19:08.395 --> 00:19:11.725
<00:19:08.395>gets <00:19:08.550>the <00:19:08.706>return <00:19:08.861>value <00:19:09.017>of <00:19:09.172>the <00:19:09.328>hook <00:19:09.483>and <00:19:09.639>updates <00:19:09.795>directly.

376
00:19:11.785 --> 00:19:12.805
<00:19:11.785>All <00:19:12.244>the <00:19:12.703>subscribers

377
00:19:12.825 --> 00:19:16.605
<00:19:12.825>and <00:19:12.965>the <00:19:13.105>subscribers <00:19:13.245>are <00:19:13.385>all <00:19:13.525>the <00:19:13.665>components <00:19:13.805>that <00:19:13.945>use <00:19:14.085>the <00:19:14.225>hook

378
00:19:16.875 --> 00:19:19.645
<00:19:16.875>that <00:19:17.108>was <00:19:17.341>returned, <00:19:17.575>uh, <00:19:17.808>from <00:19:18.041>Create <00:19:18.275>store.

379
00:19:20.585 --> 00:19:23.845
<00:19:20.585>So <00:19:20.725>we <00:19:20.865>get <00:19:21.005>direct <00:19:21.145>subscriptions <00:19:21.285>and <00:19:21.425>we <00:19:21.565>can <00:19:21.705>also <00:19:21.845>put <00:19:21.985>selectors

380
00:19:24.425 --> 00:19:25.845
<00:19:24.425>and <00:19:25.064>render <00:19:25.703>bailout

381
00:19:25.845 --> 00:19:28.845
<00:19:25.845>and <00:19:26.020>whatever <00:19:26.195>we <00:19:26.370>we're <00:19:26.545>not <00:19:26.720>using <00:19:26.895>context <00:19:27.070>to <00:19:27.245>prop,

382
00:19:28.845 --> 00:19:32.045
<00:19:28.845>propagate <00:19:29.020>the <00:19:29.195>value <00:19:29.370>from <00:19:29.545>the <00:19:29.720>store <00:19:29.895>to <00:19:30.070>the <00:19:30.245>components.

383
00:19:34.025 --> 00:19:35.765
<00:19:34.025>And <00:19:34.258>this <00:19:34.491>is <00:19:34.725>how <00:19:34.958>Reusable <00:19:35.191>was <00:19:35.425>born.

384
00:19:36.425 --> 00:19:38.685
<00:19:36.425>You <00:19:36.705>can <00:19:36.985>visit <00:19:37.264>our <00:19:37.544>GitHub <00:19:37.825>repository

385
00:19:38.945 --> 00:19:41.525
<00:19:38.945>and <00:19:39.145>give <00:19:39.345>us <00:19:39.544>a <00:19:39.745>feedback <00:19:39.945>and <00:19:40.145>your <00:19:40.345>love.

386
00:19:43.345 --> 00:19:47.045
<00:19:43.345>And <00:19:43.520>something <00:19:43.695>else <00:19:43.870>that <00:19:44.045>we, <00:19:44.220>uh, <00:19:44.395>wanted <00:19:44.570>to <00:19:44.745>do

387
00:19:47.045 --> 00:19:49.725
<00:19:47.045>with <00:19:47.278>reusable <00:19:47.511>is, <00:19:47.745>um, <00:19:47.978>to <00:19:48.211>allow <00:19:48.445>stores

388
00:19:49.785 --> 00:19:51.245
<00:19:49.785>to <00:19:50.223>be <00:19:50.661>dynamically <00:19:51.099>added

389
00:19:51.385 --> 00:19:53.885
<00:19:51.385>or <00:19:51.585>simply <00:19:51.785>added <00:19:51.985>to <00:19:52.185>our <00:19:52.385>application, <00:19:52.585>which <00:19:52.785>means

390
00:19:53.885 --> 00:19:57.165
<00:19:53.885>that <00:19:54.060>the <00:19:54.235>provider <00:19:54.410>doesn't <00:19:54.585>say <00:19:54.760>which <00:19:54.935>stores <00:19:55.110>it <00:19:55.285>uses,

391
00:19:57.625 --> 00:19:59.485
<00:19:57.625>rather <00:19:57.975>the <00:19:58.325>stores <00:19:58.675>themself, <00:19:59.025>they,

392
00:19:59.755 --> 00:20:02.365
<00:19:59.755>they <00:20:00.105>register <00:20:00.455>themself <00:20:00.805>with <00:20:01.155>one.

393
00:20:02.365 --> 00:20:05.965
<00:20:02.365>There's <00:20:02.520>only <00:20:02.676>one <00:20:02.831>provider <00:20:02.987>inside <00:20:03.142>the <00:20:03.298>app, <00:20:03.453>uh, <00:20:03.609>which <00:20:03.765>means

394
00:20:05.965 --> 00:20:08.165
<00:20:05.965>that <00:20:06.314>it's, <00:20:06.665>uh, <00:20:07.014>fairly <00:20:07.365>straightforward

395
00:20:08.265 --> 00:20:10.565
<00:20:08.265>to <00:20:08.731>create <00:20:09.198>reusable <00:20:09.665>packages

396
00:20:10.955 --> 00:20:13.445
<00:20:10.955>that <00:20:11.188>also <00:20:11.421>have <00:20:11.655>their <00:20:11.888>own <00:20:12.121>shared <00:20:12.355>state.

397
00:20:13.445 --> 00:20:14.885
<00:20:13.445>That's <00:20:13.769>why <00:20:14.092>the <00:20:14.417>name <00:20:14.741>reusable

398
00:20:15.905 --> 00:20:19.485
<00:20:15.905>and <00:20:16.080>also <00:20:16.254>lazy <00:20:16.430>loaded <00:20:16.605>modules <00:20:16.780>that <00:20:16.955>are <00:20:17.129>introduced <00:20:17.305>dynamically

399
00:20:19.485 --> 00:20:22.565
<00:20:19.485>to <00:20:19.625>the <00:20:19.764>application, <00:20:19.905>they <00:20:20.044>can <00:20:20.185>end <00:20:20.324>their <00:20:20.465>own, <00:20:20.604>uh, <00:20:20.745>shared <00:20:20.885>state

400
00:20:22.585 --> 00:20:24.245
<00:20:22.585>and <00:20:22.818>everything <00:20:23.051>will <00:20:23.285>go <00:20:23.518>to <00:20:23.751>this, <00:20:23.985>uh,

401
00:20:24.525 --> 00:20:26.005
<00:20:24.525>reusable <00:20:24.858>provider <00:20:25.191>at <00:20:25.524>the <00:20:25.857>top.

402
00:20:27.865 --> 00:20:30.125
<00:20:27.865>So <00:20:28.040>now <00:20:28.215>it's <00:20:28.390>time <00:20:28.565>for <00:20:28.740>a <00:20:28.915>short <00:20:29.090>live <00:20:29.265>demo.

403
00:20:31.425 --> 00:20:33.565
<00:20:31.425>Um, <00:20:31.774>my <00:20:32.125>code <00:20:32.475>is <00:20:32.825>here.

404
00:20:34.305 --> 00:20:37.965
<00:20:34.305>Let <00:20:34.480>me <00:20:34.655>just, <00:20:34.830>uh, <00:20:35.005>prepare <00:20:35.180>for <00:20:35.355>the <00:20:35.530>live <00:20:35.705>demo

405
00:20:37.995 --> 00:20:40.725
<00:20:37.995>because <00:20:38.150>I <00:20:38.306>need <00:20:38.461>to <00:20:38.617>touch <00:20:38.772>the <00:20:38.928>computer <00:20:39.083>in <00:20:39.239>COVID <00:20:39.395>times.

406
00:20:41.705 --> 00:20:46.525
<00:20:41.705>So <00:20:41.938>live <00:20:42.171>demo <00:20:42.405>it <00:20:42.638>is, <00:20:42.871>um, <00:20:43.105>so

407
00:20:46.555 --> 00:20:49.765
<00:20:46.555>what <00:20:46.695>you <00:20:46.835>see <00:20:46.975>on <00:20:47.115>the <00:20:47.255>screen <00:20:47.395>is <00:20:47.535>it's <00:20:47.675>not <00:20:47.815>really <00:20:47.955>Facebook,

408
00:20:49.765 --> 00:20:53.445
<00:20:49.765>it's <00:20:49.920>a <00:20:50.076>recreation <00:20:50.231>of <00:20:50.387>Facebook, <00:20:50.542>uh, <00:20:50.698>part <00:20:50.853>of <00:20:51.009>Facebook <00:20:51.165>UI

409
00:20:53.445 --> 00:20:56.365
<00:20:53.445>that <00:20:53.678>I <00:20:53.911>made <00:20:54.145>before <00:20:54.378>the <00:20:54.611>UI <00:20:54.845>change.

410
00:20:57.265 --> 00:21:00.605
<00:20:57.265>And <00:20:57.381>what <00:20:57.498>we <00:20:57.615>have <00:20:57.731>here <00:20:57.848>is <00:20:57.965>some <00:20:58.081>Lauren <00:20:58.198>Ipsum <00:20:58.315>bot <00:20:58.431>that <00:20:58.548>I <00:20:58.665>can,

411
00:21:00.745 --> 00:21:03.805
<00:21:00.745>uh, <00:21:00.900>write <00:21:01.056>messages <00:21:01.211>and <00:21:01.367>for <00:21:01.522>every <00:21:01.678>message <00:21:01.833>that <00:21:01.989>I <00:21:02.145>send

412
00:21:03.805 --> 00:21:05.725
<00:21:03.805>after <00:21:04.155>a <00:21:04.505>few <00:21:04.855>seconds, <00:21:05.205>uh,

413
00:21:05.805 --> 00:21:07.565
<00:21:05.805>the <00:21:06.005>bot <00:21:06.205>answers <00:21:06.405>back <00:21:06.605>just <00:21:06.805>for <00:21:07.005>the <00:21:07.205>demo.

414
00:21:08.305 --> 00:21:13.045
<00:21:08.305>And <00:21:08.432>as <00:21:08.559>you <00:21:08.686>can <00:21:08.814>see, <00:21:08.941>we <00:21:09.068>have, <00:21:09.195>um, <00:21:09.323>this, <00:21:09.450>uh, <00:21:09.577>notification <00:21:09.705>of

415
00:21:13.065 --> 00:21:14.965
<00:21:13.065>how <00:21:13.345>many <00:21:13.625>messages <00:21:13.905>I <00:21:14.185>have <00:21:14.465>unread.

416
00:21:15.265 --> 00:21:17.445
<00:21:15.265>And <00:21:15.465>when <00:21:15.665>I <00:21:15.865>click <00:21:16.065>and <00:21:16.265>open <00:21:16.465>the <00:21:16.665>balloon,

417
00:21:17.995 --> 00:21:19.885
<00:21:17.995>then <00:21:18.461>the <00:21:18.928>notification <00:21:19.395>disappears

418
00:21:20.065 --> 00:21:23.765
<00:21:20.065>and <00:21:20.181>I <00:21:20.298>see <00:21:20.415>the <00:21:20.531>new <00:21:20.648>messages <00:21:20.765>that <00:21:20.881>was <00:21:20.998>were <00:21:21.115>sent <00:21:21.231>by <00:21:21.348>the <00:21:21.465>bot.

419
00:21:24.625 --> 00:21:27.005
<00:21:24.625>Uh, <00:21:24.825>so <00:21:25.025>everything <00:21:25.225>that <00:21:25.425>you <00:21:25.625>see <00:21:25.825>here <00:21:26.025>is

420
00:21:27.005 --> 00:21:28.325
<00:21:27.005>inside <00:21:27.401>the <00:21:27.797>footer <00:21:28.193>component

421
00:21:28.745 --> 00:21:33.525
<00:21:28.745>and <00:21:28.919>now <00:21:29.094>it's <00:21:29.270>just, <00:21:29.445>uh, <00:21:29.620>local <00:21:29.794>state <00:21:29.969>using <00:21:30.145>hooks.

422
00:21:34.465 --> 00:21:37.325
<00:21:34.465>And <00:21:34.592>let's <00:21:34.719>say <00:21:34.846>we <00:21:34.974>decide <00:21:35.101>that <00:21:35.228>this <00:21:35.355>is <00:21:35.483>not <00:21:35.610>really <00:21:35.737>local <00:21:35.865>state,

423
00:21:37.515 --> 00:21:38.845
<00:21:37.515>it's <00:21:37.714>something <00:21:37.914>that <00:21:38.113>we <00:21:38.313>want <00:21:38.512>to <00:21:38.712>move

424
00:21:38.845 --> 00:21:40.605
<00:21:38.845>to <00:21:39.125>some <00:21:39.405>shared <00:21:39.685>or <00:21:39.965>global <00:21:40.245>state.

425
00:21:42.145 --> 00:21:45.765
<00:21:42.145>Um, <00:21:42.285>so <00:21:42.425>as <00:21:42.565>you <00:21:42.705>can <00:21:42.845>see <00:21:42.985>here, <00:21:43.125>we <00:21:43.264>have <00:21:43.405>the <00:21:43.545>messages,

426
00:21:45.775 --> 00:21:47.165
<00:21:45.775>which <00:21:46.087>is <00:21:46.400>the <00:21:46.713>message <00:21:47.026>array.

427
00:21:47.625 --> 00:21:50.845
<00:21:47.625>We <00:21:47.765>have <00:21:47.905>the <00:21:48.045>red <00:21:48.185>index, <00:21:48.325>which <00:21:48.465>says <00:21:48.605>up <00:21:48.745>until <00:21:48.885>which <00:21:49.025>message,

428
00:21:51.145 --> 00:21:53.045
<00:21:51.145>the <00:21:51.495>user <00:21:51.845>read <00:21:52.195>the <00:21:52.545>messages

429
00:21:53.665 --> 00:21:55.405
<00:21:53.665>and <00:21:53.840>we <00:21:54.014>have <00:21:54.190>a <00:21:54.365>callback <00:21:54.540>to <00:21:54.715>add <00:21:54.889>a <00:21:55.065>message.

430
00:21:56.345 --> 00:22:00.885
<00:21:56.345>And <00:21:56.520>uh, <00:21:56.695>also <00:21:56.870>some <00:21:57.045>computed <00:21:57.220>variable, <00:21:57.395>uh, <00:21:57.570>which <00:21:57.745>is

431
00:22:01.185 --> 00:22:04.525
<00:22:01.185>how <00:22:01.385>many <00:22:01.585>messages <00:22:01.784>counts <00:22:01.985>are <00:22:02.185>inside <00:22:02.385>the <00:22:02.585>balloon.

432
00:22:05.985 --> 00:22:07.965
<00:22:05.985>So <00:22:06.140>first <00:22:06.296>of <00:22:06.451>all, <00:22:06.607>we <00:22:06.762>take <00:22:06.918>all <00:22:07.073>of <00:22:07.229>this <00:22:07.385>code

433
00:22:09.105 --> 00:22:12.925
<00:22:09.105>and <00:22:09.305>we <00:22:09.505>move <00:22:09.705>it <00:22:09.905>to <00:22:10.105>a <00:22:10.305>reusable <00:22:10.505>store.

434
00:22:13.785 --> 00:22:18.445
<00:22:13.785>So <00:22:13.925>we, <00:22:14.065>we <00:22:14.205>co <00:22:14.345>uh, <00:22:14.485>cut <00:22:14.625>and <00:22:14.765>paste <00:22:14.905>inside <00:22:15.045>this <00:22:15.185>function.

435
00:22:20.635 --> 00:22:24.215
<00:22:20.635>And <00:22:20.790>then <00:22:20.946>from <00:22:21.101>this <00:22:21.257>function, <00:22:21.412>we <00:22:21.568>return <00:22:21.723>whatever <00:22:21.879>we <00:22:22.035>want

436
00:22:24.215 --> 00:22:26.775
<00:22:24.215>to <00:22:24.370>return <00:22:24.526>to <00:22:24.681>the <00:22:24.837>component, <00:22:24.992>which <00:22:25.148>is <00:22:25.303>all <00:22:25.459>of <00:22:25.615>this.

437
00:22:27.675 --> 00:22:32.255
<00:22:27.675>And <00:22:27.850>then <00:22:28.024>inside <00:22:28.200>the <00:22:28.375>component <00:22:28.550>we <00:22:28.725>use <00:22:28.899>this, <00:22:29.075>uh,

438
00:22:33.415 --> 00:22:36.255
<00:22:33.415>function <00:22:33.590>to <00:22:33.764>get <00:22:33.940>whatever <00:22:34.115>we <00:22:34.290>got <00:22:34.465>from <00:22:34.639>here <00:22:34.815>before.

439
00:22:37.275 --> 00:22:41.255
<00:22:37.275>So <00:22:37.382>if <00:22:37.490>I <00:22:37.598>save <00:22:37.705>now <00:22:37.813>it's <00:22:37.921>supposed <00:22:38.028>to <00:22:38.136>work <00:22:38.244>the <00:22:38.351>same <00:22:38.459>way <00:22:38.567>it <00:22:38.675>did

440
00:22:41.255 --> 00:22:43.415
<00:22:41.255>before <00:22:41.455>we <00:22:41.655>just <00:22:41.855>moved <00:22:42.055>some, <00:22:42.255>uh, <00:22:42.455>code <00:22:42.655>around.

441
00:22:45.865 --> 00:22:46.085
Um,

442
00:22:50.565 --> 00:22:51.315
<00:22:50.565>let's <00:22:51.240>refresh.

443
00:22:52.455 --> 00:22:53.555
<00:22:52.455>So <00:22:52.784>it's <00:22:53.115>still <00:22:53.445>working.

444
00:22:55.255 --> 00:22:59.715
<00:22:55.255>So <00:22:55.371>now <00:22:55.488>what <00:22:55.605>I <00:22:55.721>want <00:22:55.838>to <00:22:55.955>do <00:22:56.071>is <00:22:56.188>make <00:22:56.305>it <00:22:56.421>a <00:22:56.538>reusable <00:22:56.655>store.

445
00:23:00.015 --> 00:23:01.635
<00:23:00.015>So <00:23:00.248>I <00:23:00.481>wrap <00:23:00.715>it <00:23:00.948>with <00:23:01.181>Create <00:23:01.415>Store

446
00:23:05.175 --> 00:23:09.995
<00:23:05.175>and <00:23:05.350>I <00:23:05.524>include <00:23:05.700>the <00:23:05.875>reusable <00:23:06.050>provider <00:23:06.225>around <00:23:06.399>my <00:23:06.575>application.

447
00:23:10.815 --> 00:23:14.595
<00:23:10.815>And <00:23:10.955>remember, <00:23:11.095>I <00:23:11.235>don't <00:23:11.375>have <00:23:11.515>to <00:23:11.655>say <00:23:11.795>which <00:23:11.935>stores <00:23:12.075>I <00:23:12.215>use.

448
00:23:14.595 --> 00:23:18.075
<00:23:14.595>Every <00:23:14.750>store <00:23:14.906>that <00:23:15.061>I <00:23:15.217>create <00:23:15.372>will, <00:23:15.528>uh, <00:23:15.683>simply <00:23:15.839>register <00:23:15.995>itself

449
00:23:18.075 --> 00:23:19.435
<00:23:18.075>with <00:23:18.483>this <00:23:18.891>reusable <00:23:19.299>provider.

450
00:23:21.375 --> 00:23:25.115
<00:23:21.375>So <00:23:21.530>again, <00:23:21.686>the <00:23:21.841>app <00:23:21.997>works <00:23:22.152>exactly <00:23:22.308>the <00:23:22.463>same <00:23:22.619>way, <00:23:22.775>except

451
00:23:25.115 --> 00:23:28.955
<00:23:25.115>that <00:23:25.242>all <00:23:25.369>of <00:23:25.496>the <00:23:25.624>state <00:23:25.751>that <00:23:25.878>is <00:23:26.005>here <00:23:26.133>is <00:23:26.260>now <00:23:26.387>global <00:23:26.515>state.

452
00:23:28.975 --> 00:23:31.275
<00:23:28.975>It <00:23:29.102>means <00:23:29.229>that <00:23:29.356>I <00:23:29.484>can <00:23:29.611>use <00:23:29.738>it <00:23:29.865>somewhere <00:23:29.993>else <00:23:30.120>in <00:23:30.247>my <00:23:30.375>application.

453
00:23:31.975 --> 00:23:34.235
<00:23:31.975>So <00:23:32.175>let's <00:23:32.375>use <00:23:32.574>it <00:23:32.774>inside <00:23:32.975>the <00:23:33.175>hurdle <00:23:33.375>component.

454
00:23:35.375 --> 00:23:37.035
<00:23:35.375>So <00:23:35.608>I'm <00:23:35.841>going <00:23:36.075>to <00:23:36.308>my <00:23:36.541>header <00:23:36.775>component

455
00:23:38.175 --> 00:23:40.995
<00:23:38.175>and <00:23:38.375>here <00:23:38.575>I'm <00:23:38.774>taking, <00:23:38.975>using <00:23:39.175>the <00:23:39.375>same <00:23:39.575>hook,

456
00:23:41.805 --> 00:23:45.325
<00:23:41.805>which <00:23:41.945>is <00:23:42.085>not <00:23:42.225>just <00:23:42.365>a <00:23:42.505>regular <00:23:42.645>custom <00:23:42.785>hook, <00:23:42.925>I <00:23:43.065>remind <00:23:43.205>you

457
00:23:46.315 --> 00:23:50.485
<00:23:46.315>it's <00:23:46.470>a <00:23:46.626>hook <00:23:46.781>that <00:23:46.937>subscribes <00:23:47.092>to <00:23:47.248>directly <00:23:47.403>to <00:23:47.559>this <00:23:47.715>store.

458
00:23:51.025 --> 00:23:54.925
<00:23:51.025>And <00:23:51.165>the <00:23:51.305>store <00:23:51.445>is <00:23:51.585>a <00:23:51.725>function <00:23:51.865>that <00:23:52.005>runs <00:23:52.145>hooks, <00:23:52.285>which <00:23:52.425>means

459
00:23:54.925 --> 00:23:57.205
<00:23:54.925>that <00:23:55.391>when, <00:23:55.858>uh, <00:23:56.325>footer

460
00:23:57.205 --> 00:24:00.525
<00:23:57.205>and <00:23:57.345>header, <00:23:57.485>uh, <00:23:57.625>uses <00:23:57.764>this <00:23:57.905>state, <00:23:58.044>they <00:23:58.185>get <00:23:58.324>the <00:23:58.465>same <00:23:58.605>state

461
00:24:00.905 --> 00:24:03.245
<00:24:00.905>and <00:24:01.080>not <00:24:01.254>a <00:24:01.430>local <00:24:01.605>state, <00:24:01.780>which <00:24:01.955>is <00:24:02.129>a <00:24:02.305>copy.

462
00:24:04.625 --> 00:24:07.485
<00:24:04.625>So <00:24:04.858>now <00:24:05.091>inside <00:24:05.325>the <00:24:05.558>header <00:24:05.791>component, <00:24:06.025>um,

463
00:24:07.845 --> 00:24:12.565
<00:24:07.845>I <00:24:07.952>can <00:24:08.060>use <00:24:08.168>the <00:24:08.275>same <00:24:08.383>state, <00:24:08.491>I <00:24:08.598>can <00:24:08.706>display <00:24:08.814>it, <00:24:08.921>uh, <00:24:09.029>at <00:24:09.137>the <00:24:09.245>top

464
00:24:12.705 --> 00:24:15.805
<00:24:12.705>so <00:24:12.832>you <00:24:12.959>can <00:24:13.086>see <00:24:13.214>it's <00:24:13.341>two <00:24:13.468>and <00:24:13.595>the <00:24:13.723>photo <00:24:13.850>it's <00:24:13.977>also <00:24:14.105>two.

465
00:24:16.385 --> 00:24:20.205
<00:24:16.385>And <00:24:16.540>if <00:24:16.696>I <00:24:16.851>open <00:24:17.007>the <00:24:17.162>balloon, <00:24:17.318>then <00:24:17.473>both <00:24:17.629>numbers <00:24:17.785>disappear

466
00:24:20.985 --> 00:24:24.765
<00:24:20.985>and <00:24:21.185>I <00:24:21.385>can <00:24:21.584>also <00:24:21.784>click <00:24:21.985>the <00:24:22.185>balloon, <00:24:22.385>uh,

467
00:24:25.265 --> 00:24:27.285
<00:24:25.265>and <00:24:25.731>change <00:24:26.198>the <00:24:26.665>state.

468
00:24:27.425 --> 00:24:29.485
<00:24:27.425>So <00:24:27.625>mark <00:24:27.825>all <00:24:28.024>of <00:24:28.225>the <00:24:28.425>messages <00:24:28.625>as <00:24:28.825>read.

469
00:24:30.625 --> 00:24:33.765
<00:24:30.625>And <00:24:30.780>as <00:24:30.936>you <00:24:31.091>can <00:24:31.247>see, <00:24:31.402>it <00:24:31.558>disappeared <00:24:31.713>in <00:24:31.869>both <00:24:32.025>places.

470
00:24:33.905 --> 00:24:35.205
<00:24:33.905>So <00:24:34.197>it's <00:24:34.490>really <00:24:34.782>shared <00:24:35.074>state.

471
00:24:37.255 --> 00:24:39.195
<00:24:37.255>Uh, <00:24:37.455>let's <00:24:37.655>look <00:24:37.855>at <00:24:38.055>how <00:24:38.255>we <00:24:38.455>do <00:24:38.655>selectors.

472
00:24:39.695 --> 00:24:42.835
<00:24:39.695>So <00:24:39.870>I <00:24:40.044>will <00:24:40.220>introduce <00:24:40.395>a <00:24:40.570>new, <00:24:40.745>another <00:24:40.919>component <00:24:41.095>here,

473
00:24:43.125 --> 00:24:46.235
<00:24:43.125>which <00:24:43.300>is <00:24:43.475>the <00:24:43.650>body <00:24:43.825>component <00:24:44.000>and <00:24:44.175>the <00:24:44.350>body <00:24:44.525>component.

474
00:24:46.815 --> 00:24:48.715
<00:24:46.815>Um, <00:24:47.095>also <00:24:47.375>uses <00:24:47.655>the <00:24:47.935>same <00:24:48.215>store.

475
00:24:49.295 --> 00:24:51.195
<00:24:49.295>It <00:24:49.575>takes <00:24:49.855>all <00:24:50.135>of <00:24:50.415>the <00:24:50.695>messages

476
00:24:51.535 --> 00:24:54.195
<00:24:51.535>and <00:24:51.815>outputs <00:24:52.095>the <00:24:52.375>messages <00:24:52.655>dot <00:24:52.935>length,

477
00:24:54.415 --> 00:24:56.315
<00:24:54.415>so <00:24:54.648>it <00:24:54.881>only <00:24:55.115>cares <00:24:55.348>about <00:24:55.581>the <00:24:55.815>length,

478
00:24:56.655 --> 00:24:57.835
<00:24:56.655>the <00:24:56.920>count <00:24:57.186>of <00:24:57.451>the <00:24:57.717>messages.

479
00:24:59.095 --> 00:25:00.475
<00:24:59.095>And <00:24:59.405>I'm <00:24:59.716>also <00:25:00.026>printing <00:25:00.337>out

480
00:25:00.495 --> 00:25:02.555
<00:25:00.495>how <00:25:00.695>many <00:25:00.895>times <00:25:01.094>this <00:25:01.294>component <00:25:01.495>was <00:25:01.695>re <00:25:01.895>rendered.

481
00:25:03.655 --> 00:25:05.755
<00:25:03.655>And <00:25:03.830>now <00:25:04.004>if <00:25:04.180>I <00:25:04.355>click <00:25:04.530>for <00:25:04.705>example, <00:25:04.879>the <00:25:05.055>balloon,

482
00:25:06.425 --> 00:25:08.955
<00:25:06.425>then <00:25:06.658>I <00:25:06.891>don't <00:25:07.125>change <00:25:07.358>the <00:25:07.591>message <00:25:07.825>count,

483
00:25:09.135 --> 00:25:10.955
<00:25:09.135>but <00:25:09.415>the <00:25:09.695>component <00:25:09.975>still <00:25:10.254>re <00:25:10.535>renders

484
00:25:10.955 --> 00:25:12.795
<00:25:10.955>because <00:25:11.235>it's <00:25:11.514>subscribed <00:25:11.794>to <00:25:12.074>the <00:25:12.355>store.

485
00:25:13.695 --> 00:25:16.635
<00:25:13.695>Uh, <00:25:13.850>so <00:25:14.006>what <00:25:14.161>we <00:25:14.317>can <00:25:14.472>do <00:25:14.628>is <00:25:14.783>passing <00:25:14.939>a <00:25:15.095>selector.

486
00:25:18.335 --> 00:25:23.235
<00:25:18.335>So <00:25:18.462>we <00:25:18.589>pass <00:25:18.716>in <00:25:18.844>a <00:25:18.971>selector, <00:25:19.098>um, <00:25:19.225>which <00:25:19.353>is <00:25:19.480>just <00:25:19.607>a <00:25:19.735>function

487
00:25:24.455 --> 00:25:28.835
<00:25:24.455>and <00:25:24.629>we <00:25:24.804>get <00:25:24.980>a <00:25:25.155>nice <00:25:25.330>type <00:25:25.504>script, <00:25:25.679>um, <00:25:25.855>completion,

488
00:25:29.735 --> 00:25:32.155
<00:25:29.735>and <00:25:29.935>we <00:25:30.135>can <00:25:30.334>directly <00:25:30.534>get <00:25:30.735>the <00:25:30.935>messages <00:25:31.135>length

489
00:25:34.095 --> 00:25:36.035
<00:25:34.095>and <00:25:34.328>use <00:25:34.561>it <00:25:34.795>directly <00:25:35.028>inside <00:25:35.261>our <00:25:35.495>components.

490
00:25:38.175 --> 00:25:40.995
<00:25:38.175>So <00:25:38.524>this <00:25:38.875>means <00:25:39.225>that, <00:25:39.575>um,

491
00:25:42.455 --> 00:25:45.355
<00:25:42.455>our <00:25:42.655>component <00:25:42.855>will <00:25:43.054>re-render <00:25:43.254>only <00:25:43.455>if <00:25:43.655>the <00:25:43.855>return

492
00:25:45.355 --> 00:25:46.555
<00:25:45.355>value <00:25:45.625>of <00:25:45.895>the <00:25:46.165>selector <00:25:46.435>changes.

493
00:25:46.695 --> 00:25:49.595
<00:25:46.695>So <00:25:46.822>now <00:25:46.949>the <00:25:47.076>same <00:25:47.204>way <00:25:47.331>we, <00:25:47.458>we <00:25:47.585>get <00:25:47.713>with <00:25:47.840>selectors <00:25:47.967>from, <00:25:48.095>uh,

494
00:25:49.925 --> 00:25:51.235
<00:25:49.925>Redux <00:25:50.219>using <00:25:50.514>hooks, <00:25:50.809>for <00:25:51.103>example.

495
00:25:52.215 --> 00:25:54.955
<00:25:52.215>So <00:25:52.415>now <00:25:52.615>if <00:25:52.814>I <00:25:53.014>open <00:25:53.215>the <00:25:53.415>balloon, <00:25:53.615>um,

496
00:25:55.665 --> 00:25:57.155
<00:25:55.665>this <00:25:56.112>component <00:25:56.559>didn't <00:25:57.005>re-render,

497
00:25:57.215 --> 00:25:59.715
<00:25:57.215>but <00:25:57.389>if <00:25:57.564>I <00:25:57.740>add <00:25:57.915>a <00:25:58.090>new <00:25:58.264>message, <00:25:58.439>it'll <00:25:58.615>re-render.

498
00:26:03.225 --> 00:26:05.845
<00:26:03.225>Um, <00:26:03.399>the <00:26:03.574>last <00:26:03.750>thing <00:26:03.925>I <00:26:04.100>want <00:26:04.274>to <00:26:04.449>show <00:26:04.625>is

499
00:26:05.865 --> 00:26:08.965
<00:26:05.865>how <00:26:06.040>we <00:26:06.215>use <00:26:06.390>one <00:26:06.565>store <00:26:06.740>from <00:26:06.915>another <00:26:07.090>store, <00:26:07.265>uh,

500
00:26:08.965 --> 00:26:11.805
<00:26:08.965>which <00:26:09.120>is <00:26:09.276>also <00:26:09.431>I <00:26:09.587>think <00:26:09.742>a <00:26:09.898>benefit <00:26:10.053>of <00:26:10.209>reusable, <00:26:10.365>uh,

501
00:26:11.805 --> 00:26:14.685
<00:26:11.805>because <00:26:11.932>we <00:26:12.059>don't <00:26:12.186>need <00:26:12.314>to <00:26:12.441>worry <00:26:12.568>about <00:26:12.695>which <00:26:12.823>one <00:26:12.950>is <00:26:13.077>on <00:26:13.205>top.

502
00:26:14.685 --> 00:26:16.805
<00:26:14.685>They <00:26:14.885>all <00:26:15.085>connect <00:26:15.284>to <00:26:15.485>the <00:26:15.685>same <00:26:15.885>reusable <00:26:16.085>provider.

503
00:26:17.425 --> 00:26:21.885
<00:26:17.425>So <00:26:17.565>let's <00:26:17.705>say <00:26:17.845>I <00:26:17.985>have <00:26:18.125>this <00:26:18.264>another <00:26:18.405>store <00:26:18.544>called <00:26:18.685>Config, <00:26:18.825>uh,

504
00:26:21.885 --> 00:26:24.285
<00:26:21.885>which <00:26:22.060>is <00:26:22.235>declared <00:26:22.410>the <00:26:22.585>same <00:26:22.760>way <00:26:22.935>using <00:26:23.110>Create <00:26:23.285>store.

505
00:26:24.745 --> 00:26:28.405
<00:26:24.745>And <00:26:24.900>I <00:26:25.056>use <00:26:25.211>this <00:26:25.367>inside <00:26:25.522>my, <00:26:25.678>uh, <00:26:25.833>my <00:26:25.989>other <00:26:26.145>store,

506
00:26:28.405 --> 00:26:30.725
<00:26:28.405>which <00:26:28.638>is <00:26:28.871>the <00:26:29.105>use, <00:26:29.338>uh, <00:26:29.571>chat <00:26:29.805>messages.

507
00:26:31.345 --> 00:26:35.565
<00:26:31.345>So <00:26:31.578>let's <00:26:31.811>say <00:26:32.045>I <00:26:32.278>use <00:26:32.511>config, <00:26:32.745>uh,

508
00:26:35.865 --> 00:26:40.505
<00:26:35.865>and <00:26:36.331>I <00:26:36.798>take <00:26:37.265>The

509
00:26:40.555 --> 00:26:44.005
<00:26:40.555>delay <00:26:40.905>from <00:26:41.255>the <00:26:41.605>config <00:26:41.955>state.

510
00:26:44.505 --> 00:26:45.685
<00:26:44.505>So <00:26:44.717>the <00:26:44.929>state <00:26:45.142>is <00:26:45.354>an <00:26:45.567>array.

511
00:26:45.885 --> 00:26:48.525
<00:26:45.885>I <00:26:46.060>take <00:26:46.235>the <00:26:46.410>first <00:26:46.585>item, <00:26:46.760>which <00:26:46.935>is <00:26:47.110>the <00:26:47.285>state

512
00:26:48.865 --> 00:26:50.365
<00:26:48.865>and <00:26:49.202>access <00:26:49.540>the <00:26:49.877>delay <00:26:50.215>property,

513
00:26:50.945 --> 00:26:53.325
<00:26:50.945>and <00:26:51.120>then <00:26:51.294>I <00:26:51.470>can <00:26:51.645>use <00:26:51.820>the <00:26:51.995>delay <00:26:52.169>here <00:26:52.345>inside.

514
00:26:55.895 --> 00:26:57.835
<00:26:55.895>So <00:26:56.128>using <00:26:56.361>one <00:26:56.595>store <00:26:56.828>from <00:26:57.061>another <00:26:57.295>store

515
00:26:57.855 --> 00:26:58.995
<00:26:57.855>is <00:26:58.197>pretty, <00:26:58.539>uh, <00:26:58.880>seamless.

516
00:26:59.375 --> 00:27:02.235
<00:26:59.375>Uh, <00:26:59.515>we <00:26:59.655>just <00:26:59.795>call <00:26:59.935>it <00:27:00.075>the <00:27:00.215>same <00:27:00.355>way <00:27:00.495>we <00:27:00.635>would <00:27:00.775>subscribe

517
00:27:02.235 --> 00:27:03.395
<00:27:02.235>to <00:27:02.495>it <00:27:02.756>from <00:27:03.018>a <00:27:03.279>component.

518
00:27:05.455 --> 00:27:07.635
<00:27:05.455>Um, <00:27:05.655>I <00:27:05.855>think <00:27:06.054>that's <00:27:06.254>it <00:27:06.455>for <00:27:06.655>the <00:27:06.855>demo.

519
00:27:11.495 --> 00:27:14.995
<00:27:11.495>So <00:27:11.669>again, <00:27:11.844>uh, <00:27:12.020>this, <00:27:12.195>uh, <00:27:12.370>we <00:27:12.544>wrote <00:27:12.719>this <00:27:12.895>library,

520
00:27:15.255 --> 00:27:17.675
<00:27:15.255>we <00:27:15.382>started <00:27:15.509>using <00:27:15.636>it <00:27:15.764>in <00:27:15.891>a <00:27:16.018>few <00:27:16.145>projects <00:27:16.273>and <00:27:16.400>got <00:27:16.527>some <00:27:16.655>feedback.

521
00:27:17.695 --> 00:27:20.755
<00:27:17.695>If <00:27:17.822>you <00:27:17.949>want <00:27:18.076>to <00:27:18.204>give <00:27:18.331>us <00:27:18.458>some <00:27:18.585>feedback, <00:27:18.713>we <00:27:18.840>would <00:27:18.967>love, <00:27:19.095>uh,

522
00:27:20.855 --> 00:27:22.795
<00:27:20.855>to <00:27:21.055>hear <00:27:21.255>your <00:27:21.455>thought <00:27:21.655>about <00:27:21.855>thoughts <00:27:22.055>about <00:27:22.255>it.

523
00:27:23.815 --> 00:27:28.075
<00:27:23.815>And <00:27:23.955>I <00:27:24.095>want <00:27:24.235>to <00:27:24.375>finish <00:27:24.515>with <00:27:24.655>a <00:27:24.795>quote, <00:27:24.935>which <00:27:25.075>is, <00:27:25.215>uh,

524
00:27:28.225 --> 00:27:32.475
<00:27:28.225>today's <00:27:28.425>hardest <00:27:28.625>trend <00:27:28.824>is <00:27:29.024>tomorrow's <00:27:29.225>legacy <00:27:29.425>code, <00:27:29.625>uh,

525
00:27:32.475 --> 00:27:33.635
<00:27:32.475>which <00:27:32.683>is <00:27:32.892>a <00:27:33.101>quote <00:27:33.310>I <00:27:33.519>like

526
00:27:33.635 --> 00:27:35.475
<00:27:33.635>to <00:27:33.868>use <00:27:34.101>when <00:27:34.335>I <00:27:34.568>make <00:27:34.801>technology <00:27:35.035>choices

527
00:27:35.545 --> 00:27:36.755
<00:27:35.545>between <00:27:36.089>different <00:27:36.634>tools

528
00:27:37.065 --> 00:27:39.995
<00:27:37.065>because <00:27:37.298>it <00:27:37.531>reminds <00:27:37.765>me <00:27:37.998>that <00:27:38.231>whatever <00:27:38.465>choice

529
00:27:39.995 --> 00:27:43.555
<00:27:39.995>that <00:27:40.122>I <00:27:40.249>will <00:27:40.376>make <00:27:40.504>will <00:27:40.631>probably <00:27:40.758>be <00:27:40.885>outdated <00:27:41.013>in <00:27:41.140>a <00:27:41.267>few <00:27:41.395>years.

530
00:27:44.135 --> 00:27:46.755
<00:27:44.135>So <00:27:44.275>it <00:27:44.415>doesn't <00:27:44.555>really <00:27:44.695>matter <00:27:44.835>to <00:27:44.975>go <00:27:45.115>with <00:27:45.254>the <00:27:45.395>hottest <00:27:45.535>trend.

531
00:27:47.065 --> 00:27:50.075
<00:27:47.065>What <00:27:47.205>is <00:27:47.345>important <00:27:47.485>is <00:27:47.625>to <00:27:47.765>choose <00:27:47.905>whatever <00:27:48.045>is <00:27:48.185>best <00:27:48.325>for <00:27:48.465>you

532
00:27:50.175 --> 00:27:52.715
<00:27:50.175>and <00:27:50.350>makes <00:27:50.524>sense, <00:27:50.700>uh, <00:27:50.875>to <00:27:51.050>you <00:27:51.225>and <00:27:51.399>your <00:27:51.575>team.

533
00:27:54.525 --> 00:27:57.595
<00:27:54.525>Thank <00:27:54.652>you <00:27:54.779>very <00:27:54.906>much <00:27:55.034>and <00:27:55.161>I <00:27:55.288>hope <00:27:55.415>you <00:27:55.543>have <00:27:55.670>a <00:27:55.797>good <00:27:55.925>time.

534
00:27:58.055 --> 00:28:00.235
<00:27:58.055>Uh, <00:27:58.405>stay <00:27:58.755>safe, <00:27:59.105>stay <00:27:59.455>home,

535
00:28:00.575 --> 00:28:02.795
<00:28:00.575>and <00:28:00.730>uh, <00:28:00.886>hope <00:28:01.041>you <00:28:01.197>enjoy <00:28:01.352>it <00:28:01.508>and <00:28:01.663>see <00:28:01.819>you <00:28:01.975>sometime.

536
00:28:05.175 --> 00:28:05.395
Bye.