Cursor rule

1---
2description:
3globs:
4alwaysApply: false
5---
6 
7# React: Apply `useEffect` Dependency Best Practices
8 
9**Your task: When using `useEffect` in React components, ensure dependency arrays are correctly managed to prevent infinite loops and optimize performance.**
10 
11## Guiding Principle
12 
13To avoid infinite loops with `useEffect`, **DO NOT** include functions in the dependency array if they are redefined on every render. For effects that should only run on component mount and unmount, use an empty dependency array (`[]`).
14 
15If a function *must* be a dependency because its identity or behavior changes and should trigger the effect, **ALWAYS** memoize it using `useCallback`.
16 
17### Examples
18 
19**Incorrect (Potential Infinite Loop):**
20```tsx
21useEffect(() => {
22  fetchNotes();
23}, [fetchNotes]); // PROBLEM: fetchNotes is typically re-created every render, causing an infinite loop if not memoized.
24```
25 
26**Correct (Runs Only on Mount):**
27```tsx
28useEffect(() => {
29  fetchNotes();
30}, []); // INTENT: Effect runs once after initial render.
31```
32 
33**Correct (Function as a Memoized Dependency):**
34```tsx
35const fetchNotes = useCallback(() => { 
36  // ... logic for fetching notes ...
37}, []); // useCallback memoizes fetchNotes, its identity is stable unless its own dependencies change.
38 
39useEffect(() => {
40  fetchNotes();
41}, [fetchNotes]); // CORRECT: Effect re-runs only if fetchNotes (due to its own useCallback dependencies) changes.
42```
43 
44**REMEMBER: Always critically evaluate `useEffect` dependencies. Use an empty array `[]` for mount-only effects. If a function is a dependency, ensure it's stable by wrapping it in `useCallback`.**
45