useRef vs useState?

Definition:

useState stores a value that participates in the UI, while useRef stores a stable mutable container whose changes do not request rendering. A ref is useful for an imperative handle such as a DOM node or timer ID. It should not replace state for information that the screen must show when it changes.

Key points:

• State changes can trigger rendering; changing ref.current does not.

• Use refs for DOM nodes, timer IDs or mutable values not shown in the UI.

• Use state when the user should see a value change.

• Avoid reading or writing ordinary mutable refs during rendering to drive unpredictable UI; keep render output based on props and state.

Interview point:

• Ask whether changing the value should update the screen. That usually decides between state and a ref.