Scribd
Upload
3 views2 pages

React Useref Tutorial

userf

Uploaded by

suchit kapale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views2 pages

React Useref Tutorial

userf

Uploaded by

suchit kapale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Understanding useRef Hook in React

The useRef hook in React is a versatile tool that allows developers to persist values across
renders, interact with the DOM, and manage mutable state without causing a re-render.
Below are multiple ways useRef can be utilized in different scenarios.

1. Accessing and Manipulating DOM Elements


useRef can be used to access a DOM element and manipulate it directly without triggering
re-renders. This is useful for focusing inputs, modifying element styles, and more.

Example:

const inputRef = useRef(null);

const handleFocus = () => {


inputRef.current.focus();
};

<input ref={inputRef} type="text" />


<button onClick={handleFocus}>Focus Input</button>

2. Storing Mutable Values That Persist Across Renders


useRef can store values that persist across renders without causing re-renders. This is
commonly used for timers and interval IDs.

Example:

const timerRef = useRef(null);

const startTimer = () => {


timerRef.current = setInterval(() => setCount((prev) => prev + 1),
1000);
};

const stopTimer = () => {


clearInterval(timerRef.current);
};
3. Maintaining Previous Values or State Across Renders
You can use useRef to store the previous value of a state and access it later, without causing
any re-renders.

Example:

const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

const prevCount = prevCountRef.current;

You might also like