Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind React forwardRef?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___ { forwardRef, useRef } from 'react';3Order
Put the learning moves in the order that makes the concept easiest to apply.
Here's a simple example of forwarding a ref to an input element:
- Focusing input elements - Triggering animations - Measuring DOM elements - Integrating with third-party libraries
forwardRef lets your component pass a reference to one of its children.
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.
Common uses for forwardRef
- Focusing input elements
- Triggering animations
- Measuring DOM elements
- Integrating with third-party libraries
Basic Example
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> );
}In this example
- We wrap our input component with forwardRef
- The component receives a ref as its second parameter
- The parent can now control the input element directly
Note
Only use forwardRef when you need direct access to a DOM element. For most cases, you can use props and state instead.