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.
No, useRef hook can also 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.
useRef
hook is: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.
useRef
and assigning an ordinary {current: ...}
objectAs of React documentation, useRef gives us the same object on every render while plain old JS object will just be recreated every render.
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.
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:
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"
.
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).
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.
window.objectRef
instead of window.ref
because we don’t what to mess up our exampleconst ref = { current: null }
; instead of using React.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.
useRef
will always return the same object with the same current
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 also posted on dev.to