useCallback vs 컴포넌트 밖에 선언된 함수

Question

React를 공부하다가 궁금한점이 생겨서 질문 남깁니다
useCallback은 의존성 배열의 값이 바뀌지 않는한 같은 함수를 반환하는 것으로 알고있습니다.

react 컴포넌트 안에서 선언되는 함수는 useCallback의 의존성 배열에 추가해야되는 것을 이해하겠는데, react 컴포넌트 밖에서 선언되는 함수도 useCallback의 의존성 배열에 추가를 해야하나요?

혹시 성능 차이가 날까요?

손정현 · Answer

안녕하세요!

컴포넌트 밖에 선언되는 함수는 렌더 시 매번 새로 선언되지는 않으니 의존성 배열에 넣을 필요가 없지 않을까 싶습니다. (처음 파일을 읽을때 선언된 이후로 안 바뀔 것으로 예상합니다)

성능 차이는 코드마다 다르겠지만 그렇게 크지는 않을것 같아요.
관련해서 so나 테크 블로그 참고해보시면 좋을 것 같아요.

- https://stackoverflow.com/questions/60660415/performance-difference-from-putting-function-outside-of-react-component
- https://alexsidorenko.com/blog/react-render-usecallback/

강경석(핸디) · Answer

둘의 차이는 크게 없습니다.

그래도 가끔 리액트 클린코드 예시로 보면 함수 재생성을 방지하기 위해 순수함수의 경우 컴포넌트 밖으로 빼는 경우를 종종 볼 수 있습니다.

useCallback, useMemo 둘다 캐싱을 하기때문에 리액트의 성능상에 안좋은 영향을 줄 수 있습니다. 
대신에 외부로 함수를 빼면 캐싱 대신 해당 모듈에 함수가 할당된 형태로 존재하겠죠.

저는 밖으로 빼는 것을 선호합니다.