Search
🤨

TIL: useCallback()은 내부적으로 useMemo()를 사용한다

Date
2022/03/31
Tags
TIL
React
Frontend
Created by

useCallback()은 함수, useMemo()는 값? 정말 그걸로 끝인가?

React 공식 문서 상으로, useCallback() 훅은 “Returns a memoized callback.” 말 그대로 메모이제이션된 콜백을 반환한다.
그리고, useMemo() 훅은 “Returns a memoized value.” 말 그대로 메모이제이션된 을 반환한다.
...정말 그걸로 끝인가? 메모이제이션하는 대상만 다르고 내부 로직은 똑같은 걸까? 함수를 메모이제이션하니까, 값을 메모이제이션하니까, 내부 로직이 다르지는 않을까?

일단 공식 문서는 똑같다고 한다

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).
useCallback(fn, deps)은 useMemo(() => fn, deps)와 같습니다.
당연하다.
그래도 정확히 알고 싶었다.

아니 진짜 똑같네

export function useCallback<T>( callback: T, deps: Array<mixed> | void | null, ): T { return useMemo(() => callback, deps); }
TypeScript
function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T { currentlyRenderingComponent = resolveCurrentlyRenderingComponent(); workInProgressHook = createWorkInProgressHook(); const nextDeps = deps === undefined ? null : deps; if (workInProgressHook !== null) { const prevState = workInProgressHook.memoizedState; if (prevState !== null) { if (nextDeps !== null) { const prevDeps = prevState[1]; if (areHookInputsEqual(nextDeps, prevDeps)) { return prevState[0]; } } } } if (__DEV__) { isInHookUserCodeInDev = true; } const nextValue = nextCreate(); if (__DEV__) { isInHookUserCodeInDev = false; } workInProgressHook.memoizedState = [nextValue, nextDeps]; return nextValue; }
TypeScript
useCallback()가 내부적으로 useMemo()를 사용하고 있었다. 더 이상 의심할 여지가 없다...

References