Preview
Video Player
00:00
00:00
Refs and the DOM
7:23The useRef hook lets you access and interact with DOM nodes created in the return statement. They make it possible to do the more traditional DOM manipulation, and they're commonly used to access form elements and get their values.
In React you typically don't
target elements directly or
0:00
modify them like you would when
working with JavaScript and the DOM.
0:03
For example,
JavaScript provides selector methods,
0:08
like get element by ID,
that return an element in the DOM,
0:12
which you can then manipulate, get,
and set its text contents and more.
0:16
To modify what a React component or
element displays on the screen,
0:23
you can use state and props.
0:27
You trigger a state change and
re-render the component with new props.
0:30
If it's a component with local state or
a controlled component,
0:35
you will re-render it with
every update and state.
0:39
There may be times when
you need to target and
0:43
modify an element outside
of that typical data flow.
0:46
So React provides
an escape hatch with refs.
0:51
Refs let you access and
interact with DOM nodes or
0:54
React elements created
in the return statement.
0:57
They make it possible to let you do
the more traditional DOM manipulation, and
1:01
they're commonly used to access
form elements and get their values.
1:06
Earlier you learned how to
update the value of an input
1:10
field using state by creating
a controlled component or
1:14
a component with internally
controlled state.
1:17
We created a value state,
1:22
then we wired the input fields to
the function using the onChange event.
1:24
For only one input field,
writing this code is not a big deal.
1:30
And this is still the recommended
React way to control form elements,
1:36
especially if you need to validate
user input in real time or
1:41
filter results with every keystroke,
for example.
1:45
However, if you're building a form
that doesn't require internal state,
1:49
you can use the ref attribute instead of
calling on change for every state update.
1:54
Let's create a ref that will
access the player text field.
1:59
You create a ref using the useRef hook,
and
2:04
then you attach the ref to the React
element via the ref attribute.
2:07
In the AddPlayerForm function
I'll import useRef and
2:13
create a ref name playerInput with
const player input equals useRef.
2:18
You can pass useRef an
initial value as an argument.
2:26
Since playerInput will
reference the input element,
2:31
we won't pass an initial value.
2:34
Then attach this ref to the text input
in the return statement by giving
2:38
the input a ref attribute and passing it,
the playerInput ref, with player input.
2:43
This puts a reference to the input
on the AddPlayerForm function.
2:49
When the input is rendered onto the page,
2:54
it returns the reference which
you can access with playerInput.
2:57
If I console.log playerInput,
3:02
it returns an object with current
pointing to the input element.
3:04
It even selects and
highlights the input in the browser.
3:11
Great, the ref is now referencing
the input element, and
3:14
we can access it using
its current property.
3:18
In the handle submit function,
instead of passing the value state to
3:23
the addPlayer callback,
I'll pass it the ref with playerInput.
3:28
If the ref is a form element, you get
the value of the ref with .current.value.
3:34
Now we can delete the useState hook
because we're no longer using the value
3:42
state.
3:47
That means we can also delete the useState
import as well as the setValue
3:48
function inside handle Submit,
and the value and
3:53
on change attributes
from the input element.
3:57
Let's test this in the browser to make
sure that our add player functionality
4:02
still works.
4:06
Type a name into the text field,
submit it, and it works.
4:07
Now the form no longer resets the text
field after submitting a name,
4:12
this is a quick fix.
4:17
One way we can reset
the form is by writing
4:18
event.currentTarget.reset in
the handleSubmit function.
4:22
I'll submit another player, and
the input once again resets on submit.
4:30
Good, as you can see,
refs can provide an easier and
4:35
quicker way to get values
of an input field.
4:39
When building forms,
4:44
when should you use a controlled component
instead of creating refs, and vice versa?
4:45
Well controlled components
have internal state and
4:51
require functions to update state.
4:54
They make it easier to modify or
validate users input or
4:57
even filter results based on the input,
all in real time.
5:01
Control components with state
render on each keystroke,
5:05
whereas in refs render
is only called once.
5:09
Whenever you're building a form
that requires few inputs and
5:14
you don't need to keep track of every
keystroke, you have the option to create
5:18
an uncontrolled component and
use refs to get form values from the DOM.
5:23
Let me show you another use for
the useRef hook.
5:29
In our App component, we created
the state nextPlayerId to keep
5:33
track of the player ID for
when the new player is added.
5:37
We actually should have used the useRef
hook instead of the useState hook.
5:42
You should use useState hook
when you want to update data and
5:47
cause the UI to update.
5:51
In our case, nextPlayerId isn't
being displayed to the UI so
5:54
we don't want to cause a re-render
when the nextPlayerId updates.
5:59
And that's where the useRef
hook comes in.
6:05
If you need to store some data in React
but don't want the component to re-render
6:08
when the data updates,
then you should use the useRef hook.
6:13
I'll import the useRef hook
at the top of the file and
6:18
change nextPlayerId from state to
a ref by typing const nextPlayerId
6:22
equals useRef, and
we'll keep the initial value the same.
6:27
In handleAddPlayer function,
let's delete the setNextPlayerId,
6:33
since we don't have this function anymore.
6:38
And change nextPlayerId, to
6:42
nextPlayerId.current since we're
using the useRef hook now.
6:45
We can increment the nextPlayerId
by adding nextPlayerId.current
6:50
plus equals 1
under setPlayers, or
6:55
we can add the increment operator here,
either works.
7:00
Alright, let's save our changes and
have a look at the browser.
7:07
In React dev tools you can see
nextPlayerId is now a ref.
7:10
When we add a new player the new
player gets added to the state and
7:15
nextPlayerId increments by one, great.
7:20