How do refs and forwardRef work?

Question

Accepted Answer

refs are a **way to get direct access to a DOM element** or to a component method. forwardRef is a way **to pass a ref through a component** to its child element. **Simple analogy:** Imagine you are at a parking lot. - **Ref** — is a car key fob. You press a button (call a method) — the car opens. You don't stick your hands in it, you use the fob. - **forwardRef** — is when you give the fob to a friend (parent), and the friend passes it to their child who is sitting in the car (child component). **useRef — reference to DOM:** ```jsx function Form() { const inputRef = useRef(null); useEffect(() => { inputRef.current.focus(); // Focus on input on load }, []); return ; } ``` **useRef — reference to a value (does not cause re-render):** Unlike state, changing ref does NOT cause re-rendering. ```jsx function Timer() { const countRef = useRef(0); useEffect(() => { const timer = setInterval(() => { countRef.current++; }, 1000); return () => clearInterval(timer); }, []); } ``` **forwardRef — passing ref to child component:** ```jsx const Input = forwardRef((props, ref) => { return ; }); function Form() { const inputRef = useRef(null); return ; // ref is "passed through" to input } ``` **useImperativeHandle — configuring API via ref:** Allows you to decide what will be available to the parent via ref. ```jsx const Video = forwardRef((props, ref) => { const videoRef = useRef(null); useImperativeHandle(ref, () => ({ play: () => videoRef.current.play(), pause: () => videoRef.current.pause(), })); return

React: How do refs and forwardRef work?