Повторное обновление состояния - ReactJs

Question

Привет, у меня есть родительский компонент с двумя дочерними компонентами, как показано ниже. У Child1 есть перетаскиваемый элемент div, который при перетаскивании выдает значение родительскому компоненту, который затем я должен передать в Child2 и использовать, но перед его использованием в Child2 I нужно сделать десятки вычислений.

const Parent = () => {
  const [dragValue, setDragValue] = useState(0);
  const dragHanlder = (dragVal) => {
     setDragValue(dragVal);
  };
  return (
        <Child1 mouseDrag={dragHanlder} />
        <Child2 dragValue={dragValue}/>
  );
}

class Child2 extends React.Component {
   state = {
     afterCalculationsVal: 0
   };
   componentDidUpdate = () => {
      const { dragValue } = this.props;
      const someFinalval = val //this val takes dragValue applies checks, calculations and conditions and finally gives out some value
      this.setState({afterCalculationsVal: someFinalval });
   };

   render() {
      const { afterCalculationsVal } = this.state;
      return (
         <Child3 afterCalculationsVal={afterCalculationsVal} >
      );
   }
}

Проблема в том, что у меня проблема с максимальной глубиной, потому что я устанавливаю состояние для непрерывного перетаскивания. Есть ли способ преодолеть это. Я не могу использовать "dragValue", входящее в реквизиты в Child2 напрямую, вычисления значения реквизита являются обязательными, и после этого мне нужно установить состояние.

Answer 1

Проблема в том, что когда компонент обновляется, он переходит в componentDidUpdate, а затем устанавливает состояние, вызывающее другое обновление. Установка значения перетаскивания для проверки условий должно решить вашу проблему.

componentDidUpdate = (prevProps, prevState) => {
    const { dragValue } = this.props;
    if(prevState.dragValue !== prevState.dragValue){
      // Will only re-render when dragValue changes
      const someFinalval = val 
      this.setState({afterCalculationsVal: someFinalval });
    }
  };

Answer 2

Никогда не используйте this.setState в componentdidupdate, не проверив, действительно ли изменилось значение, которое вы изменяете. Фактически этот триггер бесконечно l oop

componentDidUpdate = () => {
      const { dragValue } = this.props;
      const someFinalval = val //this val takes dragValue applies checks, calculations and conditions and finally gives out some value
      if(/** your check *//)
      this.setState({afterCalculationsVal: someFinalval });
   };