Summary - Advanced useRef
- React course
- Intermediate
- Lesson 68/80
- 5 min
Wrap an input with forwardRef and focus it from the parent.
Summary - Advanced useRef
In this group you learned computation caching with useRef, DOM measurement, and ref passing with forwardRef. useRef holds values without triggering renders; measurement is done in useEffect; forwardRef passes a ref to a child component.
These three techniques together build complex interactions: cached computation, measurement-based layout and accessible child components. In the last step you combine all three.
Practice Summary forwardRef
Complete the skeleton below. Write a FancyInput component with forwardRef; take (props, ref) and return <input ref={ref} {...props} />. Export it.
Starter code
import { forwardRef } from "react";
// Write the FancyInput component hereSample solution
import { forwardRef } from "react";
const FancyInput = forwardRef((props, ref) => {
return <input ref={ref} {...props} />;
});
export default FancyInput;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which hook does DOM measurement?
- useState
- useCallback
- useEffect Correct answer
- useMemo
Explanation: Measurement is done in useEffect.
2 Summary match
| Term | Meaning |
|---|---|
useRef |
Holds a value |
useEffect |
Takes a measurement |
forwardRef |
Forwards the ref |
current |
Ref property |