React useRef Hook

useRef accesses DOM elements and stores values without re-render.

Accessing DOM Elements

import { useRef } from 'react';

function Input() {
  const inputRef = useRef();

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus</button>
    </div>
  );
}

Storing Values

function Timer() {
  const countRef = useRef(0);

  const increment = () => {
    countRef.current += 1;
    console.log(countRef.current); // Doesn't trigger re-render
  };

  return <button onClick={increment}>Increment</button>;
}

Remember

• Use for DOM access
• Values persist across renders
• Changing ref doesn't trigger re-render

Next: Learn React performance optimization!