How to forward refs in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Forwarding refs allows components to pass DOM references through to their children, enabling parent components to directly access nested elements.
With over 11 years of experience in software development and as the creator of CoreUI, I’ve used ref forwarding extensively in component libraries and reusable UI elements.
From my expertise, the most reliable approach is using React.forwardRef() to wrap components that need to expose their inner DOM elements.
This pattern is essential for building accessible, reusable components that work seamlessly with parent component logic.
Use React.forwardRef() to create components that can pass refs through to their child elements.
import { forwardRef } from 'react'
const CustomInput = forwardRef((props, ref) => (
<input ref={ref} {...props} className='custom-input' />
))
function ParentComponent() {
const inputRef = useRef(null)
return <CustomInput ref={inputRef} placeholder='Type here' />
}
Here forwardRef((props, ref) => {...}) creates a component that receives a ref as its second parameter and forwards it to the appropriate child element. The ref={ref} syntax passes the forwarded ref directly to the input element. Parent components can then use ref={inputRef} to access the inner input element directly through inputRef.current, enabling focus management, value access, and other imperative operations.
Best Practice Note:
This is the same approach we use in CoreUI React components to ensure our form inputs, buttons, and interactive elements can be controlled by parent components. Always use forwardRef when building reusable components that wrap DOM elements, especially for form components and interactive UI elements.
