В данном примере состояние компонента заполняется сразу же, вызывая ресурсоёмкую функцию при каждом рендере. Нужно переписать компонент так, чтобы тяжёлая функция вычислялась только один раз — при первом монтировании — и при этом пользователь мог увеличивать значение счётчика через кнопку.

const computeRandom = total => {
  return Math.floor(Math.random() * total);
};

const LazyInit = props => {
  const [value, setValue] = useState(computeRandom(props.count));
  return (
    <>
      {value}
      <button onClick={() => setValue(prev => ++prev)}>Increment</button>
    </>
  );
};

Повышение эффективности React‑компонента через ленивую инициализацию состояния