useRef Hook

import { useRef } from 'react';

function SearchBox() {
  const inputRef = useRef(null);  // initial value null

  function focusInput() {
    inputRef.current.focus();  // DOM element directly access
  }

  function clearInput() {
    inputRef.current.value = "";
    inputRef.current.focus();
  }

  return (
    <div>
      {/* ref prop — React element ला ref attach करतो */}
      <input ref={inputRef} placeholder="Search करा..." />
      <button onClick={focusInput}>Focus</button>
      <button onClick={clearInput}>Clear</button>
    </div>
  );
}

import { useState, useRef } from 'react';

function RenderCounter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);  // renders मध्ये persist होतो

  // प्रत्येक render वर increment — re-render trigger नाही
  renderCount.current += 1;

  return (
    <div>
      <p>State count: {count}</p>
      <p>Component renders: {renderCount.current}</p>
      <button onClick={() => setCount(c => c + 1)}>
        State वाढवा (Re-render!)
      </button>
    </div>
  );
}

import { useState, useRef } from 'react';

function StopWatch() {
  const [time, setTime] = useState(0);
  const [running, setRunning] = useState(false);
  const timerRef = useRef(null);  // timer ID store करतो

  function start() {
    setRunning(true);
    timerRef.current = setInterval(() => {
      setTime(t => t + 1);
    }, 1000);
  }

  function stop() {
    setRunning(false);
    clearInterval(timerRef.current);  // timer बंद करतो
  }

  function reset() {
    stop();
    setTime(0);
  }

  return (
    <div>
      <p>{time}s</p>
      <button onClick={start} disabled={running}>Start</button>
      <button onClick={stop} disabled={!running}>Stop</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}