When to Use Imperative vs Declarative APIs
Understand the trade-offs and decide when reaching for refs and imperative handles is justified.
React Is Declarative by Default
React encourages a declarative style: you describe what the UI should look like for a given state, and React reconciles the DOM to match. Most behavior flows through props and state rather than direct DOM commands.
This model makes UIs predictable, since the rendered output is a pure function of state rather than the result of a sequence of manual mutations.
When Declarative Is Insufficient
Some interactions resist a purely declarative expression. Imperatively focusing an element, triggering an animation at a precise moment, or driving a third-party DOM widget often cannot be captured cleanly as a function of state.
For these cases React provides escape hatches like refs and imperative handles, used sparingly where declarative props fall short.
All lessons in this course
- forwardRef: Exposing DOM Refs to Parents
- useImperativeHandle: Custom Instance Values
- Building an Imperative Component API
- When to Use Imperative vs Declarative APIs