How to Use useRef:Using useRef in React is essential for accessing and managing DOM elements, focusing elements, or storing mutable values across renders without causing re-renders. Here's a guide on how to use and implement useRef, and when it's appropriate to do so .
When to Use useRef:
- Accessing DOM Elements: Use useRef when you need to access a DOM element.
- Storing Previous Values: Use useRef to store and access previous values across renders.
- Focus Management: Use useRef to focus on an input element or another element imperatively.
- Avoiding Re-renders: Use useRef to store values that don't trigger a re-render when they change.
How to Use useRef:
- Import the Hook: Import the useRef hook from React.
- Create a Ref: Create a ref by calling useRef and assign it to a variable.
- Accessing and Using the Ref:Use .current property of the ref to access and manipulate the value.
Here's an example of how to use useRef to manage a focused input element:
import React, { useRef } from 'react';
const FocusInputComponent = () => { const inputRef = useRef(null);
const focusInput = () => { inputRef.current.focus(); };
return ( <div> <input ref={inputRef} type="text" /> <button onClick={focusInput}>Focus Input</button> </div> );};
export default FocusInputComponent;