Certainly! useRef
is a hook in React that allows you to access and interact with a DOM element or keep a mutable reference to a value that doesn't trigger re-renders when it changes.
Easy Explanation:
Imagine you have a physical notebook where you jot down notes. This notebook doesn't shout at you every time you make a change in it, but you can always refer back to it whenever you need to see what you've written. Similarly, useRef
is like this notebook. You can keep track of certain things without the entire room (your component) reacting every time you make a note.
Common use cases:
- Focus on an input field.
- Measure the dimensions of an element.
- Keep track of the previous state/value of a variable without causing re-renders.
Advanced Explanation:
-
Mutable Reference Object:
-
useRef
returns a mutable reference object ({ current: ... }
). - The
current
property is initialized to the passed argument (initialValue
) which can be anything. It remains persistent for the full lifetime of the component. - Unlike state variables using
useState
, changingref.current
doesn't trigger re-renders.
-
-
DOM Access:
- When used in conjunction with the
ref
attribute on an element, it provides direct access to the DOM element. This is especially useful when integrating with third-party libraries or for tasks like setting focus or measuring elements.
- When used in conjunction with the
-
Previous Values:
- It can be used to store the previous value/state of a variable. Because it doesn't cause a re-render on change, it can be handy to check previous vs current values without costly re-renders.
-
Timers and Intervals:
- Using
useRef
is a common pattern to hold references to intervals or timeouts. This way, you can clear them later (like in auseEffect
cleanup).
- Using
-
Imperative Handle:
- Used in conjunction with
forwardRef
anduseImperativeHandle
, it allows parent components to access the functions and values of child components. It's a more advanced pattern for rare use cases where parents need to call child functions directly.
- Used in conjunction with
Example of accessing a DOM element:
function MyComponent() {
const inputRef = useRef(null);
const handleFocus = () => {
inputRef.current.focus();
};
return (
<>
<input ref={inputRef} type="text" />
<button onClick={handleFocus}>Focus the input</button>
</>
);
}
In this example, the inputRef
is attached to the input field, and when the button is clicked, the input field gets focused.
Remember, while useRef
can be powerful, direct manipulation of the DOM is against the declarative nature of React. It's wise to use it judiciously and only when necessary.
Thank you for reading. I encourage you to follow me on Twitter where I regularly share content about JavaScript and React, as well as contribute to open-source projects. I am currently seeking a remote job or internship.
Twitter: https://twitter.com/Diwakar_766
GitHub: https://github.com/DIWAKARKASHYAP
Portfolio: https://diwakar-portfolio.vercel.app/
Top comments (0)