Cursor rule

1---
2alwaysApply: false
3---
4 
5## Split Combined Hook Computations
6 
7When a hook contains multiple independent tasks with different dependencies, split them into separate hooks. A combined hook reruns all tasks when any dependency changes, even if some tasks don't use the changed value.
8 
9**Incorrect (changing `sortOrder` recomputes filtering):**
10 
11```tsx
12const sortedProducts = useMemo(() => {
13  const filtered = products.filter((p) => p.category === category)
14  const sorted = filtered.toSorted((a, b) =>
15    sortOrder === "asc" ? a.price - b.price : b.price - a.price
16  )
17  return sorted
18}, [products, category, sortOrder])
19```
20 
21**Correct (filtering only recomputes when products or category change):**
22 
23```tsx
24const filteredProducts = useMemo(
25  () => products.filter((p) => p.category === category),
26  [products, category]
27)
28 
29const sortedProducts = useMemo(
30  () =>
31    filteredProducts.toSorted((a, b) =>
32      sortOrder === "asc" ? a.price - b.price : b.price - a.price
33    ),
34  [filteredProducts, sortOrder]
35)
36```
37 
38This pattern also applies to `useEffect` when combining unrelated side effects:
39 
40**Incorrect (both effects run when either dependency changes):**
41 
42```tsx
43useEffect(() => {
44  analytics.trackPageView(pathname)
45  document.title = `${pageTitle} | My App`
46}, [pathname, pageTitle])
47```
48 
49**Correct (effects run independently):**
50 
51```tsx
52useEffect(() => {
53  analytics.trackPageView(pathname)
54}, [pathname])
55 
56useEffect(() => {
57  document.title = `${pageTitle} | My App`
58}, [pageTitle])
59```
60 
61**Note:** If your project has [React Compiler](https://react.dev/learn/react-compiler) enabled, it automatically optimizes dependency tracking and may handle some of these cases for you.
62