React JS 19 Tutorial in Hindi #38 useRef Hook

  1. What is useRef hook?
  2. Learn how to use useRef.
  3. Control input field with useRef.
  4. Hide and show input field with useRef.
  5. Interview Question

useRef hook in React is used to create a mutable reference that:

  1. Persists across renders
  2. Does not trigger re-renders when changed
  3. Can reference a DOM element directly
import { useEffect, useState } from "react";

function App() {

const [counter,setCounter]=useState(0);
const [data,setData]=useState(0);


useEffect(()=>{

counterFunction();
},[counter])

useEffect(()=>{
callOnce
},[])

function counterFunction(){
console.log("counterFunction",counter);

}
function callOnce(){
console.log("callOnce function called");
}

return (
<div>
<h1>useEffect Hook</h1>
<button onClick={()=>setCounter(counter+1)} >Counter {counter}</button>
<button onClick={()=>setData(data+1)} >Data {data}</button>

</div>
)
}

export default App;