Replymessage unavailable
> { console.log("Component mounted"); }, []); The empty dependency array means:
"Run this effect only after the first render." Component Lifecycle Stages A React component generally has three stages: Mounting
|
↓
Updating
|
↓
Unmounting 1. Mounting The component is created and added to the DOM.
Example:
Opening a dashboard page: Dashboard Component Created
|
↓
API Call
|
↓
Display Data Common use cases:
* Fetch initial data
* Subscribe to services
* Initialize values
Example: useEffect(() => { fetchUsers(); }, []); 2. Updating A component updates when:
* State changes
* Props change
* Context changes
Example: setCount(count + 1); Flow: State Change
|
↓
Render
|
↓
DOM Update 3. Unmounting A component is removed from the DOM.
Example:
User navigates away from a page.
Common cleanup tasks:
* Remove event listeners
* Cancel subscriptions
* Clear timers
* Close WebSocket connections
Example: useEffect(() => { const timer = setInterval(() => { console.log("Running"); }, 1000); return () => { clearInterval(timer); }; }, []); Does Every Render Update the DOM? No.
This is a common misunderstanding.
Example: function Counter() { const [count,setCount] = useState(0); return ( h1>{count}h1> ); } When state changes: State Update
|
↓
React Render
|
↓
Compare Virtual DOM
|
↓
Update Only Changed DOM React avoids unnecessary DOM operations. Understanding Re-render vs Refresh These are different concepts. Browser Refresh Entire application reloads. Browser
|
↓
Download JS
|
↓
Start React App Again React Re-render Only React components execute again. State Change
|
↓
Component Function Executes
|
↓
React Updates UI The browser page does not reload. Common Rendering Mistakes Changing State During Rendering Incorrect: function App(){ setCount(1); return h1>Helloh1>; } This creates an infinite rendering loop. Creating Unnecessary State Avoid: const [fullName,setFullName] = useState(""); when it can be calculated: const fullName = firstName + lastName; Large Components Large components create more expensive renders.
Prefer: Small Components
+
Composition
=
Better Performance Real-World Example: Banking Application Imagine a transaction dashboard.
User completes a payment: Payment Completed
|
↓
Update Transaction State
|
↓
Transaction Component Re-renders
|
↓
React Calculates Changes
|
↓
Only Transaction List Updates The entire application does not reload.
This is why React applications feel fast and responsive. Key Takeaways Today, we learned:
✅ Rendering is React's process of creating and updating UI.
✅ State, props, and context changes trigger renders.
✅ Rendering does not always mean DOM updates.
✅ React uses reconciliation to efficiently update the DOM.
✅ Functional components use Hooks for lifecycle behavior.
✅ Understanding rendering is essential for React performance optimization. Coming Next 🚀 In Day 9, we will learn: Event Handling in React – Making Applications Interactive We will cover:
* Handling click events
* Passing arguments to events
* Synthetic events
* Forms and controlled components
* Preventing default behavior
* Event propagation
* Real-world examples
By mastering events, you will learn how React applications respond to user actions.
Happy Coding! 🚀