How to design my React project better without using shouldComponentUpdate

I am trying to construct 1-minute candlestick.

I have a component that will continuously passing a number (the trade price) to his child component.

This child component will keep update its state: (High, Low, Open, Close) base on the new number he gets from the parent. (e.g. if the number coming in, is higher than the current this.state.high, it will update this.state.high to the new number) After every minute a setInterval function it will take the states and construct a candle and pass it down to its own children.

the state are: high, low, open, close, newCandle

I got it working by using

shouldComponentUpdate(nextProps:props, nextState:state){                    if(this.props !== nextProps)            this.updateStates(nextProps.newTradePrice); //will update the high, low, open, close state           if(JSON.stringify(nextState.nextMinuteCandle) !== JSON.stringify(this.state.nextMinuteCandle)  ) //once the one minute interval is up, there will be a function that will auto set the newCandle state to a new Candle base on the current high, low, open, close state            return true;          return false;  }  

I read in the document that shouldComponentUpdate should only be used for optimization not to prevent something to reRender. I am using this to prevent reRender and infinite loop.

I've been stuck on this for days, I cant figure out a way to design this better. Any advice on how to design this better?

2nd related question:

In fact I am relying on shouldComponentUpdate for almost ALL my component too. This can't be right. e.g. I have a CalculateAverageVolume child component, that takes in the this.state.newCandle. And update the volume every time the newCandle changes (i.e. every minute)

constructor(props: props) {    super(props);    this.state = {      [...],      currentAverage: 0,      showVolume: true    };  }    onCloseHandler()  {      this.setState({showVolume: false});  }    updateAvg(newCandleStick: CandleStick){     //do caluation and use this.setState to update the this.state.currentAverage  }    shouldComponentUpdate(nextProps:props, nextState:state)  {      if(JSON.stringify(this.props.candleStick) !== JSON.stringify(nextProps.candleStick) || this.state.showVolume !== nextState.showVolume){          this.updateAvg(nextProps.candleStick);          return true;      }      return false;  }    render() {      return (          <>          {(this.state.showVolume &&                  <IndicatorCard                       cardHeader="Volume"                      currentInfo={this.state.currentAverage.toString()}                      onCloseHandler={()=>this.onCloseHandler()}>                  </IndicatorCard>          )}          </>      );  }  

}

Can someone please teach me how to design this or restructure this? This works perfectly, but doesn't seem like the right way to do it

https://stackoverflow.com/questions/66897874/how-to-design-my-react-project-better-without-using-shouldcomponentupdate April 01, 2021 at 11:01AM