WEBVTT

1
00:00:00.160 --> 00:00:00.860
Hi there.

2
00:00:00.890 --> 00:00:04.610
In this video, we're going to talk
about custom hooks in react native.

3
00:00:04.640 --> 00:00:06.900
Custom hooks are powerful tool that can

4
00:00:06.930 --> 00:00:11.900
help simplify your code, make it more
reusable, and improve its performance.

5
00:00:11.930 --> 00:00:15.500
We'll explain what custom hook are,
why they are useful,

6
00:00:15.530 --> 00:00:19.420
what problems they solve, and in what
situations you might use them.

7
00:00:19.450 --> 00:00:23.900
Then we'll provide an example of a custom
hook and walk you through the code.

8
00:00:23.920 --> 00:00:26.060
So what are custom custom hooks?

9
00:00:26.080 --> 00:00:28.460
Custom hooks are functions that use other

10
00:00:28.490 --> 00:00:32.180
hooks to add functionality
to your react native application.

11
00:00:32.210 --> 00:00:35.340
They allow you to encapsulate common logic

12
00:00:35.370 --> 00:00:38.007
in a reusable function that can be used

13
00:00:38.207 --> 00:00:40.780
across different components and projects.

14
00:00:40.810 --> 00:00:43.180
Custom hooks can be used to handle common

15
00:00:43.210 --> 00:00:49.060
tasks such as state management, data
fetching, navigation, theming, and more.

16
00:00:49.090 --> 00:00:51.220
So why are they useful?

17
00:00:51.250 --> 00:00:53.765
They are useful because they can help

18
00:00:53.965 --> 00:00:56.620
simplify your code and reduce duplication.

19
00:00:56.650 --> 00:00:59.384
By encapsulating common functionality

20
00:00:59.584 --> 00:01:02.340
in a custom hook, you can make it easier

21
00:01:02.370 --> 00:01:03.792
to share code between

22
00:01:03.992 --> 00:01:05.620
components across projects.

23
00:01:05.650 --> 00:01:08.064
Custom hook can also help to improve

24
00:01:08.264 --> 00:01:10.410
the readability and maintainability

25
00:01:10.440 --> 00:01:12.594
of your code by separating

26
00:01:12.794 --> 00:01:15.410
concerns and reducing duplication.

27
00:01:15.440 --> 00:01:18.050
So what problems do custom hooks solve?

28
00:01:18.080 --> 00:01:20.130
Custom hooks can help to solve several

29
00:01:20.160 --> 00:01:21.701
common problems that arise

30
00:01:21.901 --> 00:01:23.420
in react native applications.

31
00:01:23.450 --> 00:01:25.460
For example, they can help to simplify

32
00:01:25.490 --> 00:01:30.930
state management by abstracting away
the details of managing state variables

33
00:01:30.960 --> 00:01:35.740
and providing a simple way
for updating and accessing state.

34
00:01:35.770 --> 00:01:40.140
Custom hooks can also help to improve
performance by preventing unnecessary

35
00:01:40.170 --> 00:01:44.620
rerenders and optimizing
the rendering of complex components.

36
00:01:44.650 --> 00:01:46.740
So when should you use them?

37
00:01:46.770 --> 00:01:49.076
You should consider using custom hook

38
00:01:49.276 --> 00:01:51.570
in any situation where you find yourself

39
00:01:51.600 --> 00:01:53.533
repeating the same code across

40
00:01:53.733 --> 00:01:55.660
different components or projects.

41
00:01:55.690 --> 00:01:58.290
Custom hook can be particularly useful

42
00:01:58.320 --> 00:02:01.058
in complex applications that require a lot

43
00:02:01.258 --> 00:02:03.340
of state management, data fetching,

44
00:02:03.370 --> 00:02:04.822
navigation, theming,

45
00:02:05.022 --> 00:02:06.420
or other common tasks.

46
00:02:06.450 --> 00:02:08.393
They can also be helpful in situations

47
00:02:08.593 --> 00:02:10.540
where you need to optimize the performance

48
00:02:10.570 --> 00:02:13.324
of your application or reduce the amount

49
00:02:13.524 --> 00:02:15.940
of boilerplate code you need to write.

50
00:02:15.970 --> 00:02:19.540
So let's take a look
at example of a custom hook.

51
00:02:19.570 --> 00:02:22.610
You're now looking at my editor
with my simulator open,

52
00:02:22.640 --> 00:02:26.380
my Metro bundler running,
and we're back to our Hello World

53
00:02:26.410 --> 00:02:33.100
application so that we can simply
convey the idea of using custom hook.

54
00:02:33.130 --> 00:02:40.140
So let's imagine a scenario where
you need to toggle a button.

55
00:02:40.160 --> 00:02:43.260
Okay?
So let's create a button here.

56
00:02:43.290 --> 00:02:45.610
I just imported the button from here

57
00:02:45.640 --> 00:02:51.600
and let's give it a title
and let's call it a Toggle button.

58
00:02:52.920 --> 00:02:56.700
And then let's say that when you press

59
00:02:56.730 --> 00:03:01.100
this button, you want to toggle
the value of the button.

60
00:03:01.120 --> 00:03:03.260
Okay?
So in that case,

61
00:03:03.290 --> 00:03:08.020
if you have a button that toggles
the value from true to false many times

62
00:03:08.050 --> 00:03:15.260
during your project, in some different
cases you could create a use toggle hook.

63
00:03:15.290 --> 00:03:17.610
So let's create a folder here called

64
00:03:17.640 --> 00:03:21.889
Custom hooks and then let's create a new

65
00:03:22.089 --> 00:03:25.820
file and let's call it Use toggle JS.

66
00:03:25.850 --> 00:03:28.740
And here let's create a simple hook

67
00:03:28.770 --> 00:03:37.140
that just toggles the value of a state
from true to false or from false to true.

68
00:03:37.170 --> 00:03:41.380
So let's import useState hook from react.

69
00:03:41.410 --> 00:03:50.880
Let's create a use toggle hook and let's
set its initial value to be false

70
00:03:50.920 --> 00:03:58.780
and then let's use the value
state and set it to initial value that we

71
00:03:58.810 --> 00:04:03.610
pass to this use Toggle function
and then let's say that we have a function

72
00:04:03.640 --> 00:04:11.020
that toggles this value and sets
value to the opposite value, okay?

73
00:04:11.050 --> 00:04:17.740
And then we just can return
the value and the Toggle function.

74
00:04:17.770 --> 00:04:22.200
Let's export this use toggle

75
00:04:22.320 --> 00:04:26.980
function and let's see how we
could use it in our application.

76
00:04:27.010 --> 00:04:31.860
So this custom hook uses the useState hook
to create a new state variables called

77
00:04:31.890 --> 00:04:36.580
value and a function called set value
that can be used to update the state.

78
00:04:36.600 --> 00:04:38.860
It also defines a function called Toggle

79
00:04:38.890 --> 00:04:44.500
that toggles the value of the value
variable that we created and finally it

80
00:04:44.530 --> 00:04:48.980
returns an array that contains the current
value and the Toggle function.

81
00:04:49.010 --> 00:04:58.380
So if we wanted to use Toggle here we
could just create a state and say that we

82
00:04:58.410 --> 00:05:07.420
have an isOn variables and toggle is
on setter and we could use the use toggle

83
00:05:07.450 --> 00:05:13.060
that I just imported here and we can
give it the initial value of false.

84
00:05:13.090 --> 00:05:14.980
Now, to see this in action,

85
00:05:15.010 --> 00:05:21.500
let's create a text component here
and let's say that if the value is on,

86
00:05:21.530 --> 00:05:26.500
we say that it is on,
otherwise we say that it is off.

87
00:05:26.530 --> 00:05:28.900
So we see that currently it is off.

88
00:05:28.920 --> 00:05:31.540
But if I press this button

89
00:05:31.570 --> 00:05:38.340
and let's make sure that onpress
I use toggle is on setter.

90
00:05:38.360 --> 00:05:40.660
So let's save this again and let's press

91
00:05:40.690 --> 00:05:45.380
this button, we're going to see that it's
switched from off state to on state.

92
00:05:45.410 --> 00:05:48.380
So as many times as I press it,

93
00:05:48.410 --> 00:05:52.980
this state will be updated using
the use toggle hook that we created.

94
00:05:53.010 --> 00:05:55.500
Now as you know, something like this might

95
00:05:55.530 --> 00:06:02.140
happen a lot in our application where we
need to toggle a value from false to true

96
00:06:02.170 --> 00:06:08.220
or from true to false and a hook like
this could be useful in a lot of cases.

97
00:06:08.250 --> 00:06:12.260
So in conclusion,
custom hooks are a powerful tool that can

98
00:06:12.290 --> 00:06:16.740
help simplify your code, make it more
reusable and improve its performance.

99
00:06:16.770 --> 00:06:21.380
By encapsulating common functionality
in a custom hook, you can make it easier

100
00:06:21.410 --> 00:06:24.540
to share code between
components and across projects.

101
00:06:24.570 --> 00:06:26.740
If you find yourself repeating the same

102
00:06:26.770 --> 00:06:31.580
code across different components or
projects, consider creating a custom hook

103
00:06:31.600 --> 00:06:34.740
to encapsulate that logic
and make it more reusable.

104
00:06:34.770 --> 00:06:36.820
I hope this video has been helpful

105
00:06:36.850 --> 00:06:40.340
in explaining what custom hooks are,
why they are useful,

106
00:06:40.360 --> 00:06:44.540
what problems they solve and in what
situation you might use them.

107
00:06:44.570 --> 00:06:49.200
So thanks for watching and I'll
see you in the next section.