React useRef Hook: Persistent Values Explained

What is useRef?

The useRef hook returns a mutable ref object whose .current property is initialized to the passed argument.

This object persists for the full lifetime of the component, allowing you to store values that survive re-renders.

• Created by calling React.useRef(initialValue).
• Returns an object: { current: initialValue }.
• Does not cause re-renders when .current changes.

Using useRef for Persistent Values

You can use useRef to store any mutable value that you want to persist between renders without triggering a re-render.

Common use cases include storing previous state values, timers, or any mutable data.

• Initialize with a default value: const ref = useRef(initialValue).
• Update the value by assigning to ref.current.
• Access the current value via ref.current.

Difference Between useRef and useState

While both useRef and useState can hold values, they behave differently in terms of component rendering.

useState triggers a re-render when updated, whereas useRef does not.

• useState updates cause React to re-render the component.
• useRef updates do not cause re-renders.
• useRef is ideal for storing mutable values that don't affect UI output.
• useState is better for data that affects rendering.

Practical Examples of useRef

Let's look at practical examples demonstrating how to use useRef for persistent values.