Repeatedly calling setState inside componentWillUpdate or componentDidUpdate?

Question

I'm trying to figure out the orientation of background-images in a React component that are passed in as props.

I start off by creating an Image object and setting its src to the new Image:

  getImage() {
    const src = this.props.url;
    const image = new Image();
    image.src = src;

    this.setState({
      height: image.height,
      width: image.width
    });
  }

After I've updated the state with the heights and widths, I try calling getOrientation() inside of componentDidUpdate():

  getOrientation() {
    const { height, width } = this.state;
    if (height > width) {
      this.setState({ orientation: "portrait" });
    } else {
      this.setState({ orientation: "landscape" });
    }
  }

I then get the following error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.

Any ideas what's going on here?

Link to Sandbox

Possible duplicate of https://stackoverflow.com/questions/30528348/setstate-inside-of-componentdidupdate — zfrisch, Nov 21 '18 at 23:10

score 11 · Accepted Answer · edited Mar 09 '23 at 13:02

11

The valid function signature of componentDidUpdate is:

componentDidUpdate(prevProps, prevState, snapshot)

Note that the arguments have to be in the correct order. Here you can see that the previous props is the first argument, and the previous state the second one.

If you only have componentDidUpdate(prevState) then the variable prevState refers to the previous props, not the previous state. And so, to position them correctly, you need to include prevProps first (even if you will not use it):

componentDidUpdate(prevProps, prevState) {
  ...
}

For more information, see the React.Component documentation.

edited Mar 09 '23 at 13:02

ADTC

8,999
5
68
93

answered Nov 21 '18 at 23:30

Colin Ricardo

16,488
11
47
80

I have already? Check inside the componentDidUpdate() method in the Sandbox – a7dc Nov 21 '18 at 23:40
1

No, your sandbox has: `componentDidUpdate(prevState)`. Notice there's only one parameter instead of two :) – Colin Ricardo Nov 21 '18 at 23:41

Repeatedly calling setState inside componentWillUpdate or componentDidUpdate?

1 Answers1