What's up with useRef
hook?
useRef
returns an object with a current
property. This current
property gets the initial value of the argument passed to useRef hook. The reference to {current: <any value>}
object will persist from render to render.
Is useRef hook used only for accessing Document Object Model(DOM) elements?
No, useRef hook can also be used as an instance variable.
How can useRef be used as an instance variable?
The object returned by the useRef
hook can be used as a container whose current
property can store a value over the lifetime of the functional component.
The most common use case of useRef
hook is:
- Keep a live ref to a
DOMElement
.
function TextInput() {
const inputEl = useRef(null);
return (
<>
<input ref={inputEl} type="text" />
</>
);
}
The important thing here is:
const inputEl = useRef(null);
and
<input ref={inputEl} type="text" />
After the first render, inputEl
will have an object with current
property pointing to our input element.
Difference between using useRef
and assigning an ordinary {current: ...}
object
As of React documentation, useRef gives us the same object on every render while plain old JS object will just be recreated every render.
1. With useRef
function setWindowRef<T>(ref: React.RefObject<T>) {
(window as any).ref = ref;
}
function getWindowRef<T>() {
return (window as any).ref;
}
export default function UseRefReact() {
const [renders, setValue] = React.useState(1);
const ref = React.useRef(null);
React.useEffect(() => {
setWindowRef<HTMLDivElement>(ref);
});
return (
<div className="UseRefReact">
<div>UseRef with React.useRef(null)</div>
<button onClick={e => setValue(renders + 1)}> Rerender </button>
<div ref={ref}>Renders {renders}</div>
<div>
{" "}
{getWindowRef() === ref ? "same ref object" : "ref not set yet"}{" "}
</div>
</div>
);
}
Making use of const ref = React.useRef(null);
and <div ref={ref}>Renders {renders}</div>
will give
us the reference to that div element.
How can we check if the object ref
was changed when our functional component was rendered ?
Another object persisting between renders will help us check if the ref
object has changed.
window object enters the scene:
function setWindowRef<T>(ref: React.RefObject<T>) {
(window as any).ref = ref;
}
function getWindowRef<T>() {
return (window as any).ref;
}
Ok, now that our helper functions are defined, we can move to the next step:
When do we call our functions?
-
call
setWindowRef
after our component has been rendered
setTimeout(() => { setWindowRef<HTMLDivElement>(ref); });
getWindowRef when the view is rendered
<div>
{getWindowRef() === ref ? "same ref object" : "ref not set yet"}
</div>
First render we will get "ref not set yet"
.
Why?
Long answer:
- The reason we get "ref not set yet" on first render is because of how JS works under the hood.
Short answer:
-
setTimeout(() => { setWindowRef<HTMLDivElement>(ref); });
setWindowRef
will be queued and executed after we return from our function.
On any other renderers we will get "same ref object", meaning that indeed React makes sure that we get the same instance with every render.(Thanks React).
2. Without useRef
function setWindowObjectRef<T>(ref: React.RefObject<T>) {
(window as any).objectRef = ref;
}
function getWindowRef<T>() {
return (window as any).objectRef;
}
export default function UseRefObject() {
const [renders, setValue] = React.useState(1);
const ref = { current: null };
setTimeout(() => {
setWindowObjectRef<HTMLDivElement>(ref);
});
return (
<div className="UseRefObject">
<div>UseRef with {`{ current: null }`}</div>
<button onClick={e => setValue(renders + 1)}> Rerender </button>
<div ref={ref}>Renders {renders}</div>
<div>
{" "}
{getWindowRef() === ref ? "same ref object" : "ref object changed"}{" "}
</div>
</div>
);
}
Examples are pretty much the same.
Small differences:
-
window.objectRef
instead ofwindow.ref
because we don't what to mess up our example -
const ref = { current: null }
; instead of usingReact.useRef(null)
Now, on every render we get "ref object changed" and it seems that we verified how useRef()
works and why we should use it when we want to persist a value between renders.
Conclusion:
useRef
will always return the same object with the samecurrent
property value pointing to the same object throughout the lifetime of your functional component.even though useRef creates a plain JS object with a
current
property, manually creating an object like
{ current: null }
to select a DOM element by passing it to a ref attribute, will not persist the object between renders.
Article first posted on danielpdev.io
Top comments (0)