useRef :
The useRef Hook allows you to persist values between renders.
It can be used to store a mutable value that does not cause a re-render when updated.
It can be used to access a DOM element directly.
Syntax :
import { useRef } from 'react';
const myRef = useRef(initialValue);
Important Points :
When you call useRef, it returns a plain JavaScript object with a single property called current.
The most important useRef is that changing its value does not trigger a component re-render.
Example Code :
import React from 'react'
import { useState, useRef } from "react";
function UserRef() {
let normalVar = 5;
const myRef = useRef(5);
const [count, setCount] = useState(5);
return (
<div>
<p>Normal Variable: {normalVar}</p>
<p>Ref Variable: {myRef.current}</p>
<p>State Variable: {count}</p>
{/* Increments value in memory, but UI does not change */}
<button onClick={() => normalVar++}>
Increment Normal
</button>
{/* Increments ref.current, but UI does not change */}
<button onClick={() => myRef.current = myRef.current + 1}>
Increment Ref
</button>
{/* Increments state and forces the component to re-render, displaying new values */}
<button onClick={() => setCount(count + 1)}>
Increment State
</button>
</div>
);
}
export default UserRef;
Explanation :
First you click a normal variable button the value change only memory but, dosen't change the UI.
Then click the useRef variable button two time it's also dosen't change UI.
Then click the state variable button it changes and updates the values both useRef and state variables.
Because ,the useRef remembers the values and shows the values when the component re-renders.
The useRef button clicked by two times so, it's updates 7 and state variable clicked by one time it shows the value 6.
Output :
