0

I have a very big application with higher order components everywhere. I am in a situation where one of my controls gets the right props and renders right, and then immediately gets wrong props and rerenders again. I cannot figure out what triggers the second rerender. It's not because of a new round of props at that a parent component got, but more like some of the higher order components calls setState

anyway so I have my debugger at a break point inside the render method, how can I know what triggered it on a higher level?

the stack doesn't help much, all i see is the internal React calls:

render (value-picker.tsx:218)
finishClassComponent (react-dom.js:8415)
updateClassComponent (react-dom.js:8392)
beginWork (react-dom.js:8767)
performUnitOfWork (react-dom.js:10766)
workLoop (react-dom.js:10830)
callCallback (react-dom.js:580)
invokeGuardedCallbackDev (react-dom.js:619)
invokeGuardedCallback (react-dom.js:476)
renderRoot (react-dom.js:10908)
performWorkOnRoot (react-dom.js:11556)
performWork (react-dom.js:11509)
batchedUpdates (react-dom.js:11628)
batchedUpdates (react-dom.js:2504)
dispatchEvent (react-dom.js:3668)
Trident D'Gao
  • 18,973
  • 19
  • 95
  • 159
  • Why is that important? Rendering is mostly asynchronous. Multiple state changes + prop changes could trigger the same render. You should track the prop change, not the render. – Sulthan Feb 01 '19 at 22:15
  • because i need to find the source of second unwanted renrender and get rid of it, it's increasingly difficult to track the props flow with higher order components that are allowed to use setState upon their discretion – Trident D'Gao Feb 01 '19 at 22:16
  • As I said, you cannot. Track the changes in props/state. You can even log them to console. – Sulthan Feb 01 '19 at 22:18
  • this is exactly what i am trying to do without much luck, hence the question – Trident D'Gao Feb 01 '19 at 22:22
  • If you can detect the situation in render, cannot you detect the situation in `UNSAFE_componentWillReceiveProps()`? – Sulthan Feb 01 '19 at 22:25
  • Here's a very similar [question](https://stackoverflow.com/questions/41004631/trace-why-a-react-component-is-re-rendering) with some nice answers. – abadalyan Feb 01 '19 at 22:37
  • `componentWillReceiveProps` yields similar stack trace consisting only of react calls – Trident D'Gao Feb 01 '19 at 23:08
  • @AlekseyBykov is your component pure? If so it should only be changing when it's props change, so clearly then the parent's `setState` is causing the props passed into the child to change. Can you please show us the parent component code? – Matthew Herbst Feb 01 '19 at 23:32

0 Answers0