В чём разница между state, ref и локальными переменными

Определение и ключевая идея

В React существует три принципиально разных способа хранения данных, и выбор влияет на поведение компонента.

state

1. Реактивный

2. Хранится между рендерами

3. Изменение → ререндер

const [count, setCount] = useState(0);

Используется для:

• отображаемых данных

• логики UI

• состояния формы

ref

1. Мутабельный

2. Хранится между рендерами

3. Изменение не вызывает ререндер

const prevValue = useRef(null);

Используется для:

• DOM-элементов

• таймеров

• предыдущих значений

• флагов, не влияющих на UI

Локальные переменные

1. Создаются заново при каждом рендере

2. Не сохраняют состояние

3. Подходят только для вычислений

const doubled = count * 2;

Ключевые различия в поведении

1. state — источник правды для UI

2. ref — хранилище “между рендерами”

3. локальные переменные — одноразовые

Вывод

Если данные должны жить между рендерами и влиять на UI — state.
Если должны жить, но не влиять на UI — ref.
Если нужны только для текущего вычисления — локальная переменная.