Page Content:
1.useRef-Introduction
2.useRef-Syntax
3.useRef-Use Case
1.Introduction:
In this tutorial, we discuss the useRef hook also we will discuss the difference between the useRef and createRef , we will see why to use useRef when we have creatRef.
1.The useRef Hook is a function that returns a mutable ref object whose .current property is initialized with the passed argument (initialValue).you can see the syntax to understand this sentence better.
2.The returned object will persist for the full lifetime of the component.
2.Syntax:
const refContainer = useRef(initialValue); Here,
initialValue – the value we initialize useRef with.
refContainer – mutable reference object.
3. use Cases for useRef:
There are mainly two uses of useRef:
1.Accessing DOM nodes or React Components.
2.Keeping Mutable values between the renders.
1.Accessing DOM nodes or React Components:
Refs provide a way to access DOM nodes or React elements created in the render method.
1.By default, you may not use the ref attribute on function components because function components don’t have instances: To make possible the use of refs we have the useRef hook.
2.When a ref is passed to an element in render, a reference to the node becomes accessible at the current attribute of the ref.
Lets consider below example to access the input field using useRef hook.
import React, { useRef } from "react";
const App = () => {
const textInput = useRef();
const focusTextInput = () => textInput.current.focus();
return (
<div>
<input type="text" ref={textInput} />
<button onClick={focusTextInput}>Focus the text input</button>
</div>
);
}
export default App;This is a normal example of using refs, we can do the same by using React.createRef().
But now let’s focus on the main feature of useRef.
2.Keeping mutable values between the renders:
Let’s take 2 examples to understand this better.
1)program to count the number of times the component re-renders when the input changes.
you might think that you can save the count in the state using useEffect but if you do so ,it will re-render the component infinite times.Try below Code
import React, {useState,useEffect } from "react";
const App = () => {
const [name,setName]=useState('');
const [count,setCount]=useState(0);
useEffect(()=>{
setCount(prevCount=>prevCount+1);
});
return (
<div>
<input value={name} onChange={e=>{setName(e.target.value)}} />
<p>Rendered {count} times</p>
</div>
);
}
export default App;You can’t use the React.createRef also because it needs an instance of the component to be created which happens only in class component.
Now let’s use the useRef to count the number of times component renders when the input changes:
import React, { useRef,useState,useEffect } from "react";
const App = () => {
const countRef = useRef(0);
const [name,setName]=useState('');
useEffect(()=>{
countRef.current = countRef.current+1;
});
return (
<div>
<input value={name} onChange={e=>{setName(e.target.value)}} />
<p>Rendered {countRef.current} times</p>
</div>
);
}
export default App;
2)Program to get the previous value of state when the state is updated.
if you want to store the previous value of state between the renders we can use useRef as shown below:
import React, { useRef,useState,useEffect } from "react";
const App = () => {
const PrevNameRef = useRef('');
const [name,setName]=useState('');
useEffect(()=>{
PrevNameRef.current = name;
},[name]);
return (
<div>
<input value={name} onChange={e=>{setName(e.target.value)}} />
<p>current Name is => {name} </p>
<p>Previous Name is =>{PrevNameRef.current}</p>
</div>
);
}
export default App;