> Как оптимизировать тяжелую функцию в React с помощью ленивой инициализации? (React)

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

Компании: IT-One

Стек: React

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

Ленивая инициализация в React применяется для отложенного вычисления начального состояния или создания объектов, которые не нужны при каждом рендере. Основной инструмент - функция-инициализатор в useState или useReducer.

Пример с useState:

Вместо:

JSX
const [data, setData] = useState(expensiveComputation()); // вызывается при каждом рендере

Используйте:

JSX
const [data, setData] = useState(() => expensiveComputation()); // вызывается только при монтировании

Для тяжелых вычислений, зависящих от пропсов:

JSX
function HeavyComponent({ items }) {
  const [processed, setProcessed] = useState(() => {
    // выполняется один раз при первом рендере
    return items.map(item => heavyTransform(item));
  });
  // ...
}

Ленивая инициализация для useRef:

Если нужно создать тяжелый объект (например, экземпляр класса), используйте:

JSX
const heavyObj = useRef(null);
if (heavyObj.current === null) {
  heavyObj.current = new HeavyClass(); // выполняется один раз
}

Важно: функция-инициализатор должна быть чистой (без сайд-эффектов) и выполняться синхронно. Для асинхронной загрузки используйте useEffect или библиотеки вроде react-query.