1

There is a component in our app whose constructor is being called an insane number of times. When the page I'm looking at renders on the screen, it appears (from breakpoints and stack traces) that every time the component's parent renders (as a result of various state updates and redux updates in the parent's componentDidMount) this component doesn't simply rerender, but its constructor is called.

Also, later when I click on that component to open an associated modal, the constructor is called again (which resets the modal show-state). In this instance the constructor is actually called twice, and the second stack trace shows this coming from some redux update, but in the trace for the first call, it's react code all the way down (nothing in my app code).

The craziest thing is that this didn't appear to happen before, and I found the bad commit, and I can't find anything that might have any effect on this.

Oh, and crazier than that, is that another place where I use this component, a new place (a new parent for the component), works fine: a single constructor call to the child, once ever.

So I guess the problem is in the parent component, and it appears to happen when that component rerenders. But, again, this wasn't a problem a few commits ago.

Obviously you'll want to see some code, but there's so damn much of it in that stupid legacy parent, that I wouldn't really know where to start.

Oh, and I checked the React devtools: the child component in question is definitely only appearing one time in the tree.

Updates:

  • The parent is only constructed once.
  • I've learned that one reason a component may be reconstructed is if it's rendered conditional and the condition changes: {show && <Component/>} will construct Component when show changes from false to true. There is a conditional wrapping my child, however it never changes.
  • Other children of the parent don't appear to be reconstructed.
  • The child in question is constructed once, and then after maybe 10 seconds, it's constructed another 10 times basically at once. I imagine these are, as originally mentioned, when the parent is updating state after some fetching. So this maybe doesn't change the question: why is this child constructed every time the parent is rerendered?
Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
  • is only this child component affected or is it the only direct child? If not how is the child component different? is it pulling props or maintaining an internal state? – Snake_py Nov 12 '21 at 22:52
  • Thanks @Snake_py. See updates to the post. – Jonathan Tuzman Nov 13 '21 at 17:14
  • really nothing can be said without code, but each child can be influenced by their parent, check props and states – MaK Nov 13 '21 at 17:30
  • You can also check this answer out. https://stackoverflow.com/a/40820657/12340367 – Snake_py Nov 13 '21 at 17:50
  • Thanks @Snake_py but that answer doesn't deal with the constructor. Children re-rendering makes complete sense, but not reconstructing. – Jonathan Tuzman Nov 13 '21 at 20:46
  • @MaK is right though, I guess you would get more help if you could reconstruct/show the error with minimal code. – Snake_py Nov 13 '21 at 21:58
  • I understand. The code is just so far from minimal that it's basically impossible to tell. I will, note, though, that it worked before a recent commit even though there's nothing in that commit that should have changed it! – Jonathan Tuzman Nov 13 '21 at 22:06
  • Maybe you are using a `key` prop in your component like in [this](https://stackoverflow.com/a/21750576/14207720) answer? – Andrey Nov 14 '21 at 13:26

0 Answers0