const myRef = useRef(initialValue);

import { useRef } from 'react';

function FocusInput() {
 const inputRef = useRef(null);

 const focusInput = () => {
   inputRef.current.focus(); // Focus the input element
 };

 return (
   <>
     <input ref={inputRef} type="text" />
     <button onClick={focusInput}>Focus Input</button>
   </>
 );
}

import { useRef, useState, useEffect } from 'react';

function Timer() {
 const [count, setCount] = useState(0);
 const countRef = useRef(0); // store current count without triggering re-render

 useEffect(() => {
   const interval = setInterval(() => {
     countRef.current += 1;
     setCount(countRef.current); // update visible count
   }, 1000);

   return () => clearInterval(interval);
 }, []);

 return <h2>Timer: {count}</h2>;
}

import { useRef, useEffect, useState } from 'react';

function PreviousValue() {
 const [count, setCount] = useState(0);
 const prevCount = useRef();

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

 return (
   <>
     <h2>Now: {count}</h2>
     <h4>Before: {prevCount.current}</h4>
     <button onClick={() => setCount(count + 1)}>+1</button>
   </>
 );
}