React's useRef
hook is used to store references to DOM elements. But did you know you can store and update values with useRef
?
As the name suggests, useRef
can store a reference to a DOM element. To do this, create the ref, and then pass it into the element:
const Component = () => {
const ref = useRef(null);
return <div ref={ref}> Hello world </div>;
};
With this reference, you can do lots of useful things like:
focus()
on the element at a certain momentAnother use-case for useRef
allows us to store values, which you can later use and change:
const Component = () => {
const ref = useRef({
renderCount: 0
});
// Increase the render count on every re-render
ref.current.renderCount += 1;
return <>Hello world</>;
}
To change the ref's value, you will need to change ref.current
(and not ref
itself!)
The key difference between useState
and useRef
is that:
If you don’t need the component to re-render (or you don't want the component to re-render), useRef
may be a good candidate.
If you tried initializing a variable like this:
const Component = () => {
let renderCount = 0;
renderCount += 1;
return <>Hello world</>;
}
It would get end up getting re-initialized each time the component renders. If you use a ref, the value you store in it will persist between renders of your component.
If you initialize the value outside of your component, this value will be global to all instances of Component
.
So if you change the value, it will affect the value for all the other components you have rendered on your page.
let renderCount = 0;
const Component = () => {
// If you had 10 Components on the page, they would all update the same
// renderCount value and it would already be at 10 after one render!
renderCount += 1;
return <>Hello world</>;
}
createRef
is the API that React provided for refs before hooks came around:
import { createRef } from 'react';
class Component extends React.Component() {
ref = createRef();
render() {
this.ref.renderCount += 1;
return <div>Hello world</div>;
}
}
If you're using functional components I would recommend using useRef
over createRef
.
As useRef
is a hook, it will only work with functional components.
With class components, you can use the createRef()
example I showed above.
You can also achieve the same thing using a class variable:
class Component extends React.Component() {
renderCount = 0;
render() {
this.renderCount += 1;
return <div>Hello world</div>;
}
}