В примере ниже при монтировании компонента вызывается тяжёлая функция, из‑за чего каждый рендер блокирует 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>
    </>
  );
};

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