I am new to React. I noticed that when components in my application render, line simple two dropdowns, even, in this case, breakpoint hits 15-16 times because of the re-rendering. I need to know where should I place my breakpoint or what should I log to console.log each time, so that I'll come to know why the component is rendered, like can I log a particular attribute or state variable?

CodePudding user response：

Yeah, debugging React apps using breakpoints can be a pain because of all the under the hood React work you may have to step through. Yes, console.log can be super useful, and you should check out React Devtools as well.

CodePudding user response：

Put console.log as the first line of the render function starting with a few of the highest level components. They probably don't rerender much.

Work your way down the tree until you find the culprit.

Many times the effect is multiplicative. One component rerenders 5 times and one of it's children rerenders 3 times per parent render will mean 15 rerenders for everything south of that child.