Sometimes a parent component needs access to a DOM element rendered inside a reusable child component. For example, a parent may need to focus an input that is wrapped inside a custom `SearchInput` component. ### The Problem Suppose you have: ```jsx function SearchInput() { return ; } ``` The parent wants to do: ```javascript inputRef.current.focus(); ``` but the actual `` exists inside `SearchInput`. ### Modern React Ref Passing In modern [React](/courses/reactjs), a component can receive `ref` as a prop and pass it to the underlying DOM element. ```jsx function SearchInput({ ref }) { return ( ); } ``` The parent can then write: ```jsx function SearchPage() { const inputRef = useRef(null); function focusSearch() { inputRef.current.focus(); } return ( <> ); } ``` Conceptually: ```text Parent ref ↓ SearchInput ↓ ↓ actual DOM input ``` ### forwardRef in Older React Code You will frequently encounter `forwardRef` in existing [React](/courses/reactjs) codebases: ```jsx import { forwardRef } from "react"; const SearchInput = forwardRef(function SearchInput( props, ref ) { return ( ); }); ``` Then the parent usage is the same: ```jsx ``` `forwardRef` was traditionally needed to explicitly forward a parent's ref through a [function](/javascript/functions-in-javascript) component. Modern React allows refs to be received as props, so new code may not require `forwardRef`, but understanding it remains important because many existing React applications and libraries use it. ### Why Forward Refs? Useful cases include reusable components such as: ```text Input components Textareas Modal containers Scroll areas Custom media players Focusable controls ``` ### Do Not Expose DOM Nodes Without a Reason A reusable component should usually hide its internal implementation. For example: ```jsx