React useRef: DOM Access, Persistent Values & Examples

import { useRef } from "react";

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

  function handleFocus() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" placeholder="Search courses" />
      <button onClick={handleFocus}>Focus the search box</button>
    </div>
  );
}

export default SearchBar;

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

function QuizTimer() {
  const [timeLeft, setTimeLeft] = useState(60);
  const intervalRef = useRef(null);

  useEffect(() => {
    intervalRef.current = setInterval(() => {
      setTimeLeft(prev => prev - 1);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  function handlePause() {
    clearInterval(intervalRef.current);
  }

  return (
    <div>
      <p>Time left: {timeLeft}s</p>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}