## What is **useEffect** ?

**useEffect** is a built in React hook that lets you perform side effects in function components, such as fetching data, subscribing to events, or interacting with the DOM.Tasks that occur outside of React’s render cycle.

### **A side effect in React is anything that occurs outside the normal render cycle, such as:**
- Fetching or sending data over the network
- Setting timers or intervals
- Interacting with browser APIs 
- Subscribing or unsubscribing from events

### How **useEffect** behaves:
- **Mounting Phase:** runs once after first render. Cleanup does not run yet.
- **Updating Phase:** runs whenever a dependency changes. Cleanup from the previous effect runs first.
-  **Unmounting Phase:**  cleanup runs when the dependency changes or before the component is removed.

###  **useEffect**  Lifecycle:

```jsx
useEffect(() => {
  // Runs AFTER the component is rendered (painted)
  // Good for: fetching data, subscriptions, timers, DOM updates

  return () => {
    // Runs BEFORE:
    // Component is removed (unmount)
    //  Effect is re-run due to dependency change
    // Good for: clearing timers, unsubscribing, cancelling fetches
  };
}, [dependencies]);
```



### **Example that fetches articles, autosaves, and manages cleanup when components unmount.**

**The Component**

We have an **ArticleViewer** component that:
1. Fetches article data when articleId changes
2. Autosaves every 2 seconds
3. Cleans up timers when the component unmounts


```jsx
function ArticleViewer({ articleId, onUnmount, addLog }) {
  const [article, setArticle] = useState(null);
  const [loading, setLoading] = useState(true);
  const [autosaveCount, setAutosaveCount] = useState(0);

  // Fetch article when articleId changes
  useEffect(() => {
    setLoading(true);
    addLog(`🔄 Fetching article ${articleId}...`);

    const fetchArticle = async () => {
      await new Promise(res => setTimeout(res, 1000));
      setArticle({ id: articleId, title: `Article ${articleId}`, content: `This is the content of article ${articleId}.` });
      setLoading(false);
      addLog(`✅ Article ${articleId} loaded.`);
    };

    fetchArticle();
  }, [articleId, addLog]);

  // Autosave every 2s
  useEffect(() => {
    const interval = setInterval(() => {
      setAutosaveCount(c => c + 1);
      addLog(`💾 Autosaved article ${articleId}`);
    }, 2000);

    return () => {
      clearInterval(interval);
      setAutosaveCount(0);
      addLog(`🛑 Cleared autosave interval for article ${articleId}`);
    };
  }, [articleId, addLog]);

  // Cleanup on unmount
  useEffect(() => {
    return () => {
      addLog(`❌ Viewer component for article ${articleId} unmounted.`);
      if (onUnmount) onUnmount();
    };
  }, [articleId, addLog, onUnmount]);

  return (
    <Paper elevation={3} sx={{ padding: 4, mt: 4 }}>
      <Typography variant="h5" gutterBottom>Article Viewer</Typography>
      {loading ? (
        <Box display="flex" alignItems="center" gap={2}>
          <CircularProgress size={24} />
          <Typography>Loading article...</Typography>
        </Box>
      ) : (
        <Box>
          <Typography variant="h6">{article.title}</Typography>
          <Typography>{article.content}</Typography>
          <Typography variant="body2">Autosaved {autosaveCount} time{autosaveCount !== 1 ? 's' : ''}</Typography>
        </Box>
      )}
    </Paper>
  );
}

```



The **ExamplesUseEffect** component manages:

1. Changing article IDs
2. Mounting/unmounting the viewer
3. Logging activity

```jsx
function ExamplesUseEffect() {
  const [articleId, setArticleId] = useState(1);
  const [showViewer, setShowViewer] = useState(true);
  const [status, setStatus] = useState("🟢 Viewer is active.");
  const [log, setLog] = useState(["🚀 Viewer mounted."]);

  const handleUnmount = useCallback(() => setStatus("🔴 Viewer was unmounted."), []);
  const addLog = useCallback(entry => setLog(prev => [...prev, entry]), []);

  return (
    <Box sx={{ p: 4 }}>
      <Typography variant="h4" gutterBottom>useEffect Lifecycle Example</Typography>
      <Typography variant="body2" sx={{ mb: 2 }}>{status}</Typography>

      <Stack direction="row" spacing={2} sx={{ mb: 2 }}>
        <Button variant="contained" onClick={() => setArticleId(prev => prev + 1)} disabled={!showViewer}>
          Load Next Article
        </Button>
        <Button variant="contained" onClick={() => setLog([])}>Clear logs</Button>
        <Button variant="outlined" color="secondary" onClick={() => {
          if (showViewer) setShowViewer(false);
          else { setShowViewer(true); setStatus("🟢 Viewer is active."); addLog("🚀 Viewer remounted."); }
        }}>
          {showViewer ? "Unmount Viewer" : "Mount Viewer"}
        </Button>
      </Stack>

      {showViewer ? (
        <ArticleViewer articleId={articleId} onUnmount={handleUnmount} addLog={addLog} />
      ) : (
        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Viewer is not visible.</Typography>
      )}

      {/* Activity logs */}
      <Box mt={4}>
        <Typography variant="h6">📋 Activity Log:</Typography>
        <ul>
          {log.map((item, i) =>   (
          <li key={`${index}-${item}`}>
            <Typography variant="caption">
            {item}
            </Typography>
          </li>)}
        </ul>
      </Box>
    </Box>
  );
}

```


Managing SideEffects in React: useEffect hook

How useEffect hook manages side effects like component mounting, updating and unmounting. Helping you handle data fetching, subscriptions and cleanup

useEffect hook in react

Managing SideEffects in React: useEffect hook