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

Question

state вызывает ререндер и используется для UI. ref сохраняет значение между рендерами, но не вызывает обновление интерфейса. Локальные переменные пересоздаются при каждом рендере и не сохраняют состояние. Каждый инструмент решает свою задачу и не является взаимозаменяемым.

YeaHub · Accepted Answer

Определение и ключевая идеяВ React существует три принципиально разных способа хранения данных, и выбор влияет на поведение компонента.stateРеактивныйХранится между рендерамиИзменение → ререндерconst [count, setCount] = useState(0);
Используется для:отображаемых данныхлогики UIсостояния формыrefМутабельныйХранится между рендерамиИзменение не вызывает ререндерconst prevValue = useRef(null);
Используется для:DOM-элементовтаймеровпредыдущих значенийфлагов, не влияющих на UIЛокальные переменныеСоздаются заново при каждом рендереНе сохраняют состояниеПодходят только для вычисленийconst doubled = count * 2;
Ключевые различия в поведенииstate — источник правды для UIref — хранилище “между рендерами”локальные переменные — одноразовыеВыводЕсли данные должны жить между рендерами и влиять на UI — state.Если должны жить, но не влиять на UI — ref.Если нужны только для текущего вычисления — локальная переменная.