Реакция setState в useEffect вызывает бесконечный цикл рендеринга

Question

Я пытаюсь создать калькулятор, который позволит вам увидеть сравнительные значения коэффициентов. Но с моим текущим подходом, когда пользователь редактирует num1 или num2, это вызывает бесконечный повторный рендеринг вычисленных значений. Я не могу понять, как этого избежать, так как calc1 и calc2 зависят от отношения, но также и друг от друга.

Как бы я этого достиг, используя функциональный компонент?

import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { useState } from "react";

function App() {
  let [num1, setNum1] = useState(5);
  let [num2, setNum2] = useState(10);
  let [ratio, setRatio] = useState();

  let [calc1, setCalc1] = useState();
  let [calc2, setCalc2] = useState();

  useEffect(() => {
    setRatio(num2 / num1);
  }, [num1, num2]);

  useEffect(() => {
    setCalc1(calc2 / ratio);
  }, [calc2, ratio]);

  useEffect(() => {
    setCalc2(calc1 * ratio);
  }, [calc1, ratio]);

  return (
    <div className="App">
      <input
        type="number"
        value={num1}
        onChange={e => setNum1(e.target.value)}
      />{" "}
      is to{" "}
      <input
        type="number"
        value={num2}
        onChange={e => setNum2(e.target.value)}
      />
      <p>Ratio is {ratio} therefore</p>
      <input
        type="number"
        value={calc1}
        onChange={e => setCalc1(e.target.value)}
      />{" "}
      ={" "}
      <input
        type="number"
        value={calc2}
        onChange={e => setCalc2(e.target.value)}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

Здесь есть циклическая зависимость, когда setCalc1 срабатывает, тогда calc1 изменяется, поэтому вторая useEffect срабатывает с setCalc2, что изменит calc2, поскольку это зависимость в первой useEffect,перезапустите цикл и т. д.

useEffect(() => {
    setCalc1(calc2 / ratio);
  }, [calc2, ratio]);

  useEffect(() => {
    setCalc2(calc1 * ratio);
  }, [calc1, ratio]);

вам необходимо провести рефакторинг вашего кода, чтобы избежать этой зависимости, например, используя объект, заключающий в себе calc1 и calc2

https://codesandbox.io/s/immutable-forest-typwu