1
00:00:03,000 --> 00:00:05,871
We're now using the "useQuery" hook

2
00:00:05,871 --> 00:00:08,579
to fetch and cache the user data.

3
00:00:08,579 --> 00:00:12,189
Now, one advantage of React hooks in general

4
00:00:12,189 --> 00:00:16,455
is that they make it easy to extract reusable logic.

5
00:00:17,201 --> 00:00:21,150
So what I want to do now is extract this bit of code

6
00:00:21,150 --> 00:00:23,276
into a custom hook function.

7
00:00:23,851 --> 00:00:26,855
This way we can move the data fetching logic

8
00:00:26,855 --> 00:00:28,562
outside of the component.

9
00:00:29,130 --> 00:00:30,884
I like to have another folder

10
00:00:30,884 --> 00:00:33,786
at the top-level of the project, called "hooks".

11
00:00:34,346 --> 00:00:37,014
And inside that we can create a new module,

12
00:00:37,014 --> 00:00:38,379
that I'll call "user".

13
00:00:38,941 --> 00:00:42,065
Here we want to create a custom React hook,

14
00:00:42,065 --> 00:00:45,988
that's simply a function whose name starts with "use".

15
00:00:46,560 --> 00:00:49,255
In this case we can call it "useUser",

16
00:00:49,255 --> 00:00:51,738
since it will return the user data.

17
00:00:52,308 --> 00:00:55,291
Now, in that function we simply want to do

18
00:00:55,291 --> 00:00:57,848
the same thing we did in the NavBar,

19
00:00:57,848 --> 00:00:59,552
that is call "useQuery".

20
00:01:00,194 --> 00:01:03,683
But from here we want to return the "query.data",

21
00:01:03,683 --> 00:01:05,319
that is the user value.

22
00:01:05,891 --> 00:01:09,150
Then we need to import any functions we use,

23
00:01:09,150 --> 00:01:11,816
that are "useQuery" and "fetchJson".

24
00:01:12,390 --> 00:01:15,198
And that's it. We wrote a custom hook.

25
00:01:15,698 --> 00:01:19,244
With this, in the NavBar we can remove the old code,

26
00:01:19,744 --> 00:01:22,311
and simply call "useUser" instead,

27
00:01:22,311 --> 00:01:24,952
that will return the "user" object.

28
00:01:25,527 --> 00:01:28,470
We can also remove the "useQuery" import,

29
00:01:28,470 --> 00:01:31,628
since we're no longer using it in this file.

30
00:01:31,628 --> 00:01:34,068
So, this is already better because

31
00:01:34,068 --> 00:01:36,939
we moved all the logic to fetch the data

32
00:01:36,939 --> 00:01:38,231
to its own module,

33
00:01:38,231 --> 00:01:40,671
which means that in this component

34
00:01:40,671 --> 00:01:44,332
we can focus on how to render the data on the page.

35
00:01:45,262 --> 00:01:48,029
But let's test our app and make sure

36
00:01:48,029 --> 00:01:51,410
that we didn't accidentally break something.

37
00:01:51,410 --> 00:01:52,947
It still works fine:

38
00:01:52,947 --> 00:01:56,635
the NavBar shows that we are signed in as Alice.

39
00:01:56,635 --> 00:02:00,323
Now, the other advantage of having a custom hook

40
00:02:00,323 --> 00:02:03,550
is that if we want to access the user data

41
00:02:03,550 --> 00:02:07,392
in some other component we can easily do that now.

42
00:02:08,353 --> 00:02:10,526
For example, if we go to the ProductPage,

43
00:02:11,026 --> 00:02:13,487
let's suppose we want to add that

44
00:02:13,487 --> 00:02:16,619
slightly silly feature I suggested before,

45
00:02:16,619 --> 00:02:19,899
that is display that this is a special price

46
00:02:19,899 --> 00:02:21,316
just for this user.

47
00:02:22,039 --> 00:02:24,447
Now that we have this "useUser" hook

48
00:02:24,447 --> 00:02:26,386
we can simply copy this line,

49
00:02:26,953 --> 00:02:29,684
and go and paste it into the ProductPage,

50
00:02:29,684 --> 00:02:30,816
that is this one.

51
00:02:33,618 --> 00:02:37,079
At the beginning we can call our "useUser" hook

52
00:02:37,079 --> 00:02:38,993
and get the "user" object,

53
00:02:39,567 --> 00:02:41,185
so that, after the price,

54
00:02:41,185 --> 00:02:42,998
we can add another paragraph

55
00:02:44,599 --> 00:02:47,525
saying "Only for" and the "user.name".

56
00:02:48,966 --> 00:02:50,821
And if we save, there it is:

57
00:02:50,821 --> 00:02:52,610
it says "Only for Alice!!!"

58
00:02:53,177 --> 00:02:54,702
Ideally we should check

59
00:02:54,702 --> 00:02:57,022
if the user is authenticated first.

60
00:02:57,589 --> 00:02:59,321
But that doesn't matter, because

61
00:02:59,321 --> 00:03:00,944
this was just a quick example,

62
00:03:01,755 --> 00:03:03,880
and I'll undo these changes now.

63
00:03:04,380 --> 00:03:07,122
But that shows how easy it is now

64
00:03:07,122 --> 00:03:11,112
to get the "user" data in any of our components.

65
00:03:11,112 --> 00:03:14,520
No need to use a state management library

66
00:03:14,520 --> 00:03:16,598
such as Redux or similar.

67
00:03:17,348 --> 00:03:20,984
So, I strongly recommend creating a custom hook

68
00:03:20,984 --> 00:03:24,389
for any piece of data you fetch from an API,

69
00:03:24,967 --> 00:03:27,566
encapsulating the "useQuery" call

70
00:03:27,566 --> 00:03:30,481
with the right data fetching function

71
00:03:30,481 --> 00:03:32,529
and configuration options.