CODEWITHSUNDEEP
javascriptreactjsreact-props
Uzair Khan
Uzair Khan

Reputation: 2970

Updating state repeatedly - ReactJs

Hi I have a parent component, having two child component as follows, Child1 has draggable div element, which on drag gives value out to Parent component which then I have to pass to Child2 and utilise, but before utilising it in Child2 I have to make a dozens of calculations.

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

Problem is I'm getting maximum depth reached issue, because I'm setting state for drag which is continuous. Is there any way I can overcome this. I cannot use the 'dragValue' coming in props in Child2 directly, the calculations on the props value is mandatory, and I have to set state after that.

Upvotes: 0

Views: 1258

Answers (2)

Drewsup123
Drewsup123

Reputation: 26

The problem is that when the component updates it is going into componentDidUpdate then setting state causing another update. Setting an if condition checking drag value should fix your problem.

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

Upvotes: 1

Omar Sy
Omar Sy

Reputation: 496

Never use this.setState in the componentdidupdate without checking the value that you change are really changed. Infact this trigger an infinit loop

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

Upvotes: 1

Related Questions