React js componentDidUpdate

Question

componentDidUpdate = (prevProps, prevState) => {
  if (
    prevState.sourceOpt !== this.state.sourceOpt ||
    prevState.destOpt !== this.state.destOpt ||
    prevState.tripOpt !== this.state.tripOpt ||
    prevState.fuelOpt !== this.state.fuelOpt ||
    prevState.minKm !== this.state.minKm ||
    prevState.Configure?.grossEarnings !== this.state.Configure?.grossEarnings ||
    prevState.rateOpt !== this.state.rateOpt ||
    prevState.extra_rate_per_km !== this.state.extra_rate_per_km ||
    prevState.waitingCharge !== this.state.waitingCharge ||
    prevState.wait !== this.state.wait ||
    prevState.categoryOpt !== this.state.categoryOpt ||
    prevState.modelOpt !== this.state.modelOpt
  ) {
    this.getDestinationCity()
    this.getTripBasedOnCity()
    this.getVehicleCategory()
    this.getFuelType()
    this.props.parentCallback(this.state.Configure?.grossEarnings)
    this.getGeneralData()
    this.getModelBaseOnCategory()
    this.getConfiguration()
    this.getAllData()
  }
  if (prevState.fuelOpt !== this.state.fuelOpt) {
    this.getMinKilo()
  }
  if (prevState.changeFareKm !== this.state.changeFareKm || prevState.changeFare !== this.state.changeFare
  ) {
    this.handleBlur()
  }
}      

Is there anyway to optimize this code? I want to optimize this code. Is there anyhow I can make this code more readable?

Answer 1

Checking condition method

public checkCondition(prevState){
   return (prevState.sourceOpt !== this.state.sourceOpt ||
    prevState.destOpt !== this.state.destOpt ||
    prevState.tripOpt !== this.state.tripOpt ||
    prevState.fuelOpt !== this.state.fuelOpt ||
    prevState.minKm !== this.state.minKm ||
    prevState.Configure?.grossEarnings !== 
    this.state.Configure?.grossEarnings ||
    prevState.rateOpt !== this.state.rateOpt ||
    prevState.extra_rate_per_km !== this.state.extra_rate_per_km ||
    prevState.waitingCharge !== this.state.waitingCharge ||
    prevState.wait !== this.state.wait ||
    prevState.categoryOpt !== this.state.categoryOpt ||
    prevState.modelOpt !== this.state.modelOpt)
}

taking actions method

public performActions(){
    this.getDestinationCity()
    this.getTripBasedOnCity()
    this.getVehicleCategory()
    this.getFuelType()
    this.props.parentCallback(this.state.Configure?.grossEarnings)
    this.getGeneralData()
    this.getModelBaseOnCategory()
    this.getConfiguration()
    this.getAllData()
}

Now your componentDidUpdate will be

public componentDidUpdate (prevProps, prevState) {
  if (this.checkCondition(prevState)) {
    this.performActions();
  }
  if (prevState.fuelOpt !== this.state.fuelOpt) {
    this.getMinKilo()
  }
  if (prevState.changeFareKm !== this.state.changeFareKm || 
   prevState.changeFare !== this.state.changeFare) 
  {
    this.handleBlur()
  }
}