## Rules for When to Use `useEffect` in React

**Purpose:**  
Guide coding agents to use `useEffect` only when appropriate, avoiding common pitfalls and misuse.

---

**Rule: Use `useEffect` only for true side effects—operations that must happen outside the normal React render flow and cannot be handled by rendering logic, event handlers, or derived state.**

---

### When to Use `useEffect`

Use `useEffect` if your code needs to:

- **Interact with external systems or APIs:**  
  - Fetching data from a server  
  - Subscribing to WebSocket or event listeners  
  - Setting up timers or intervals  
  - Manually manipulating the DOM (rare, but sometimes necessary)[4][7]

- **Synchronize with systems outside React:**  
  - Updating browser title or URL  
  - Managing focus or scroll position  
  - Integrating with third-party libraries that require manual setup/teardown[1][4]

- **Clean up resources:**  
  - Remove event listeners  
  - Cancel network requests  
  - Clear timers or intervals when the component unmounts or dependencies change[4][2]

---

### When Not to Use `useEffect`

Do **not** use `useEffect` for:

- **Deriving state from props or other state:**  
  - If you can compute a value directly in render (e.g., filtering a list based on search input), do it inline or with a memoized value, not in an effect[5][6].
- **Handling user events:**  
  - Use event handlers (e.g., `onClick`, `onSubmit`) directly, not effects triggered by state changes[1][6].
- **Synchronizing state changes:**  
  - Prefer derived/computed state or useMemo for calculations based on other state[3][5].
- **Triggering effects that could be handled by React’s rendering:**  
  - If you’re only updating UI in response to state/props, let React handle it[6].

---

### Best Practices

- **Always provide a correct dependency array:**  
  - List all reactive values used inside the effect[3][6].
- **Split effects by concern:**  
  - Use multiple `useEffect` hooks for unrelated side effects[4][6].
- **Use cleanup functions:**  
  - Clean up subscriptions, timers, or listeners to avoid memory leaks[4][2].
- **Avoid unnecessary state:**  
  - Don’t store derived data in state just to trigger effects—compute it during render if possible[5][6].

---

### Quick Decision Table

| Situation                                   | Use `useEffect`? | Alternative                |
|----------------------------------------------|:----------------:|---------------------------|
| Fetching data from API on mount              |       Yes        | —                         |
| Setting up event listeners                   |       Yes        | —                         |
| Filtering a list based on search input       |       No         | Compute in render         |
| Handling form submission                     |       No         | Use event handler         |
| Updating document title                      |       Yes        | —                         |
| Synchronizing two pieces of state            |       No         | Derived/computed state    |

---

### Summary

> Use `useEffect` only for side effects that cannot be achieved by rendering logic, event handlers, or derived state. If you’re tempted to use `useEffect` for something that can be handled during render, reconsider your approach[3][5][6].

By following this rule, you’ll write cleaner, more predictable React code and avoid the common pitfalls associated with unnecessary or misused effects.

Sources
[1] A complete guide to the useEffect React Hook - LogRocket Blog https://blog.logrocket.com/useeffect-react-hook-complete-guide/
[2] Rules of React's useEffect - CoderPad https://coderpad.io/blog/development/rules-of-reacts-useeffect/
[3] Mastering useEffect: Rules, Best Practices, and Pitfalls https://dev.to/cybermaxi7/mastering-useeffect-rules-best-practices-and-pitfalls-353e
[4] ReactJS useEffect Hook - GeeksforGeeks https://www.geeksforgeeks.org/reactjs-useeffect-hook/
[5] Best Practices for useState and useEffect in React - DEV Community https://dev.to/wdp/best-practices-for-usestate-and-useeffect-in-react-4aea
[6] The ultimate guide to using the useEffect hook in React - Zipy.ai https://www.zipy.ai/blog/useeffect-hook-guide
[7] Using the Effect Hook - React https://legacy.reactjs.org/docs/hooks-effect.html
[8] useEffect - React https://react.dev/reference/react/useEffect
[9] UseEffect Best Practices : r/reactjs - Reddit https://www.reddit.com/r/reactjs/comments/18l98mh/useeffect_best_practices/
[10] A Deep Dive into `useEffect`: Best Practices for React Developers https://dev.to/hkp22/a-deep-dive-into-useeffect-best-practices-for-react-developers-3b93
[11] Understanding React hook useEffect & best practice - Stack Overflow https://stackoverflow.com/questions/66267135/understanding-react-hook-useeffect-best-practice
[12] Understanding useEffect() : r/react - Reddit https://www.reddit.com/r/react/comments/tivs7z/understanding_useeffect/
[13] You Might Not Need an Effect - React https://react.dev/learn/you-might-not-need-an-effect
[14] Rules of Hooks - React https://legacy.reactjs.org/docs/hooks-rules.html
[15] Clean Code Hack: A Short Guide to useEffect Usage in React https://itnext.io/clean-code-hack-a-short-guide-to-useeffect-usage-in-react-a0a75d189fdc
[16] What is the good practice to use React.JS useEffect hook for multiple ... https://stackoverflow.com/questions/68713509/what-is-the-good-practice-to-use-react-js-useeffect-hook-for-multiple-states
[17] When to use useEffect? - reactjs - Stack Overflow https://stackoverflow.com/questions/57003084/when-to-use-useeffect
[18] React useEffect() - A complete guide - Hygraph https://hygraph.com/blog/react-useeffect-a-complete-guide
[19] React useEffect: A complete guide with examples - DeadSimpleChat https://deadsimplechat.com/blog/react-useeffect-a-complete-guide-with-examples/
[20] React useEffect Hooks - W3Schools https://www.w3schools.com/react/react_useeffect.asp