1---
2title: Split Combined Hook Computations
3impact: MEDIUM
4impactDescription: avoids recomputing independent steps
5tags: rerender, useMemo, useEffect, dependencies, optimization
6---
7 
8## Split Combined Hook Computations
9 
10When 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.
11 
12**Incorrect (changing `sortOrder` recomputes filtering):**
13 
14```tsx
15const sortedProducts = useMemo(() => {
16  const filtered = products.filter((p) => p.category === category)
17  const sorted = filtered.toSorted((a, b) =>
18    sortOrder === "asc" ? a.price - b.price : b.price - a.price
19  )
20  return sorted
21}, [products, category, sortOrder])
22```
23 
24**Correct (filtering only recomputes when products or category change):**
25 
26```tsx
27const filteredProducts = useMemo(
28  () => products.filter((p) => p.category === category),
29  [products, category]
30)
31 
32const sortedProducts = useMemo(
33  () =>
34    filteredProducts.toSorted((a, b) =>
35      sortOrder === "asc" ? a.price - b.price : b.price - a.price
36    ),
37  [filteredProducts, sortOrder]
38)
39```
40 
41This pattern also applies to `useEffect` when combining unrelated side effects:
42 
43**Incorrect (both effects run when either dependency changes):**
44 
45```tsx
46useEffect(() => {
47  analytics.trackPageView(pathname)
48  document.title = `${pageTitle} | My App`
49}, [pathname, pageTitle])
50```
51 
52**Correct (effects run independently):**
53 
54```tsx
55useEffect(() => {
56  analytics.trackPageView(pathname)
57}, [pathname])
58 
59useEffect(() => {
60  document.title = `${pageTitle} | My App`
61}, [pageTitle])
62```
63 
64**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.
65