CODEWITHSUNDEEP
javascriptreactjs
Marc Rasmussen
Marc Rasmussen

Reputation: 20555

react update forever loop componentDidUpdate

According to the documentation:

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Now my method looks like this:

componentDidUpdate(prevProps) {
    console.log("Fitting update");
    this.getDataBasedOnMessurements();
}

getDataBasedOnMessurements() {
    fetch(process.env.REACT_APP_API_URL + 'configurator/getFittingData', {
        method: 'PUT',
        body: JSON.stringify(this.props.messurements)
    }).then((response) => {
        return response.json();
    }).then((myJson) => {
        this.setState({data: myJson.fittingExtra})
    });
};

The problem with this is that since the state is being updated the ComponentDidUpdate is now in a forever loop enter image description here

So what is the right way of calling an API and updating the state when the props on the component is being updated?

Upvotes: 0

Views: 207

Answers (3)

johnmikelridzz
johnmikelridzz

Reputation: 340

You should put a conditional to stop the infinite loop in it. In this case, I think you are depending on this.props.messurements whether to make a call.

The example below is taken from the official React Documentation tweaked to your needs based on the code snippets you have provided us.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.messurements !== prevProps.messurements) {
    this.getDataBasedOnMessurements();
  }
}

Upvotes: 1

Anurodh Singh
Anurodh Singh

Reputation: 812

The right place for calling the API is in componentDidMount() and updating the state is in componentDidUpdate.

But as I can see you are not using any reducer or dispatching any function. You are directly setting the data after getting the response instead of updating the props. So, you can remove the componentDidUpdate() method and just call the API in componentDidMount()

Please check this code,

componentDidMount() {
    this.getDataBasedOnMessurements();
}

getDataBasedOnMessurements() {
    fetch(process.env.REACT_APP_API_URL + 'configurator/getFittingData', {
        method: 'PUT',
        body: JSON.stringify(this.props.messurements)
    }).then((response) => {
        return response.json();
    }).then((myJson) => {
        this.setState({data: myJson.fittingExtra})
    });
};

Upvotes: 1

Aravindan Venkatesan
Aravindan Venkatesan

Reputation: 628

In this code, getDataBasedOnMessurements function will be called for each update of props as there is no condition in your componentDidUpdate code. You have to compare the props to get the specific situation where you want to trigger the api call.

Upvotes: 1

Related Questions