Refs & Imperative APIs
Refs & Imperative APIs
forwardRef, useImperativeHandle, useId, click-outside and ref typing.
React + TypeScript6 challenges0 Easy3 Medium3 Hard
Your progress0 / 6 solved
- Medium~20 min
Typing forwardRef
Correctly type a component that forwards a ref to an HTMLInputElement and accepts a label prop.
- forwardRef
Start Challenge - Hard~35 min
Ref Forwarding Chain
You need to forward a ref through multiple levels of components to access a DOM element deep in the tree.
- forwardRef
Start Challenge - Hard~35 min
useImperativeHandle for Custom Ref API
You need to expose a custom API through a ref instead of the default DOM element. Use useImperativeHandle to…
- useImperativeHandle
- Refs
Start Challenge - Medium~20 min
useId for Unique Identifiers
When rendering the same component multiple times, using hardcoded IDs causes duplicate IDs in the DOM. Use…
- useId
Start Challenge - Hard~35 min
useImperativeHandle Pattern
Create a custom input component that exposes focus() and clear() methods to parent components via a ref.
- useImperativeHandle
Start Challenge - Medium~20 min
useClickOutside Custom Hook
The dropdown stays open even when the user clicks somewhere else on the page. Build a reusable…
- Events
- Custom Hooks
Start Challenge