React useEffect

useEffect lets you perform side effects - data fetching, timers, subscriptions.

Basic useEffect

Runs after every render:

```javascript import { useState, useEffect } from 'react';

function App() { const [count, setCount] = useState(0);

useEffect(() => { document.title = `Count: ${count}`; });

return <button onClick={() => setCount(count + 1)}>Click</button>; } ```

useEffect with Dependencies

Run only when specific values change:

```javascript useEffect(() => { document.title = `Count: ${count}`; }, [count]); // Only runs when count changes ```

Run Once (On Mount)

Empty dependency array:

```javascript useEffect(() => { console.log('Component mounted!'); }, []); // Runs only once ```

Cleanup Function

Clean up subscriptions/timers:

```javascript useEffect(() => { const timer = setInterval(() => { console.log('Tick'); }, 1000);

return () => clearInterval(timer); // Cleanup }, []); ```

Fetching Data

```javascript function UserProfile() { const [user, setUser] = useState(null);

useEffect(() => { fetch('https://api.example.com/user') .then(res => res.json()) .then(data => setUser(data)); }, []);

return <div>{user?.name}</div>; } ```

Common Patterns

**Multiple Effects:**

```javascript useEffect(() => { // Effect 1 }, [dep1]);

useEffect(() => { // Effect 2 }, [dep2]); ```

Remember

- Empty [] = runs once - No [] = runs every render - [count] = runs when count changes - Always cleanup subscriptions/timers

> Next: Learn custom hooks!