리액트 컴파일러의 위력

2025년에 react compiler 가 정식 버전으로 나오면서 useCallback, useMemo를 사람이 굳이 입력할 필요가 없어졌습니다. 문서에는 “그래도 수동으로 사용하는 게 바람직한 경우가 있다” 라고 말하지만, 지금까지 널리 사용된 용례는 더이상 필요없어졌습니다. 대표적인 예제는 다음과 같습니다.

// before 
export function CounterProvider({children}: {children:React.ReactNode}) {
  const [count, setCount] = useState(0)

  const increment = useCallback(()=>setCount(prev=>prev+1), [])
  const value = useMemo(()=>({count, increment}), [count, increment])

  return (
    <CounterContext.Provider value={value}>
      {children}
    </CounterContext.Provider>
  )
}

과거에는 함수마다 useCallback으로 다음 렌더링 시에 바뀌지 않도록 하고,

useMemo로 object 도 구성 요소 변화가 없으면 기존 object를 사용하도록 해야 했습니다.

// after
export function CounterProvider({children}: {children:React.ReactNode}) {
  const [count, setCount] = useState(0)

  const increment = ()=>setCount(prev=>prev+1)

  return (
    <CounterContext.Provider value={{count, increment}}>
      {children}
    </CounterContext.Provider>
  )
}

이제 그럴 필요가 없습니다.

변수와 함수를 바로 전달하면 됩니다.