ComponentWillReceiveProps are changing my props which I was getting from API

Question

In my ComponentWillReceiveProps() methods my prop are getting updated which was fetched from API only. Please help how to recover the props.

My ComponentWillReceiveProps():

constructor(props) {
  super(props)
  this.state = {
    filtered_chart_data: {}
  }
  props.getEngagementInfo()
  props.getChartData()
}


componentWillReceiveProps(nextProps) {
  const lastSavedCharts = this.state.filtered_chart_data
  if (!_.isEmpty(nextProps.diagnose.chart_data)) {
    if (_.isEmpty(this.state.filtered_chart_data)) {
      return this.setState({
        filtered_chart_data: nextProps.diagnose.chart_data
      })
    }
    return this.setState(
      {
        filtered_chart_data: lastSavedCharts
      },
      () => this.updateFilters(nextProps.diagnose.chart_data)
    )
  }
}

updateFilters = chartDataToApplyFilters => {
  if (!_.isEmpty(this.state.filtered_chart_data)) {
    const { filters } = this.props.diagnose
    this.handleFilterPlantRegion(
      filters.plant_region,
      chartDataToApplyFilters
    )
    this.handleFilterPlant(filters.plant, chartDataToApplyFilters)
  }
}

In my nextProps the variable nextProps.diagnose.chart_data is updating every time, but it is being fetch from API.

Can you help How to not update this props?

Answer 1

you can try shouldComponentUpdate(), from docs