Summary - Advanced useRef

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.

Exercise Summary forwardRef

Complete the skeleton below. Write a FancyInput component with forwardRef; take (props, ref) and return <input ref={ref} {...props} />. Export it.

Show example solution

import { forwardRef } from "react";

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

export default FancyInput;

Test yourself

Which hook does DOM measurement?
- useState
- useCallback
- useEffect
- useMemo
Show answer

useEffect — Measurement is done in useEffect.
Summary match

useRef

Holds a value
useEffect

Takes a measurement
forwardRef

Forwards the ref
current

Ref property

Next lesson: React Testing Library

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies