Introduction
What is useRef
useRef
is React hook that allows to create a persistent reference to a value or a DOM
element. Unlike useState
, which is used to manage state that triggers re-renders, useRef
is primarily used for side effects or accessing DOM
elements directly.
Why use useRef
The useRef
hook is particularly useful for:
- Accessing
DOM
elements directly: you can useuseRef
to get a reference to aDOM
element, allowing you to manipulate it directly without triggering a re-render. - Create persistent values: Unlike state, values created with
useRef
persist between renders, making them ideal for storing data that doesn't need to trigger re-renders.
Understanding the useRef
hook
The useRef
hook returns an object with .current
property. when you call useRef
, it creates a persistent reference to the value you pass as argument. This reference is stored in .current
property of the returned object.
Creating a reference with useRef
To create a reference simply call useRef
with initial value.
import { useRef} from 'react'
const App = () => {
const countRef = useRef(0)
return (...)
}
export default App
In the above example countRef
is a reference to the initial value 0
.
Accessing the reference value
To access the reference value just call the countRef
object with .current
property
import { useRef} from 'react'
const App = () => {
const countRef = useRef(0)
const increment = () => {
countRef.current++
}
return (
<div>
<p>Count: {countRef.current}</p>
<button onClick={increment}>Increment</button>
</div>
)
}
export default App
In the above example if you click the button it will call the increment
function which will increase the countRef
, but the count won't be updated at <p>Count: {countRef.current}</p>
because updating useRef
don't cause re-renders like useState
.
update the code to example below to get the result you expect.
import { useRef, useState } from 'react'
const App = () => {
const countRef = useRef(0)
const [count, setCount] = useState(0)
const increment = () => {
countRef.current++
setCount(countRef.current)
}
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}
export default App
Common use cases for useRef
Directly accessing and manipulating DOM
elements
it's possible to use useRef
hook to access and change the properties of html elements
const App = () => {
const inputRef = useRef(null)
const handleFocus = () => {
inputRef.current.focus()
}
return(
<input ref={inputRef} />
)
}
Persistent Values
Unlike useState
or variable, useRef
can pass values and data between re-renders such as cached data or configuration settings.
Performance Optimization
In some cases, using useRef
can help with component optimization by avoiding unnecessary re-renders. like if you have a component that renders a large list of items you can cache it using useRef
and only modify re-render the items that have changed.
Best practices and considurations
- Do not write or read
ref.current
during rendering - You can mutate the
ref.current
property - When you change the
ref.current
property, React does not re-render your component - The information is local to each copy of your component (unlike the variables outside, which are shared).You can store information between re-renders (unlike regular variables, which reset on every render).
- You can read or write refs from event handlers or effects instead.
- Manipulating the dom with
ref
Passing a ref to custom component.
If you try to pass a ref to your own component like this
const inputRef = useRef(null);
return <MyInput ref={inputRef} />;
You might get an error in the console:
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
To solve this issue wrap the custom component with forwardRef
like so:
const inputRef = useRef(null);
return <MyInput value={value} ref={inputRef} />;
Custom component:
import { forwardRef } from 'react';
const MyInput = forwardRef(({ value, onChange }, ref) => {
return (
<input
value={value}
onChange={onChange}
ref={ref}
/>
);
});
export default MyInput;
Conclusion
useRef
is a powerful hook that is primarily used for side effect usage like caching data between re-renders or accessing elements of the DOM
. It's a great tool for performance optimization and achieving specific functionalities in React application.
Top comments (0)