Bugl — Daily coding puzzles and drills

â® Previous Next â¯

What is forwardRef?

forwardRef lets your component pass a reference to one of its children. It's like giving a direct reference to a DOM element inside your component.

Here's a simple example of forwarding a ref to an input element:

Example import { forwardRef, useRef } from 'react';

const MyInput = forwardRef((props, ref) => (
<input ref={ref} {...props} />
));

function App() {
const inputRef = useRef();

const focusInput = () => {
inputRef.current.focus();
};

return (

<div>

<MyInput ref={inputRef} placeholder="Type here..." />
<button onClick={focusInput}>Focus Input</button>

</div>

);
}

The component receives a ref as its second parameter The parent can now control the input element directly

Only use forwardRef when you need direct access to a DOM element. For most cases, you can use props and state instead. â® Previous Next â¯