returns a 'ref' object.
const refContainer = useRef(initialValueToBePersisted)
Value is persisted in the refContainer.current property.
values are accessed from the .current property of the returned object.
The .current property could be initialised to an initial value e.g. useRef(initialValue)
The object is persisted for the entire lifetime of the component.
Essentially, useRef is like a “box” that can hold a mutable value in its .current property.
You might be familiar with refs primarily as a way to access the DOM. If you pass a ref object to React with <div ref={myRef} />, React will set its .current property to the corresponding DOM node whenever that node changes.
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.
This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.
Keep in mind that useRef doesn’t notify you when its content changes. Mutating the .current property doesn’t cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref instead.
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// `current` points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}
() => {
const textAreaEl = useRef(null);
const handleBtnClick = () => {
textAreaEl.current.value =
"The is the story of your life. You are an human being, and you're on a website about React Hooks";
textAreaEl.current.focus();
};
return (
<section style={{ textAlign: "center" }}>
<div>
<button onClick={handleBtnClick}>Focus and Populate Text Field</button>
</div>
<label
htmlFor="story"
style={{
display: "block",
background: "olive",
margin: "1em",
padding: "1em"
}}
>
The input box below will be focused and populated with some text
(imperatively) upon clicking the button above.
</label>
<textarea ref={textAreaEl} id="story" rows="5" cols="33" />
</section>
);
};
() => {
const textAreaEl = useRef(null);
const stringVal = useRef("This is a string saved via the ref object --- ")
const handleBtnClick = () => {
textAreaEl.current.value =
stringVal.current + "The is the story of your life. You are an human being, and you're on a website about React Hooks";
textAreaEl.current.focus();
};
return (
<section style={{ textAlign: "center" }}>
<div>
<button onClick={handleBtnClick}>Focus and Populate Text Field</button>
</div>
<label
htmlFor="story"
style={{
display: "block",
background: "olive",
margin: "1em",
padding: "1em"
}}
>
Prepare to see text from the ref object here. Click button above.
</label>
<textarea ref={textAreaEl} id="story" rows="5" cols="33" />
</section>
);
};
function App() {
const [query, setQuery] = React.useState("react hooks");
// we can pass useRef a default value
// we don't need it here, so we pass in null to ref an empty object
const searchInput = useRef(null);
function handleClearSearch() {
// current references the text input once App mounts
searchInput.current.value = "";
// useRef can store basically any value in its .current property
searchInput.current.focus();
}
return (
<form>
<input
type="text"
onChange={event => setQuery(event.target.value)}
ref={searchInput}
/>
<button type="submit">Search</button>
<button type="button" onClick={handleClearSearch}>
Clear
</button>
</form>
);
}