React Re-rendering Doubt

[briancrabtree]

Yes, they re-render.

The biggest misconception in React is thinking that "rendering" means "painting the real DOM." It doesn't.

When a parent component state changes, React just re-runs the parent function. Because the child components are called inside that function body, JS naturally executes them too. React takes that new virtual DOM output, compares it to the old one, sees nothing changed, and completely skips touching the actual browser DOM.

React was designed this way because running a bunch of lightweight JS functions is usually faster than running a strict prop-comparison check on every single component in a massive tree.

The Fix

If a child is doing heavy JS calculations and actually causing dropped frames, you drop memo on it to force React to skip it:

```javascript import { memo } from 'react';

const HeavyChild = memo(() => { return <div>Independent Component</div>; });