1
00:00:00,000 --> 00:00:04,800
[MUSIC]

2
00:00:04,800 --> 00:00:08,730
Welcome to the last stage of
the React Components course.

3
00:00:08,730 --> 00:00:12,909
In the previous stage,
we created the stopwatch component.

4
00:00:12,909 --> 00:00:17,014
We started off by building
the elements of the stopwatch,

5
00:00:17,014 --> 00:00:20,216
then brought functionality to the buttons.

6
00:00:20,216 --> 00:00:24,155
We used the ternary operator to
conditionally render the start stop

7
00:00:24,155 --> 00:00:27,346
button, based on the running
state of the stopwatch.

8
00:00:27,346 --> 00:00:32,751
We implemented this using React's
useEffect hook, which lets you perform

9
00:00:32,751 --> 00:00:37,575
side effects like fetching data,
or in our case setting up a timer.

10
00:00:37,575 --> 00:00:43,556
By default useEffect hook runs after
the first render and after every update,

11
00:00:43,556 --> 00:00:48,461
but we customize that behavior
by passing it a second argument.

12
00:00:48,461 --> 00:00:50,336
When working with useEffect hooks,

13
00:00:50,336 --> 00:00:53,367
it's good to know that there
are two kinds of side effects.

14
00:00:53,367 --> 00:00:57,420
Those that don't require cleanup and
those that do.

15
00:00:57,420 --> 00:00:59,793
Well, our side effect is the latter kind.

16
00:00:59,793 --> 00:01:04,901
So we needed to do some cleanup,
or else the timer would continue

17
00:01:04,901 --> 00:01:09,266
running its callback forever
wasting CPU and memory.

18
00:01:09,266 --> 00:01:14,651
We did so by having our side effect return
a cleanup function that cleared the timer.

19
00:01:14,651 --> 00:01:18,943
React performs the cleanup
function in two situations.

20
00:01:18,943 --> 00:01:23,526
Before running the next side effect,
and when the component unmounts.

21
00:01:23,526 --> 00:01:27,631
Having the cleanup function run
when the component unmounts,

22
00:01:27,631 --> 00:01:32,212
helps prevent memory leaks that
can negatively impact performance.

23
00:01:32,212 --> 00:01:33,369
In this stage,

24
00:01:33,369 --> 00:01:38,985
I'll teach you a few useful patterns
you can use in your React components.

25
00:01:38,985 --> 00:01:43,773
These patterns will not only help
prevent you from writing messy and

26
00:01:43,773 --> 00:01:48,225
overcomplicated code, but
also help you create flexible more

27
00:01:48,225 --> 00:01:53,105
performant components that are easier
to understand and maintain.

28
00:01:53,105 --> 00:01:57,870
We'll start off by learning how
to use React.memo() to produce

29
00:01:57,870 --> 00:02:00,259
a performance boost in your app.

30
00:02:00,259 --> 00:02:05,791
We'll also use destructuring to
unpack props into distinct variables.

31
00:02:05,791 --> 00:02:09,960
There's one more React hook
I wanna introduce you to.

32
00:02:09,960 --> 00:02:11,444
It's the useRef hook.

33
00:02:11,444 --> 00:02:14,861
It's another React hook that stores data.

34
00:02:14,861 --> 00:02:19,170
So I'll also let you know when to
use it over the useState hook.

35
00:02:19,170 --> 00:02:24,427
Lastly, we'll talk about how to
validate props with PropTypes.

36
00:02:24,427 --> 00:02:28,320
PropTypes is a library that adds
type checking abilities to your app.

37
00:02:28,320 --> 00:02:33,217
It will tell React to throw an error
when a component prop does not match

38
00:02:33,217 --> 00:02:35,627
the data type you were expecting.

39
00:02:35,627 --> 00:02:39,690
For example, the counter component
expects the prop score to be a number.

40
00:02:39,690 --> 00:02:44,763
But if for some reason counter
receives a string as the score prop,

41
00:02:44,763 --> 00:02:46,856
React will throw an error.

42
00:02:46,856 --> 00:02:51,227
You can even use PropTypes to
mark a prop as required, or

43
00:02:51,227 --> 00:02:55,416
provide a default value if
the prop isn't provided.

44
00:02:55,416 --> 00:02:58,865
Lastly, you'll get an opportunity
to practice much of what you've

45
00:02:58,865 --> 00:02:59,700
learned so far.

46
00:02:59,700 --> 00:03:01,030
Let's get started!