How does the useEffect hook work in React? What is the purpose of the dependency array, and what happens when you pass an empty array versus no array at all?

Question

Accepted Answer

## Understanding useEffect The `useEffect` hook lets you perform side effects in functional components. It combines the functionality of `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` from class components into a single API. ## Basic Syntax ```javascript useEffect(() => { // Side effect code here return () => { // Cleanup function (optional) }; }, [dependencies]); ``` ## The Dependency Array The second argument controls when the effect runs: ### 1. No Array — Runs After Every Render ```javascript useEffect(() => { console.log('This runs after every render.'); }); ``` This is rarely what you want, as it can cause performance issues and infinite loops. ### 2. Empty Array — Runs Once on Mount ```javascript useEffect(() => { console.log('This runs only once when the component mounts.'); return () => { console.log('This runs when the component unmounts.'); }; }, []); ``` Equivalent to `componentDidMount` and `componentWillUnmount`. ### 3. With Dependencies — Runs When Dependencies Change ```javascript useEffect(() => { console.log(`User ID changed to: ${userId}`); fetchUserData(userId); }, [userId]); ``` The effect runs on mount and whenever `userId` changes. ## Practical Example: Fetching Data ```javascript function UserProfile({ userId }) { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { let isMounted = true; // Prevent state updates on unmounted component async function fetchUser() { setLoading(true); const response = await fetch(`/api/users/${userId}`); const data = await response.json(); if (isMounted) { setUser(data); setLoading(false); } } fetchUser(); return () => { isMounted = false; // Cleanup }; }, [userId]); if (loading) return

Loading...

; return

{user.name}

; } ``` ## Key Points - **Cleanup function**: Return a function to clean up subscriptions, timers, or event listeners. - **Dependencies must be exhaustive**: Include all values from the component scope that the effect uses. - **Avoid objects and arrays as dependencies**: They create new references on each render. Use specific properties instead.