- Read Tutorial
- Watch Guide Video
WEBVTT
1
00:00:00.760 --> 00:00:04.410
Now that you've gone through the ref documentation,
2
00:00:04.410 --> 00:00:08.220
let's actually build out a real world implementation.
3
00:00:08.220 --> 00:00:12.000
So I'm gonna start on the post form screen here.
4
00:00:12.000 --> 00:00:14.000
And the first thing that I need to do,
5
00:00:14.000 --> 00:00:17.090
is I need to bring in a new hook from React.
6
00:00:17.090 --> 00:00:21.870
So at the very top, I'm gonna import use ref.
7
00:00:21.870 --> 00:00:24.600
And then after I've imported, use ref,
8
00:00:24.600 --> 00:00:26.930
I have to actually invoke it.
9
00:00:26.930 --> 00:00:29.900
So I have to create a reference
10
00:00:29.900 --> 00:00:32.320
down below in the component itself.
11
00:00:32.320 --> 00:00:35.840
So at the very top here, right where it says export default,
12
00:00:35.840 --> 00:00:40.040
on the line below, I'm gonna create a image picker ref.
13
00:00:40.040 --> 00:00:43.610
So I'm gonna say const image picker ref.
14
00:00:43.610 --> 00:00:45.590
This is just a variable.
15
00:00:45.590 --> 00:00:50.590
And then I am going to from there, say use ref.
16
00:00:51.627 --> 00:00:54.670
And then I'm gonna call it, because it is a function,
17
00:00:54.670 --> 00:00:58.100
and you don't pass in any arguments to it as a function.
18
00:00:58.100 --> 00:01:01.420
So the next thing I'm gonna do is I'm gonna pretend
19
00:01:01.420 --> 00:01:06.140
like our system, our image picker component
20
00:01:06.140 --> 00:01:09.630
already has access to the ref,
21
00:01:09.630 --> 00:01:11.700
and that it's already structured,
22
00:01:11.700 --> 00:01:13.510
and it has the forwarding ref,
23
00:01:13.510 --> 00:01:15.150
and it has the imperative handle.
24
00:01:15.150 --> 00:01:17.060
I'm gonna pretend like that's all done.
25
00:01:17.060 --> 00:01:20.180
Many times when I'm building out my applications,
26
00:01:20.180 --> 00:01:25.180
I like to build out how I'm going to work with a component
27
00:01:25.390 --> 00:01:28.870
before I've actually built the entire implementation.
28
00:01:28.870 --> 00:01:31.840
And you can definitely, we could do it the other way around.
29
00:01:31.840 --> 00:01:35.630
We could create the, we could really structure
30
00:01:35.630 --> 00:01:37.550
our pick image picker first,
31
00:01:37.550 --> 00:01:40.100
but I personally like doing it this way.
32
00:01:40.100 --> 00:01:42.480
So I have my image picker ref, and the way
33
00:01:42.480 --> 00:01:45.640
that I want to work with this is I wanna be able
34
00:01:45.640 --> 00:01:49.430
to say image picker, imagePickerRef.current
35
00:01:52.320 --> 00:01:54.870
and because we're using TypeScript
36
00:01:54.870 --> 00:01:58.890
and because we used the use ref hook,
37
00:01:58.890 --> 00:02:02.640
then it knows we have access to this current value.
38
00:02:02.640 --> 00:02:05.330
Now, if you went through the documentation,
39
00:02:05.330 --> 00:02:07.430
especially the one for use ref,
40
00:02:07.430 --> 00:02:11.270
you'll see that you need to call current on the reference
41
00:02:11.270 --> 00:02:14.350
that's giving you the current reference
42
00:02:14.350 --> 00:02:16.010
to that child component.
43
00:02:16.010 --> 00:02:19.173
So we're gonna say, imagePickerRef.current.
44
00:02:20.023 --> 00:02:21.730
and this is where it gets a little bit tricky.
45
00:02:21.730 --> 00:02:24.560
We're gonna just say clear image,
46
00:02:24.560 --> 00:02:26.160
and we're gonna call this function.
47
00:02:26.160 --> 00:02:28.540
Now this function doesn't exist yet,
48
00:02:28.540 --> 00:02:30.370
we need to create this one.
49
00:02:30.370 --> 00:02:32.050
And then we also need to say
50
00:02:32.050 --> 00:02:36.760
that image picker ref is going to be of type any
51
00:02:36.760 --> 00:02:39.850
that's going to allow us to call this clear image.
52
00:02:39.850 --> 00:02:42.790
So that is exactly what we wanna happen.
53
00:02:42.790 --> 00:02:44.700
Now, none of that's been built out yet,
54
00:02:44.700 --> 00:02:48.570
but we're wiring it up so that when we do customize
55
00:02:48.570 --> 00:02:51.150
our post image picker, this is gonna work.
56
00:02:51.150 --> 00:02:53.730
And then the last thing that we have to do
57
00:02:53.730 --> 00:02:56.800
is go all the way down to where we're calling
58
00:02:56.800 --> 00:03:00.840
that post image picker component, which is right here,
59
00:03:00.840 --> 00:03:03.420
and this is where we wire up the ref.
60
00:03:03.420 --> 00:03:05.880
So I'm gonna say ref, equals,
61
00:03:05.880 --> 00:03:08.940
and then in curly brackets, image picker ref.
62
00:03:08.940 --> 00:03:10.170
Now we're getting an error here,
63
00:03:10.170 --> 00:03:12.630
because we need to go to our interface
64
00:03:12.630 --> 00:03:15.710
and say that a reference can be passed to it.
65
00:03:15.710 --> 00:03:19.620
But this is the syntax that you would use for this.
66
00:03:19.620 --> 00:03:21.110
So I'm gonna hit Save here.
67
00:03:21.110 --> 00:03:23.310
And that's everything that we need to do
68
00:03:23.310 --> 00:03:25.880
for our post form screen.
69
00:03:25.880 --> 00:03:30.310
Now, let's open up the post image picker.
70
00:03:30.310 --> 00:03:32.560
And let's see what we have to do here.
71
00:03:32.560 --> 00:03:33.810
Well, first and foremost,
72
00:03:33.810 --> 00:03:36.890
we need to go and we need to import
73
00:03:36.890 --> 00:03:39.730
those other two elements that you researched.
74
00:03:39.730 --> 00:03:43.680
So we need to import the forward ref,
75
00:03:43.680 --> 00:03:48.680
and then the imperative, use imperative handle.
76
00:03:48.950 --> 00:03:51.680
And these are our two new ones that we're importing.
77
00:03:51.680 --> 00:03:53.550
I'm also gonna get rid of this view tag
78
00:03:53.550 --> 00:03:56.020
cause we're not using that and that's a dead code.
79
00:03:56.020 --> 00:03:59.460
So I'm gonna hit save, and that's all we need to do.
80
00:03:59.460 --> 00:04:03.550
I'll also open up the simulator, just so you can see that.
81
00:04:03.550 --> 00:04:06.630
And now you can close out that warning
82
00:04:06.630 --> 00:04:08.530
cause we're gonna fix that right now.
83
00:04:08.530 --> 00:04:10.530
Okay, so we've imported it.
84
00:04:10.530 --> 00:04:14.450
Now this is probably gonna be one of the trickiest parts
85
00:04:14.450 --> 00:04:18.150
of this entire, entire lesson
86
00:04:18.150 --> 00:04:20.920
and potentially even this entire course,
87
00:04:20.920 --> 00:04:23.040
if you've never used this before.
88
00:04:23.040 --> 00:04:26.690
So the way that forward ref works
89
00:04:26.690 --> 00:04:31.690
is that it gives us a connection between the component
90
00:04:32.280 --> 00:04:34.880
we're working on and the parent component.
91
00:04:34.880 --> 00:04:36.500
But in order to do that,
92
00:04:36.500 --> 00:04:40.490
we actually have to wrap this entire component
93
00:04:40.490 --> 00:04:43.420
inside of forward ref.
94
00:04:43.420 --> 00:04:44.890
So I'm gonna type this out,
95
00:04:44.890 --> 00:04:46.760
and then we're gonna walk through it,
96
00:04:46.760 --> 00:04:48.400
and kinda reverse engineer
97
00:04:48.400 --> 00:04:50.740
and see exactly how it's working.
98
00:04:50.740 --> 00:04:54.430
So export default, and then right here,
99
00:04:54.430 --> 00:04:56.390
right before I say props,
100
00:04:56.390 --> 00:04:59.840
I'm going to say, forward ref
101
00:05:02.490 --> 00:05:06.380
And then inside or right after I say forward ref,
102
00:05:06.380 --> 00:05:08.090
I'm gonna add a set of parens.
103
00:05:08.090 --> 00:05:09.850
So you should see two parens,
104
00:05:09.850 --> 00:05:14.520
one right outside forward ref and one right beside props.
105
00:05:14.520 --> 00:05:16.590
And then right after props,
106
00:05:16.590 --> 00:05:19.500
what you're gonna do is you're gonna say props,
107
00:05:19.500 --> 00:05:23.430
and then there, you're gonna say I now also want
108
00:05:23.430 --> 00:05:26.080
to have access to the ref.
109
00:05:26.080 --> 00:05:27.850
Now, don't worry if that's confusing,
110
00:05:27.850 --> 00:05:29.430
we are gonna walk through that.
111
00:05:29.430 --> 00:05:31.720
And then lastly, we have a syntax error here
112
00:05:31.720 --> 00:05:33.800
because the entire component needs
113
00:05:33.800 --> 00:05:35.630
to be wrapped in parens.
114
00:05:35.630 --> 00:05:38.900
So we need to come down all the way to the very end here
115
00:05:38.900 --> 00:05:41.500
and right at the curly bracket
116
00:05:41.500 --> 00:05:44.720
right after the curly bracket and before the colon,
117
00:05:44.720 --> 00:05:49.220
then add a paren there, and hit save.
118
00:05:49.220 --> 00:05:50.780
And we don't have any error.
119
00:05:50.780 --> 00:05:53.820
So this is, this is working good.
120
00:05:53.820 --> 00:05:55.320
Now it might still be a little confusing
121
00:05:55.320 --> 00:05:57.010
cause we've never done this before,
122
00:05:57.010 --> 00:05:59.440
but we at least have everything
123
00:05:59.440 --> 00:06:01.630
to the point where it's not throwing a TypeScript
124
00:06:01.630 --> 00:06:04.340
or any type of compile errors.
125
00:06:04.340 --> 00:06:06.570
Okay, now that we have our forward ref,
126
00:06:06.570 --> 00:06:08.400
and this is now wrapping up
127
00:06:08.400 --> 00:06:11.600
the entire post image picker component.
128
00:06:11.600 --> 00:06:16.600
Now we're going to work with our use imperative handle hook.
129
00:06:16.880 --> 00:06:21.070
So I'm gonna come down right below where it says set image,
130
00:06:21.070 --> 00:06:23.170
but you could put it anywhere in this component.
131
00:06:23.170 --> 00:06:26.630
And I'm gonna say use imperative handle.
132
00:06:26.630 --> 00:06:29.640
And this is a function, the first argument
133
00:06:29.640 --> 00:06:32.230
in the function is gonna be the reference.
134
00:06:32.230 --> 00:06:36.270
And then the second is gonna be an anonymous function.
135
00:06:36.270 --> 00:06:38.710
So we're gonna start off by saying parens
136
00:06:38.710 --> 00:06:41.540
with a fat arrow function.
137
00:06:41.540 --> 00:06:43.590
And then right after that, I'm gonna
138
00:06:43.590 --> 00:06:47.830
add some more parens and inside of that, an object.
139
00:06:47.830 --> 00:06:50.050
So let's, it here I'll give a space
140
00:06:50.050 --> 00:06:52.730
so you can see everything that I've typed out.
141
00:06:52.730 --> 00:06:55.910
So you have, use imperative handle, which is a function,
142
00:06:55.910 --> 00:06:58.080
so we're calling that, that's why we have parens.
143
00:06:58.080 --> 00:07:00.430
The first argument is gonna be the reference,
144
00:07:00.430 --> 00:07:03.900
now this is the same reference that is coming from up here.
145
00:07:03.900 --> 00:07:07.000
And we're gonna walk through exactly how the data
146
00:07:07.000 --> 00:07:09.600
is flowing right after we get it working.
147
00:07:09.600 --> 00:07:12.730
So this is our reference, then we're passing
148
00:07:12.730 --> 00:07:15.140
in an anonymous function here,
149
00:07:15.140 --> 00:07:19.230
and then so what, and then right after the anonymous
150
00:07:19.230 --> 00:07:23.470
function with our fat arrow, we're calling this paren.
151
00:07:23.470 --> 00:07:25.200
That means that it's giving
152
00:07:25.200 --> 00:07:28.010
us an imperative return statement.
153
00:07:28.010 --> 00:07:31.483
This is exactly the same, as if I typed this.
154
00:07:32.720 --> 00:07:35.230
It's exactly the same as if I then type
155
00:07:35.230 --> 00:07:37.480
that in then we did our work there.
156
00:07:37.480 --> 00:07:41.050
But because we only have one line of code
157
00:07:41.050 --> 00:07:42.410
that we're gonna be adding,
158
00:07:42.410 --> 00:07:44.550
then I'm not gonna do that, I'm simply
159
00:07:44.550 --> 00:07:47.600
going to have it have the imperative return.
160
00:07:47.600 --> 00:07:50.280
So we're using our imperative handle,
161
00:07:50.280 --> 00:07:51.327
we have access to our ref,
162
00:07:51.327 --> 00:07:54.150
and then we have our function here.
163
00:07:54.150 --> 00:07:56.460
What do we want to happen?
164
00:07:56.460 --> 00:07:58.720
Well, I'm gonna create a function
165
00:07:58.720 --> 00:08:02.190
and it's just gonna be called, clear image,
166
00:08:02.190 --> 00:08:04.640
it's not gonna take in any arguments,
167
00:08:04.640 --> 00:08:06.840
and then inside of this function,
168
00:08:06.840 --> 00:08:11.440
I can call set image, and set it to null,
169
00:08:11.440 --> 00:08:14.860
this is calling our use state hook
170
00:08:14.860 --> 00:08:16.540
that we've already been using.
171
00:08:16.540 --> 00:08:18.740
So let me hit Save here,
172
00:08:18.740 --> 00:08:22.180
and so, this is the same clear image function
173
00:08:22.180 --> 00:08:25.630
that I told you we were gonna create in the post form.
174
00:08:25.630 --> 00:08:29.040
So up top in the form in our base state,
175
00:08:29.040 --> 00:08:31.960
we said we're gonna have this image picker ref,
176
00:08:31.960 --> 00:08:34.480
it is going to access the current reference,
177
00:08:34.480 --> 00:08:37.770
which means the current state of that component,
178
00:08:37.770 --> 00:08:39.780
and then we're gonna call it clear image,
179
00:08:39.780 --> 00:08:41.550
now that could have been called anything.
180
00:08:41.550 --> 00:08:44.060
And if were, just for clarity,
181
00:08:44.060 --> 00:08:46.930
I thought it made sense to be called clear image.
182
00:08:46.930 --> 00:08:50.720
Now, how exactly is this going to work?
183
00:08:50.720 --> 00:08:53.940
Well, we have, now because we've wrapped up
184
00:08:53.940 --> 00:08:56.830
this entire component in a forward ref,
185
00:08:56.830 --> 00:09:00.500
what that means is it's forwarding the reference
186
00:09:00.500 --> 00:09:05.470
from the parent component down into our own function here,
187
00:09:05.470 --> 00:09:08.040
that's the reason why we now have access
188
00:09:08.040 --> 00:09:09.860
to these two functions,
189
00:09:09.860 --> 00:09:13.870
we have the function that is, or we have the argument,
190
00:09:13.870 --> 00:09:16.830
that's our props, and then we have the second one now
191
00:09:16.830 --> 00:09:18.490
that is gonna be our ref.
192
00:09:18.490 --> 00:09:21.330
And lemme also go here and verify,
193
00:09:21.330 --> 00:09:23.200
I'm gonna look at the post image,
194
00:09:23.200 --> 00:09:27.690
and yes, you can see that because we are using forward ref,
195
00:09:27.690 --> 00:09:31.220
we don't even need to update our interface.
196
00:09:31.220 --> 00:09:34.710
Notice that because we're passing in a ref,
197
00:09:34.710 --> 00:09:37.850
we don't even need to come up here and say something like,
198
00:09:37.850 --> 00:09:40.860
you know, ref any, we don't have to do that,
199
00:09:40.860 --> 00:09:43.770
because we're using this forwarding ref,
200
00:09:43.770 --> 00:09:45.920
which means it's telling TypeScript
201
00:09:45.920 --> 00:09:48.210
that this is something where we can pass
202
00:09:48.210 --> 00:09:51.120
a ref automatically, that's the first part.
203
00:09:51.120 --> 00:09:55.640
So you could think of this as being a reference point
204
00:09:55.640 --> 00:09:59.670
that this post image picker now has access to.
205
00:09:59.670 --> 00:10:02.030
But now what's happening down here?
206
00:10:02.030 --> 00:10:06.330
So use imperative handle, I absolutely love
207
00:10:06.330 --> 00:10:10.270
the name they went with, especially the word handle here,
208
00:10:10.270 --> 00:10:12.130
because of the way that I like to personally
209
00:10:12.130 --> 00:10:14.750
visualize this, this is what helped me understand it,
210
00:10:14.750 --> 00:10:16.620
when I was teaching it to myself,
211
00:10:16.620 --> 00:10:20.590
is that this is giving the parent component,
212
00:10:20.590 --> 00:10:24.870
a handle on this child component.
213
00:10:24.870 --> 00:10:27.750
So it's giving away of reaching in,
214
00:10:27.750 --> 00:10:30.910
and doing anything that it needs to do.
215
00:10:30.910 --> 00:10:34.000
In this case, it is giving the ability
216
00:10:34.000 --> 00:10:36.340
to access this function.
217
00:10:36.340 --> 00:10:39.570
And inside of that function, it's now able
218
00:10:39.570 --> 00:10:44.090
to give us our base state, it's able to call set image.
219
00:10:44.090 --> 00:10:46.000
So the way this is gonna work
220
00:10:46.000 --> 00:10:49.330
is whenever the post form screen loads up,
221
00:10:49.330 --> 00:10:52.320
like we have right here, it's gonna load up,
222
00:10:52.320 --> 00:10:55.150
the user is gonna type in their information,
223
00:10:55.150 --> 00:10:58.540
they're going to go and they're gonna pick out an image
224
00:10:58.540 --> 00:11:01.770
just like they've done right here.
225
00:11:01.770 --> 00:11:04.410
And so now when I hit submit,
226
00:11:04.410 --> 00:11:08.440
not only are we going to go and access
227
00:11:08.440 --> 00:11:11.810
this base state function, where we're gonna reset the name,
228
00:11:11.810 --> 00:11:15.240
the content, the post image, meaning the data,
229
00:11:15.240 --> 00:11:17.200
and then the set submitting to false,
230
00:11:17.200 --> 00:11:20.670
not only are we gonna do all that, now we're grabbing
231
00:11:20.670 --> 00:11:25.150
a handle on this post image picker component,
232
00:11:25.150 --> 00:11:27.840
and we're saying, hey, whenever that occurs,
233
00:11:27.840 --> 00:11:31.490
I want you to get me the current value of the component.
234
00:11:31.490 --> 00:11:34.770
And then I wanna call clear image,
235
00:11:34.770 --> 00:11:37.360
I wanna call this function on it.
236
00:11:37.360 --> 00:11:40.810
And then what post image picker does, is it has wired
237
00:11:40.810 --> 00:11:43.800
all that up for us, it gives us the ability
238
00:11:43.800 --> 00:11:46.610
to pass in a ref, that's what forward ref does,
239
00:11:46.610 --> 00:11:49.960
then from there, use imperative handle,
240
00:11:49.960 --> 00:11:53.080
gives us that handle, it gives us that way
241
00:11:53.080 --> 00:11:55.630
where we can say, okay, this is what you're allowed
242
00:11:55.630 --> 00:11:57.460
to call on our function.
243
00:11:57.460 --> 00:12:00.550
So we can't call set image or anything like that,
244
00:12:00.550 --> 00:12:04.230
what we can do though, is we can define the rules
245
00:12:04.230 --> 00:12:06.980
that we want the parent component to follow.
246
00:12:06.980 --> 00:12:10.330
In this case, they can access clear image,
247
00:12:10.330 --> 00:12:13.560
and inside of it, we could have it do whatever we want.
248
00:12:13.560 --> 00:12:16.000
If we add some other pieces of state here,
249
00:12:16.000 --> 00:12:18.210
we could update those as well.
250
00:12:18.210 --> 00:12:21.650
But for our case, we simply wanna set this to null.
251
00:12:21.650 --> 00:12:23.580
So here's the moment of truth,
252
00:12:23.580 --> 00:12:25.820
let's see if all of that worked for us.
253
00:12:25.820 --> 00:12:27.720
So I'm gonna click Submit,
254
00:12:27.720 --> 00:12:30.350
and it looks like, yes, everything there worked.
255
00:12:30.350 --> 00:12:34.820
Now if I go back to the forum, now it's all cleared out.
256
00:12:34.820 --> 00:12:36.780
So that is working really nice.
257
00:12:36.780 --> 00:12:38.300
Let's do another one, just to make sure
258
00:12:38.300 --> 00:12:41.410
that everything truly is cleared out.
259
00:12:41.410 --> 00:12:44.993
I'm gonna go to another picture, this waterfall one.
260
00:12:45.950 --> 00:12:50.390
Let's do it again, and that is perfect,
261
00:12:50.390 --> 00:12:54.320
it's clearing out every time now, this is really clean.
262
00:12:54.320 --> 00:12:55.720
This is the way you'd wanna do it.
263
00:12:55.720 --> 00:12:59.610
And also, when we're talking about using refs,
264
00:12:59.610 --> 00:13:02.640
if you get into a scenario
265
00:13:02.640 --> 00:13:05.610
where you're starting to use refs all over the place,
266
00:13:05.610 --> 00:13:07.530
that's probably a anti-pattern,
267
00:13:07.530 --> 00:13:09.410
it's probably a poor practice,
268
00:13:09.410 --> 00:13:11.760
you really only wanna use a ref
269
00:13:11.760 --> 00:13:14.220
to do exactly what we're doing right here.
270
00:13:14.220 --> 00:13:18.120
It's almost always used in terms of working with forms,
271
00:13:18.120 --> 00:13:22.470
and being able to clear out a child form element
272
00:13:22.470 --> 00:13:25.540
when the parent has completed some kind of task.
273
00:13:25.540 --> 00:13:29.350
So this is really one of the best examples
274
00:13:29.350 --> 00:13:30.730
that you could ever find
275
00:13:30.730 --> 00:13:33.550
for when you'd wanna use a ref in React,
276
00:13:33.550 --> 00:13:36.130
because that's really what they created
277
00:13:36.130 --> 00:13:38.170
this entire process for.
278
00:13:38.170 --> 00:13:40.180
So I really hope that made sense.
279
00:13:40.180 --> 00:13:43.300
I can tell you this is the most challenging part
280
00:13:43.300 --> 00:13:46.210
of the entire course, leading up to it and after.
281
00:13:46.210 --> 00:13:49.730
So great job if you went through that, if for any reason,
282
00:13:49.730 --> 00:13:51.870
it's still a little unclear,
283
00:13:51.870 --> 00:13:54.940
definitely talk it over with your mentor,
284
00:13:54.940 --> 00:13:58.290
go over this code, go through the documentation,
285
00:13:58.290 --> 00:14:01.160
look for other examples of how this is used,
286
00:14:01.160 --> 00:14:02.810
and that's gonna help you out a lot,
287
00:14:02.810 --> 00:14:04.780
because this is a pattern
288
00:14:04.780 --> 00:14:07.290
that you may not have to follow a lot,
289
00:14:07.290 --> 00:14:09.970
cause your code shouldn't have a lot of these references,
290
00:14:09.970 --> 00:14:12.790
but I will tell you that when you do need to perform
291
00:14:12.790 --> 00:14:15.880
a task like this, it's vital that you understand
292
00:14:15.880 --> 00:14:18.930
the type of process that we've just built out.
293
00:14:18.930 --> 00:14:22.430
So very nice, this is the last video in the section.
294
00:14:22.430 --> 00:14:24.010
And in the next section,
295
00:14:24.010 --> 00:14:27.320
we are going to go and we're gonna build out
296
00:14:27.320 --> 00:14:30.120
our search bar and our search functionality
297
00:14:30.120 --> 00:14:33.023
and we're gonna finish out this entire application.