ref, state и переменная
Вопрос
Чем отличаются useRef, useState и обычная переменная в теле компонента? Когда что используешь?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Переменная живёт один рендер и пересоздаётся
state сохраняется между рендерами и при изменении вызывает рендер
ref сохраняется между рендерами, но изменение не вызывает рендер
В state то, что видно на экране; в ref id таймеров, DOM-узлы, экземпляры библиотек
ref не читать и не писать в рендере, только в обработчиках и эффектах
Изменение state видно в следующем рендере, ref меняется сразу
Что могут спросить следом
- Как сохранить предыдущее значение пропа?
- Почему чтение ref в рендере плохо?
- Что будет, если хранить в ref текст поля?
Разбор
Обычная переменная создаётся при каждом вызове компонента и пропадает: в следующем рендере её значения уже нет. useState хранит значение между рендерами и при изменении планирует новый рендер, при этом внутри текущего рендера значение остаётся снимком. useRef тоже живёт всё время жизни компонента, но это просто изменяемая коробка: записал в current, значение изменилось сразу, и React об этом не знает, рендера не будет. Поэтому всё, что отображается, кладу в state. В ref храню то, что нужно обработчикам и эффектам: id таймера, ссылку на DOM, экземпляр карты или графика, флаг «уже отправили». В рендере ref не трогаю, иначе результат зависит от того, чего React не отслеживает.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.