React: хуки и мемоизация

React перерисовывает всё, что затронуто изменением состояния. Мемоизация ограничивает «лишний» рендер и превращает медленные списки в быстрые. Разбираем главные инструменты.

useMemo и useCallback

// Дорогое вычисление только при смене входных данных
const total = useMemo(() => items.reduce((s, i) => s + i.price, 0), [items]);

// Стабильная ссылка на функцию между рендерами
const onSave = useCallback(async (data) => {
  await api.save(data);
}, [deps]);

React.memo и кастомные хуки

// Дочерний компонент не рендерится, если пропсы не изменились
const Row = React.memo(({ item }) => (
  <li>{item.title}</li>
));

// Кастомный хук: переиспользуемая логика с состоянием
function useLocalStorage(key, initial) {
  const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) ?? initial);
  useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]);
  return [value, setValue];
}