ArchCase

Design · Practice · Interview

Loading…

Heavy computation in the render body

Reactmid

Main had a simple EmployeeDirectory — just a list. A colleague sent a PR adding search, sort, and a stats section. It works, but the UI lags when you type quickly. Open the diff and find everything that runs on every render instead of useMemo.

PR: lesson.tsx +45 −04 проблем

1+import { useState } from 'react'

13 interface Employee {

24 id: string

35 name: string

46 email: string

57 department: string

68 joinedAt: string

79 }

810

911 interface Props {

1012 employees: Employee[]

1113 }

1214

1315 export function EmployeeDirectory({ employees }: Props) {

16+ const [search, setSearch] = useState('')

17+ const [sortBy, setSortBy] = useState<'name' | 'joinedAt'>('name')

18+

19+ const fuzzyMatch = (query: string, target: string): boolean => {

20+ const q = query.toLowerCase()

21+ const t = target.toLowerCase()

22+ let qi = 0

23+ for (let ti = 0; ti < t.length && qi < q.length; ti++) {

24+ if (t[ti] === q[qi]) qi++

25+ }

26+ return qi === q.length

27+ }

28+

29+ const filtered = employees.filter((e) => fuzzyMatch(search, e.name + ' ' + e.email))

30+ const sorted = [...filtered].sort((a, b) => {

31+ if (sortBy === 'name') return a.name.localeCompare(b.name)

32+ return new Date(a.joinedAt).getTime() - new Date(b.joinedAt).getTime()

33+ })

34+

35+ const stats = {

36+ total: employees.length,

37+ departments: [...new Set(employees.map((e) => e.department))].length,

38+ avgTenure:

39+ employees.reduce(

40+ (sum, e) =>

41+ sum + (Date.now() - new Date(e.joinedAt).getTime()),

42+ 0,

43+ ) /

44+ employees.length /

45+ (1000 * 60 * 60 * 24 * 365),

46+ }

47+

1448 return (

15- <ul>

16- {employees.map((e) => (

17- <li key={e.id}>

18- {e.name} — {e.department}

19- </li>

20- ))}

21- </ul>

49+ <div>

50+ <input

51+ value={search}

52+ onChange={(e) => setSearch(e.target.value)}

53+ placeholder="Search..."

54+ />

55+ <p>

56+ Total: {stats.total} / Departments: {stats.departments} / Avg tenure:{' '}

57+ {stats.avgTenure.toFixed(1)} years

58+ </p>

59+ <ul>

60+ {sorted.map((e) => (

61+ <li key={e.id}>

62+ {e.name} — {e.department}

63+ </li>

64+ ))}

65+ </ul>

66+ </div>

2267 )

2368 }

Шаг 1 из 6

How to find heavy operations

React renders a component **every time** state or props change. Which means everything you write directly in the function body runs every time. Look for: 1. Loops over large arrays (`filter`, `map`, `reduce`). 2. Sorts. 3. `new Date()`, date parsing. 4. `new Set()`, `new Map()`, building heavy structures. 5. Functions with O(N×M) or worse. Look at the code and mark every such spot.