useRef — способ хранить «что-угодно», не вызывая лишних рендеров: сохраняем id таймера setInterval в id.current, а при размонтировании чистим его; стейт не трогаем — компонент молчит, но таймер живёт.

#гайды #react #hooks #javascript #frontend

Если список рендерится медленно, проверьте, не пересоздаются ли функции-колбэки на каждый рендер.

Оберните дочерний компонент в React.memo, а обработчики в родителе — в useCallback(fn, [deps]);

так React отследит неизменённые ссылки и перерисует только обновившиеся элементы.

#react #hooks #гайды #javascript

useEffect в React: кладите в массив зависимостей всё, что используется внутри эффекта (пропсы, стейт, функции), иначе получите устаревшие значения;

чтобы стабилизировать функции и объекты и не триггерить эффект лишний раз — оборачивайте их в useCallback/useMemo. Для подписок и таймеров возвращайте очистку (unsubscribe/clearInterval) из эффекта — она сработает при размонтировании и при изменении зависимостей.

Не выключайте правило react-hooks/exhaustive-deps — оно помогает не пропускать зависимости.

#react #javascript #гайды #frontend

useMemo в React — кэшируем «дорогие» вычисления и фиксируем ссылочные значения, чтобы не дёргать лишние рендеры.

Пример:

const visible = useMemo(() => items.filter(it => it.title.includes(query)).sort(sorter[sortKey]), [items, query, sortKey]);

— пересчёт только при изменении зависимостей.

Стабилизация пропсов:

const columns = useMemo(() => [{id: 'name'}, {id: 'age'}], []);

передайте columns в дочерний компонент с React.memo — он не перерендерится из‑за новой ссылки.

Совет:
Применяйте useMemo для тяжёлых вычислений и стабилизации массивов/объектов в зависимостях; не используйте для побочных эффектов и не оборачивайте «на всякий случай».

#react #hooks #гайды #javascript #frontend