Welcome back to the React Mastery Series!
In the previous article, we explored Forms in React and learned how controlled components help React manage user input.
Today, we will dive into one of the most important and widely used React Hooks: useEffect Hook is a fundamental Hook used in almost every real-world React application.
It helps us perform side effects such as: Fetching data from APIs Updating browser titles Subscribing to events Setting timers Connecting to WebSockets Cleaning up resources Understanding is essential for building production-ready React applications.
What Are Side Effects?
Before understanding , we need to understand what a side effect is.
A side effect is any operation that happens outside the normal component rendering process.
Examples: API Calls Browser Interaction Examples: Changing document title Accessing local storage Manipulating browser APIs Subscriptions Examples: WebSocket connections Event listeners Timers Why Do We Need useEffect?
React components should ideally be pure functions.
Example: The component receives data and returns UI.
However, real applications need external interactions.
Example: React provides to handle these operations safely.
Basic Syntax of useEffect The Hook accepts two parameters: First Parameter: Effect Function This contains the code that should execute.
Example: Second Parameter: Dependency Array The dependency array controls when the effect runs.
Example: The empty array means: Run this effect only after the initial render.
Understanding useEffect Execution Consider: Execution flow: Important: runs after the component renders. useEffect Without Dependency Array Example: Execution: This happens after every render.
Use carefully. useEffect With Empty Dependency Array Example: Execution: Common use cases: Initial API calls Loading configuration Setting up subscriptions useEffect With Dependencies Example: Now the effect runs when: Example: Flow: Real-World Example: Fetching API Data A common React pattern: Flow: Cleanup Function in useEffect Some effects need cleanup.
Examples: Removing event listeners Clearing timers Closing WebSocket connections Example: The function returned from is called Cleanup Function Component Lifecycle Using useEffect In class components: In functional components: handles all lifecycle behavior.
Mounting Equivalent to: Example: Runs once when component appears.
Updating Equivalent to: Example: Runs whenever changes.
Unmounting Equivalent to: Example: Runs when component is removed.
Real-World Example: WebSocket Connection Imagine a live banking notification system.
Component loads: When user leaves: Implementation: Dependency Array Mistakes Mistake 1: Missing Dependencies Example: Problem: is used but not included.
Correct: Mistake 2: Infinite Loops Example: Flow: useEffect vs Event Handlers A common confusion: Should something happen inside: useEffect?
Button click handler?
Example: User clicks save button: This belongs in an event handler.
Automatic behavior: This belongs in: useEffect Best Practices Keep Effects Focused Avoid: Better: Avoid Unnecessary Effects Do not use effects for simple calculations.
Avoid: Instead: Always Cleanup Resources Cleanup: Timers Subscriptions Event listeners Connections Enterprise Example: Banking Dashboard Consider a retail banking application.
When the dashboard opens: When leaving: This pattern is used in production React applications.
Key Takeaways Today, we learned: ✅ handles side effects in React. ✅ Effects run after rendering. ✅ Dependency arrays control execution timing. ✅ Empty dependency arrays run effects once. ✅ Cleanup functions prevent memory leaks. ✅ API calls, subscriptions, and timers commonly use .
Coming Next 🚀 In Day 14, we will explore: React Hooks Deep Dive – useRef and useMemo We will learn: What useRef is Accessing DOM elements Persisting values without re-rendering useMemo for performance optimization Expensive calculations Real-world optimization examples These Hooks are essential