// src/App.jsx
import { useEffect, useRef } from "react";

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

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

  return <input ref={inputRef} placeholder="I'm focused automatically" />;
}

function App() {
  return <AutoFocusInput />;
}

export default App;

/*
  Notes:
  - The empty dependency array means the effect runs once, right after
    the first render — by that point inputRef.current is guaranteed to
    already be the real <input> DOM node.
  - Calling .focus() directly on inputRef.current works exactly like
    calling it on any DOM element selected with plain JavaScript.
*/