A search panel has an Activate Search button that is supposed to programmatically focus a custom input component and update a status label to confirm activation. Clicking the button sets the status to "cannot focus" instead of "active" and the search input is never focused. The bug is rooted in React's rule that function components do not accept a ref prop by default and require explicit opt-in before a parent can attach one.
Click Activate Search - the status shows "cannot focus" and the input field is never focused. The button fires correctly but the ref never reaches the underlying input element.
When you pass a ref to a custom component rather than to a native HTML element, where does that ref actually end up?
When you pass a ref to a custom component rather than to a native HTML element, where does that ref actually end up?
Why this fixes it
Passing a ref to a function component without `forwardRef` causes React to silently drop it - the component has no mechanism to receive and attach a ref, so `inputRef.current` stays `null` after mount. When `handleActivate` checks `inputRef.current` it finds `null` and takes the else branch, setting status to "cannot focus" instead of calling `focus()`. Wrapping `SearchInput` with `forwardRef` accepts the ref as a second argument alongside props and passes it down to the underlying native input element, giving React a real DOM node to attach. `inputRef.current` now points to the actual input, the `focus()` call succeeds, and the status correctly shows "active".