What Happens on Re-render

When a component re-renders, the entire function runs again:

• Variable declarations
• Function definitions
• console.log() calls
• Calculations
• useState values are preserved (React retains state across renders)
• React updates only the changed parts via virtual DOM diffing; it does not replace the entire DOM.

Common Misconceptions

Re-render does not mean remount

• Re-render re-executes the function, but does not unmount or reset hooks.
• useEffect(() => { ... }, []) runs only once, even after many re-renders.

Re-render is not direct DOM manipulation

• React compares the new JSX (virtual DOM) to the previous one.
• Only the differences are applied to the real DOM.
• You do not manually touch the DOM during re-renders.

Re-render Triggers

• state changes
• props changes
• Parent re-renders → child re-renders by default (even if props stay the same)