javascript - How to detect rerenders in React JS correctly? - Stack Overflow

admin管理员组

文章数量:1305300

Let's say we have a parent ponent and multiple functional child ponents. I want to clearly know if the parent re-renders does the child re-renders or not.

After going through a few articles I came to know there are 3 ways we can detect rerenders. (Let me know if there are more ways.)

1. Put a console.log in the child ponent.

2. Use Chrome paint flashing option in the settings.

3. Use React dev tool

Do all these ways are correct to know if the ponent really rerenders? Because it doesn't seem to be work correctly with React.memo.

When I am wrapping the Child ponent with React.memo it does not print console.log, when the parent ponent rerenders which is correct. But still with chrome and react dev tools highlights the child ponent as if it rerendered.

CodeSandbox: (If we add a new car still the static ponent is highlighted in green, but as per Memo, it should not rerender.)

Now my doubt, Is paint flashing does not work correctly or React.memo having issues?

Let's say we have a parent ponent and multiple functional child ponents. I want to clearly know if the parent re-renders does the child re-renders or not.

After going through a few articles I came to know there are 3 ways we can detect rerenders. (Let me know if there are more ways.)

1. Put a console.log in the child ponent.

2. Use Chrome paint flashing option in the settings.

3. Use React dev tool

Do all these ways are correct to know if the ponent really rerenders? Because it doesn't seem to be work correctly with React.memo.

When I am wrapping the Child ponent with React.memo it does not print console.log, when the parent ponent rerenders which is correct. But still with chrome and react dev tools highlights the child ponent as if it rerendered.

CodeSandbox: https://codesandbox.io/s/bold-cloud-iv0rv (If we add a new car still the static ponent is highlighted in green, but as per Memo, it should not rerender.)

Now my doubt, Is paint flashing does not work correctly or React.memo having issues?

• javascript
• reactjs
• rerender
• virtual-dom
• react-devtools

Share Improve this question Follow edited Feb 25, 2020 at 5:51 Deepak Kumar Padhy asked Feb 25, 2020 at 5:45 Deepak Kumar PadhyDeepak Kumar Padhy 4,38866 gold badges5050 silver badges8282 bronze badges 3

• are you sure am able to see a log being printed in your sandbox console... – pavan kumar Commented Feb 25, 2020 at 5:51
• @pavankumar, For first render it will print for sure, but if the ponent wrapped with React.memo , it does not print console.log for subsequent renders when the Add button is clicked. – Deepak Kumar Padhy Commented Feb 25, 2020 at 5:53
• Related & helpful - Trace why a React ponent is re-rendering – vsync Commented Jul 10, 2022 at 14:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Reason

If you use React.memo, you need to use it from parent down to all the child till the end.

Since React.PureComponent share the same feature with React.memo, you can find those explanation in the document as below.

Furthermore, React.PureComponent’s shouldComponentUpdate() skips prop updates for the whole ponent subtree. Make sure all the children ponents are also “pure”.

Result

By changing parent ponent Cars to memo

// Before
export default Cars;
// After
export default React.memo(Cars);

You could find the react-dev-tools in chrome will only show the parent ponent re-rendered this time as well as no child console.log fired, which is correct. (Compare to previous, all the child also got highlighted)

Before

After

Conclusion

Both console.log and react-dev-tools worked well, you may just need to implement in a proper way following your demand.

本文标签： javascriptHow to detect rerenders in React JS correctlyStack Overflow