ArchCase

Design · Practice · Interview

Loading…

Cargo-cult useMemo and useCallback

Reactmid

Main had a simple PriceSummary with no memoization. A colleague read an article about React optimization and sent a PR that "optimizes" the component: useMemo/useCallback on every line. Walk the diff and explain where memoization is justified and where it's cargo cult.

PR: lesson.tsx +25 −05 проблем

1-import { useState } from 'react'

1+import { useState, useMemo, useCallback } from 'react'

33 interface Props {

44 items: { id: string; price: number; category: string }[]

55 category: string

66 }

88 export function PriceSummary({ items, category }: Props) {

99 const [multiplier, setMultiplier] = useState(1)

1010

11- const filteredItems = items.filter((i) => i.category === category)

12- const total = filteredItems.reduce((sum, i) => sum + i.price, 0)

13- const finalTotal = total * multiplier

11+ const filteredItems = useMemo(

12+ () => items.filter((i) => i.category === category),

13+ [items, category],

14+ )

1415

16+ const total = useMemo(

17+ () => filteredItems.reduce((sum, i) => sum + i.price, 0),

18+ [filteredItems],

19+ )

20+

21+ const formattedTotal = useMemo(

22+ () => `$${total.toFixed(2)}`,

23+ [total],

24+ )

25+

26+ const label = useMemo(() => `Total: ${formattedTotal}`, [formattedTotal])

27+

28+ const handleReset = useCallback(() => setMultiplier(1), [])

29+

30+ const handleDouble = useCallback(

31+ () => setMultiplier(multiplier * 2),

32+ [multiplier],

33+ )

34+

35+ const finalTotal = useMemo(

36+ () => total * multiplier,

37+ [total, multiplier],

38+ )

39+

1540 return (

1641 <div>

17- <p>Total: ${total.toFixed(2)}</p>

42+ <p>{label}</p>

1843 <p>With multiplier: ${finalTotal.toFixed(2)}</p>

19- <button onClick={() => setMultiplier(1)}>Reset</button>

20- <button onClick={() => setMultiplier(multiplier * 2)}>Double</button>

44+ <button onClick={handleReset}>Reset</button>

45+ <button onClick={handleDouble}>Double</button>

2146 </div>

2247 )

2348 }

Шаг 1 из 7

When are useMemo/useCallback needed?

`useMemo` and `useCallback` are **micro-optimization** tools, not defaults. Rules: **useMemo is justified** when: 1. The calculation is genuinely expensive (>1ms): filtering/sorting a big array, parsing, heavy math. 2. The result is used in another hook's deps (otherwise the effect would fire unnecessarily). **useCallback is justified** when: 1. The callback is passed to a `React.memo` component. 2. The callback is used in an effect's deps. Everywhere else they **hurt**: more overhead than benefit, harder-to-read code. Walk the code and mark where memoization is useless.