Trace which change of props or state trigger `componentDidUpdate`

Question

. 。 Answers to this question are eligible for a +200 reputation bounty. SoftTimur wants to to this question. 这个问题。

I'm making a webpage with react-monaco-editor. I realized that after loading the first page, componentDidUpdate is triggered many times, which does not look normal.

I tried to add logs in componentDidUpdate :

  componentDidUpdate(prevProps, prevState) {
    console.log("debugha, componentDidUpdate")
    for (var key in prevProps) {
      if (prevProps.hasOwnProperty(key)) {
          if (prevProps[key] !== this.props[key]) {
            console.log("debugha, componentDidUpdate, key", key, "prevProps[key]", prevProps[key]);
            console.log("debugha, componentDidUpdate, key", key, "this.props[key]", this.props[key])
          }
      }
    }

    for (var key in prevState) {
      if (prevState.hasOwnProperty(key)) {
          if (prevState[key] !== this.state[key]) {
            console.log("debugha, componentDidUpdate, key", key, "prevState[key]", prevState[key]);
            console.log("debugha, componentDidUpdate, key", key, "this.state[key]", this.state[key])
          }
      }
    }
   ... ...
   ... ...

Then, it prints the following logs. However, I don't see the difference of props or state.

Then, I tried to add logs as follows:

  componentDidUpdate(prevProps, prevState) {
    console.log("debugha, componentDidUpdate")
    for (var key in prevProps) {
      if (prevProps.hasOwnProperty(key)) {
        if (prevProps[key] !== this.props[key]) {
            console.log("debugha, componentDidUpdate, key", key, "prevProps[key]", prevProps[key]);
            console.log("debugha, componentDidUpdate, key", key, "this.props[key]", this.props[key])
          }
      }
    }

    for (var key in prevState) {
      if (prevState.hasOwnProperty(key)) {
        if (prevState[key] !== undefined && this.state[key] !== undefined && prevState[key].toString !== this.state[key].toString) {
            console.log("debugha, componentDidUpdate, key", key, "prevState[key]", prevState[key]);
            console.log("debugha, componentDidUpdate, key", key, "this.state[key]", this.state[key])
          }
      }
    }

Then, it prints the following logs. It shows that the toString of props or state does not change.

So could anyone tell me how I could trace which props or state trigger componentDidUpdate ?

Answer 1

This is probably not your answer, more of a comment to your question but I lack the StackOverflow reputation to comment on questions...

I just want to note that it does not say anything about the value that the comparison of the toString methods returns false as they are inherited from the same prototype. Look at the example:

"foo".toString === "bar".toString

It returns true even though the values are different. The comparison only fails if you compare values of different types (number, string, boolean, ...) like in the following:

"foo".toString === (5).toString

Even if that is not an answer I hope that it still helps you on your debugging process.

Answer 2

If you are looking for tools and techniques for troubleshooting, I would suggest react dev tools extension - it produces something similar to what your console log statements are looking to do. There is a using react dev tools for rerender tutorial that provides an overview.

If you are looking for guesses on why the rerenders happen in my experience it is often mutability that creates spurious rerenders . The clearest explanation is in this comment on performance, basically that {a:1} === {a:1} returns false because they are two different objects in contrast to 1===1 which returns true.

Answer 3

prevState[key].toString !== this.state[key].toString

This tells that you're comparing with function signature and thus you cannot detect the change. You need to call it to get the changes:

prevState[key].toString() !== this.state[key].toString()