How To Detect Rerenders In React JS Correctly?

Let's say we have a parent component and multiple functional child components. I want to clearly know if the parent re-renders does the child re-renders or not. After going throug

Solution 1:

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 component subtree. Make sure all the children components are also “pure”.

Result

By changing parent component 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 component 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.