Trace which change of props or state trigger `componentDidUpdate`

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?

did you try and get the same result within a functional component as well? — Erhan Yaşar, Jan 20 '23 at 09:03
I did not convert these (complex) class components to functional components. — SoftTimur, Jan 20 '23 at 20:58

score 2 · Answer 1 · answered Jan 19 '23 at 08:29

2

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()

answered Jan 19 '23 at 08:29

Bhojendra Rauniyar

83,432
35
168
231

score 0 · Answer 2 · answered Jan 14 '23 at 21:13

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.

Trace which change of props or state trigger `componentDidUpdate`

2 Answers2