The useRef hook in react is used to create a reference to an HTML element. Most widely used scenario is when we have form elements and we need to reference these form elements to either print their value or focus these elements etc.
So the {useRef} hook is imported from "react" like other react hooks and we use them inside functional components to create references and this can be assigned to an html element in the jsx by using the "ref" attribute.
An example for using the useRef hook is shown below-
import React, { useEffect, useRef } from "react";
const UseRefHookExplained = (props) => {
// Creating refs for username and password
const userNameRef = useRef(null);
const passwordRef = useRef(null);
// We are also creating a reference to the Login button
const submitBtnRef = useRef(null);
// useEffect to set the initial focus to the user name input
useEffect(() => {
userNameRef.current.focus();
}, []);
// This function is used to handle the key press.
// Whenever user hits enter it moves to the next element
const handleKeyPress = (e, inputType) => {
if (e.key === "Enter") {
switch (inputType) {
// Checks if Enter pressed from the username field?
case "username":
// Moves the focus to the password input field
passwordRef.current.focus();
break;
// Checks if Enter pressed from the password field?
case "password":
// Moves the focus to the submit button
submitBtnRef.current.focus();
e.preventDefault();
break;
default:
break;
}
}
};
// Function to handle the submit click from the button
const handleSubmit = () => {
alert("submitted");
};
// getting the style as prop from the parent.
// Basic style to center the element and apply a bg color
const { style } = props;
return (
<div style={style}>
<h2>Example for using useRef Hook</h2>
<h3>Login</h3>
<input
type="text"
name="username"
ref={userNameRef}
onKeyDown={(e) => handleKeyPress(e, "username")}
/>
<input
type="password"
name="password"
ref={passwordRef}
onKeyDown={(e) => handleKeyPress(e, "password")}
/>
<button ref={submitBtnRef} onClick={handleSubmit}>
Login
</button>
</div>
);
};
export default UseRefHookExplained;
So the concept of useRef hook is straight forward as you can see in the above code. Follow the following steps -
- We import useRef hook from react
- We initialize this hook (eg: const inputRef = useRef(null))
- The reference created is attached to an html element using the "ref" attribute.
Now we will have a reference to this element readily available to be used to make changes like getting the value, focusing etc
Output
Initial state when the page loads -
Focus State after entering user name and pressing enter -
Focus state moving to the button after entering the password and clicking on Enter
So, this much should be pretty clear by now. Now let us look at a scenario when we will be using another React component for input.
In this case it becomes a little difficult to pass on the reference that we have defined in the parent component as a property to the child (Input component).
React provides us a way to handle this scenario and forward the refs to the child component using React.forwardRef
Let us check the example code to see the changes -
( I have added a comment "//new" to identify the newly added lines)
import React, { useEffect, useRef } from "react";
import Input from "./Input"; // new
const UseRefHookExplained = (props) => {
// Creating refs for username and password
const userNameRef = useRef(null);
const passwordRef = useRef(null);
// We are also creating a reference to the Login button
const submitBtnRef = useRef(null);
// useEffect to set the initial focus to the user name input
useEffect(() => {
userNameRef.current.focus();
}, []);
// This function is used to handle the key press.
// Whenever user hits enter it moves to the next element
const handleKeyPress = (e, inputType) => {
if (e.key === "Enter") {
switch (inputType) {
// Checks if Enter pressed from the username field?
case "username":
// Moves the focus to the password input field
passwordRef.current.focus();
break;
// Checks if Enter pressed from the password field?
case "password":
// Moves the focus to the submit button
submitBtnRef.current.focus();
e.preventDefault();
break;
default:
break;
}
}
};
// Function to handle the submit click from the button
const handleSubmit = () => {
alert("submitted");
};
// getting the style as prop from the parent.
// Basic style to center the element and apply a bg color
const { style } = props;
return (
<div style={style}>
<h2>Example for using useRef Hook</h2>
<h3>Login</h3>
{/* New. Using the Component instead of input element */}
<Input
type="text"
name="username"
ref={userNameRef}
onKeyDown={(e) => handleKeyPress(e, "username")}
/>
{/* New. Using the Component instead of input element */}
<Input
type="password"
name="password"
ref={passwordRef}
onKeyDown={(e) => handleKeyPress(e, "password")}
/>
<button ref={submitBtnRef} onClick={handleSubmit}>
Login
</button>
</div>
);
};
export default UseRefHookExplained;
Now let us look at the Input.js component
import React from "react";
/* In the functional component, a second argument
is passed called ref, which will have access to
the refs being forwarded from the parent */
const Input = (props, ref) => {
/* assigning the ref attribute in input and spreading
the other props which will contain type, name, onkeydown etc */
return <input {...props} ref={ref} />;
};
// wrapping the Input component with forwardRef
const forwardedRef = React.forwardRef(Input);
// Exporting the wrapped component
export default forwardedRef;
So, React.forwardRed provides us a way with which we can still pass on or forward the refs defined in the parent component to the child component.
Hope you learned something new today!
Top comments (10)
Oh, you definetly should mention other uses of useRef! It's really incomplete and useRef is for far more than just refferencing elements. From docs: 'However, useRef() is useful for more than the ref attribute. It’s handy for keeping any mutable value around similar to how you’d use instance fields in classes.'.
Thanks for this comment. Very valuable info. I will definitely take a look at this and update this post with my learning!
Just one example that I actually use more than refferencing elements... When you want to avoid running useEffect on mount of the component: stackoverflow.com/questions/594926...
More examples here: dmitripavlutin.com/react-useref-gu...
Thanks for this! I'm sure this will come in handy for me.
Thanks for bringing in this perspective. I will try this out. It makes more sense as there are multiple instances where forwarding the hooks is required and this helps us stick to the DRY principle.
could u please explain what is the DRY principle? and if you have the link to test the code from github that would be awesome please :)
it's great article
Glad it helped!
Thanks you sir, for the explanation 💪
Thank you!