Оптимизация и исправление инициализации состояния в React‑компоненте

Условие

В примере ниже при монтировании компонента вызывается тяжёлая функция, из‑за чего каждый рендер блокирует UI на несколько секунд. Кроме того, обработчик кнопки работает некорректно, так как использует устаревшее значение. Нужно исправить инициализацию состояния, применив ленивый вариант useState, а также поправить инкремент счётчика.

import React, { useState } from "react";

export default () => <div>Clicker</div>;

const computeHeavy = (initial) => {
  // hard calculations
  // 10sec
};

const LazyComponent = (props) => {
  const [value, setValue] = useState(() => computeHeavy(props.initial));
  return (
    <>
      {value}
      <button onClick={() => setValue((prev) => prev + 1)}>
        Increment
      </button>
    </>
  );
};

Ответ

Показанный LazyComponent уже использует правильную ленивую инициализацию и функциональный инкремент. Но экспорт по умолчанию выводит только Clicker, а не этот компонент.

Чтобы увидеть его, экспортируйте LazyComponent или включите его в JSX. Ленивый initializer не ускоряет первое тяжёлое вычисление: для длительной CPU-работы нужен другой подход, например Worker. В dev Strict Mode initializer может вызываться повторно для проверки чистоты; изменение initial не переинициализирует существующий state.