Как изменить переменную с состоянием в реагирующем хуке при каждом повторном рендеринге?

Question

Я хочу анимировать сложный компонент реакции. Примите как дано, пожалуйста, что эта анимация не может быть выполнена с css. Этот компонент имеет переменную состояния x, так что повторное рендеринг запускается при каждом обновлении x. Я хочу иметь возможность варьировать x от его текущего значения до целевого значения с последующим плавным повторным рендерингом компонента. Вот схема c моей первой наивной попытки сделать это:

export const MyComponent = (props: IProps) => {

  // Trigger 'animation' by toggling this boolean
  const [isXzero, setIsXzero] = useState(true);

  // I want x to vary between 0 and 500
  const [x, setX] = useState(0);

  useEffect(() => {
    if (!isXzero && x < 500) setX(x + 1);
    if (!!isXzero && x > 0) setX(x - 1);
  }, [isXzero, x]);

  return (<>...</>);
}

Это «работает», но приводит к следующему предупреждению:

Предупреждение: максимальная глубина обновления превышены. Это может произойти, когда компонент вызывает setState внутри useEffect, но useEffect либо не имеет массива зависимостей, либо одна из зависимостей изменяется при каждом рендеринге.

Я почти уверен, что это страдает из анти-паттерна «одна из зависимостей меняется при каждом рендеринге». Есть ли разумный React-i sh способ сделать то, что я пытаюсь достичь (относительно плавный повторный рендеринг, когда я изменяю x между целевыми значениями)?