> Нужно ли использовать useMemo или useRef для хранения статичных данных в React? (React)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: Альфа-банк

Стек: React

> Пример ответа

Для хранения статичных данных (значений, которые не меняются между рендерами и не участвуют в вычислениях) в React предпочтительнее использовать useRef, а не useMemo.

useRef создаёт объект с неизменяемой ссылкой, который сохраняется на протяжении всего жизненного цикла компонента. Он не вызывает перерендеров и идеально подходит для хранения любых статичных значений (например, конфигураций, экземпляров классов, DOM-элементов, таймеров).

useMemo предназначен для мемоизации результатов дорогостоящих вычислений, которые зависят от определённых зависимостей. Если данные статичны и не требуют вычислений, useMemo избыточен - он всё равно будет вызываться при каждом рендере (хотя и возвращать кешированное значение), что добавляет лишнюю работу.

Пример:

JSX
// Плохо: useMemo для статичных данных
const config = useMemo(() => ({ theme: 'dark', lang: 'ru' }), []);
// Хорошо: useRef для статичных данных
const configRef = useRef({ theme: 'dark', lang: 'ru' });
// Доступ: configRef.current

Исключение: если статичные данные используются в качестве зависимостей других хуков (например, useEffect), useRef может быть неудобен, так как его .current не является стабильной ссылкой для сравнения. В таких случаях допустимо использовать useMemo с пустым массивом зависимостей, но это скорее костыль, а не правило.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью