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.

更新流程

• 标记更新 (哪些组件需要更新)
• 调度更新: 哪些先做，哪些后做
• Render Phase: 执行组件函数，生成 virtual dom
• Commit phase: 把变化反映到真实 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.