When will you use this?

Reach for hooks whenever the screen must react to user input, time, or data from an API.

• Hooks power live search, dark mode toggles, and fetching data when a page opens.
• Almost every React job posting mentions hooks — this is core daily work.

Real-world: HDFC OTP auto-focus

After SMS OTP is sent, first digit box should focus automatically. useRef points to the input without re-rendering the whole login form.

Production-style code

function OtpInput({ length = 6, onComplete }) {
  const firstRef = useRef(null);

  useEffect(() => {
    firstRef.current?.focus();
  }, []);

  const [digits, setDigits] = useState(Array(length).fill(''));

  function handleChange(i, value) {
    const next = [...digits];
    next[i] = value.slice(-1);
    setDigits(next);
    if (next.every(Boolean)) onComplete(next.join(''));
  }

  return (
    <div className="otp-row">
      {digits.map((d, i) => (
        <input
          key={i}
          ref={i === 0 ? firstRef : null}
          value={d}
          onChange={e => handleChange(i, e.target.value)}
          maxLength={1}
        />
      ))}
    </div>
  );
}

What happens in production: Better UX on mobile banking — users start typing OTP immediately; ref access does not trigger extra renders.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

import { useRef } from 'react';

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

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

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

Line-by-line walkthrough

How it works (big picture)

• ref={inputRef} attaches the DOM node to inputRef.current.
• Changing .current does not update the screen the component.

Do this on your computer

1. Create a ref and attach to an input.
2. Call .focus() from a button click.
3. Try storing interval id in a ref for cleanup.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.
• Open React DevTools (browser extension) while running useRef and inspect component props/state.

Remember

useRef persists values without update the screen. Great for DOM access and instance variables. ref={myRef} on JSX elements.

Common questions