Understanding useRef and forwardRef in React — A Beginner’s Guide
When working with React, you often hear about useRef and forwardRef . At first, they can feel confusing: “Why do I need refs when I already have props and state?” This article will walk you through the why, how, and when of refs in React — with simple examples, analogies, and real use cases. 1. What is useRef ? Think of useRef as a sticky note inside your component. Whatever you write on it will still be there even after React re-renders your component. function App() { const inputRef = React.useRef<HTMLInputElement>(null); const focusInput = () => { inputRef.current?.focus(); }; return ( <div> <input ref={inputRef} placeholder="Type here..." /> <button onClick={focusInput}>Focus Input</button> </div> ); } useRef creates a box that holds a reference to the <input> DOM element. inputRef.current po...
