Устранить баги и повысить эффективность

Условие

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

Требуется исправить потенциальные проблемы (например, утечку ресурсов из‑за незавершённого интервала) и улучшить производительность, корректно задав зависимости в эффектах.

import { useEffect, useState, FC } from "react";

const userData = {
  name: "54",
  age: 21,
  info: 22
};

const MainComponent: FC<typeof userData> = ({ name, ...restProps }) => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCounter(prev => prev + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    // .... сложные вычисления, использующие restProps
  }, [restProps]);

  return <div>{counter}</div>;
};

export const App = () => <MainComponent {...userData} />;

Задача подразумевает рефакторинг кода, исправление ошибок и оптимизацию работы компонентов.

Ответ

Очистка интервала в показанном коде уже есть. Проблема в restProps: деструктуризация создаёт новый объект на каждом рендере, поэтому эффект с [restProps] запускается каждую секунду.

Деструктурируйте конкретные поля ({ name, age, info }) и используйте [age, info] как зависимости эффекта, если он синхронизирует внешнюю систему. Если это чистое вычисление для отображения, перенесите его в рендер и при подтверждённой дороговизне заверните в useMemo с теми же зависимостями. Альтернатива для существующего интерфейса — собрать стабильный объект через useMemo(() => ({ age, info }), [age, info]). Не ставьте [] только ради подавления повторов: тогда реальные изменения входных данных перестанут учитываться.