As a Component Variable

useRef() is useful for more than the ref attribute. It's handy for keeping any mutable value around similar to how you'd use instance fields in classes.

This works because useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: ...} object yourself is that useRef will give you the same ref object on every render.
RESETRUNFULL

function Timer() {
   const [n,setN]= React.useState(0);   //const tid = {current: null};   // this won't work
   const tid = React.useRef();
   React.useEffect(()=>{
      tid.current = setInterval(()=>setN(n=>n+1),1000);
   },[]);
   function stopTimer(){
       clearInterval(tid.current);
   }
   return (<button onClick={stopTimer}>{n}</button>);}ReactDOM.render(<Timer/>,document.querySelector("div"));

function Timer() {
   const [n,setN]= React.useState(0);   //const tid = {current: null};   // this won't work
   const tid = React.useRef();
   React.useEffect(()=>{
      tid.current = setInterval(()=>setN(n=>n+1),1000);
   },[]);
   function stopTimer(){
       clearInterval(tid.current);
   }
   return (<button onClick={stopTimer}>{n}</button>);}ReactDOM.render(<Timer/>,document.querySelector("div"));

A mutable ref allows you to, for instance, run an effect only on updates (not on mounting) by manually storing a Boolean value corresponding to whether you are on the first or a subsequent render. (If you find yourself doing this often, you could create a custom Hook for it. Refer to Chapter 22.)

Keep in mind that useRef doesn't notify you when its content changes. Mutating the .current property doesn't cause a re-render. If you want to run some code when React attaches or detaches a ref to a DOM node, you may want to use a callback ref (17.3) instead.

MENU

As a Component Variable