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

Условие

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

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>
    </>
  );
};

Ответ

Передайте в useState функцию-инициализатор, а не уже вычисленное значение. Для инкремента используйте prev => prev + 1.

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

Инициализатор не вызывается при обычных обновлениях state, но dev Strict Mode может выполнить его повторно. Изменение props.count само по себе не сбрасывает существующий state.