React useMemo 사용하기

// a, b가 바뀔때만 리렌더링
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b])

• 메모이제이션된 값을 재사용
• 의존성 값 [a, b] 가 변경 되었을때 재계산하여 렌더링 시 고비용 계산을 방지
• 배열이 없을 경우 렌더링 때마다 새 값 계산

메모이제이션(memoization)

컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

useMemo example

import React, { useMemo } from "react"

const users = [
  { id: "a", name: "Robin" },
  { id: "b", name: "Dennis" },
]

const App = () => {
  const [text, setText] = useState("")
  const [search, setSearch] = useState("")

  // 검색어 입력시
  const handleText = event => {
    setText(event.target.value)
  }

  // 검색버튼 클릭
  const handleSearch = () => {
    setSearch(text)
  }

  // 검색어와 일치한 유저 필터링
  const filteredUsers = users.filter(user => {
    return user.name.toLowerCase().includes(search.toLowerCase())
  })

  return (
    <div>
      <input type="text" value={text} onChange={handleText} />
      <button type="button" onClick={handleSearch}>
        Search
      </button>

      <List list={filteredUsers} />
    </div>
  )
}

const List = ({ list }) => {
  return (
    <ul>
      {list.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  )
}

const ListItem = ({ item }) => {
  return <li>{item.name}</li>
}

export default App

before

const filteredUsers = users.filter(user => {
  console.log("Filter function is running ...")
  return user.name.toLowerCase().includes(search.toLowerCase())
})

after refactor useMemo

const filteredUsers = useMemo(
  () =>
    users.filter(user => {
      console.log("Filter function is running ...")
      return user.name.toLowerCase().includes(search.toLowerCase())
    }),
  [search]
)

const List = useMemo(
  () =>
    listOfItems.map(item => ({
      ...item,
      itemProp1: expensiveFunction(props.first),
      itemProp2: anotherPriceyFunction(props.second),
    })),
  [listOfItems]
)