When would you use a ref instead of state in React?

Distinguishes render-driving state from instance-local mutable values and DOM references.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I use state when a change must be reflected in the UI, because updating state schedules a render. I use a ref for a value that must survive renders but does not determine the output, such as a DOM node, timer handle, previous request token, or latest callback reference. Changing ref.current does not rerender the component.

Full answer below

Practice focus

State and ref semantics, rendering, stale mutable reads, DOM access, and component lifetime.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Overview
The choice depends on whether a value participates in the rendered result, not merely whether it changes.
I use state when a change must be reflected in the UI, because updating state schedules a render. I use a ref for a value that must survive renders but does not determine the output, such as a DOM node, timer handle, previous request token, or latest callback reference. Changing ref.current does not rerender the component.
Checkpoint
Stronger answer
Optional upgrade with examples, trade-offs, and sharper phrasing.
A ref is instance-local mutable storage, so I avoid reading or writing it during render except predictable initialization. If the screen displays a value, using a ref can leave the DOM stale because React has no update to schedule. Refs are useful in event handlers and Effects for imperative integration or bookkeeping, while state remains the source of truth for visible status. I also clear owned resources during cleanup instead of treating the ref itself as lifecycle management.

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Keeping visible form values only in refs.
Mutating a ref during render for ordinary updates.
Using a module variable when instance-local lifetime is required.

When would you use a ref instead of state in React?

Practice focus

Answer path

Overview

Review signals

Follow-up prompts

Continue practice

Prerequisite

Tech stacks

Skill areas

Human editorial direction

Was this drill useful?

Found this answer useful?