useCallback 에 대해 헷갈렸던 점에 대해서 리액트 문서 바탕으로 정리한 내용인데요.
공유하면 좋을것 같아서 공유합니다! (리액트 문서에 잘 정리되어 있습니다.)
https://react.dev/reference/react/useCallback#should-you-add-usecallback-everywhere
혹시 제가 놓친부분이 있다면 추가로 말씀해주시면 감사할것 같습니다.
리액트 문서에서는 useCallback 을 사용할만한 가치 있는 상황을 2가지로 정의하더라고요.
- You pass it as a prop to a component wrapped in memo You want to skip re-rendering if the value hasn’t changed. Memoization lets your component re-render only if dependencies changed.
- The function you’re passing is later used as a dependency of some Hook. For example, another function wrapped in useCallback depends on it, or you depend on this function from useEffect
- memo 로 지정한 컴포넌트에 함수를 prop으로 내려줄 상황과,
- useEffect의 디펜던시로 함수를 지정해야할 상황.
There is no benefit to wrapping a function in useCallback in other cases. There is no significant harm to doing that either, so some teams choose to not think about individual cases, and memoize as much as possible. The downside is that code becomes less readable. Also, not all memoization is effective: a single value that’s “always new” is enough to break memoization for an entire component.
위의 1,2번을 제외한 상황에 단순히 함수를 useCallback 으로 만드는것 자체만으로는 최적화 향상을 기대하기 힘들다고 합니다.
그래서 일반적인 상황에서 일반적인 함수에 useCallback 을 사용하는것은 아무런 해는 없지만 또 아무런 이득 또한 없고 단점으로 코드 가독성을 떨어뜨리기 때문에 추천하는 방법은아니라고 합니다.
만약 1번,2번의 상황이 아니지만, 함수 자체에 무거운 연산이 들어있어 함수를 생성할때의 성능이 걱정된다면 함수안에 무거운 연산이 필요한 부분을 useMemo 처리하는 것도 대안이지 않을까 생각해봅니다.
If you’re writing a custom Hook, it’s recommended to wrap any functions that it returns into
useCallback:
This ensures that the consumers of your Hook can optimize their own code when needed.
또 Custom Hook 안에서 정의한 함수중 return 할 함수에 대해서는 모두 useCallback 처리하는걸 추천하는데요 (오늘 라이브세션에서 보여주신 레퍼런스 예시 같이),
그이유는 나중에 custom hook 을 소비하게될 사용자가 해당 함수를 최적화에 활용하고 싶을때 (위에 언급된 1번이나 2번 상황) 사용할 수 있게 하기 위함이라고 합니다.
그리고 많은 상황에서 리액트의 퍼포먼스를 낮추는 큰 요인중 하나가 잦은 useEffect 사용이라고 합니다. (기본 리액트 렌더, 리렌더와 별도로 또 다른 렌더를 추가로 발생시키기 때문에)
그래서 최적화를 생각한다면 useEffect 리팩토링과 useCallback과 결합한 memo 활용, useMemo를 잘 조합해서 사용하면 좋지 않을까 생각합니다.
그래서 최적화 작업이 어려운것 같은데요.
최적화가 필요한지 측정하는 방법으로 React Developer Tools profiler 이나 Chrome 의 CPU Throttling
을 활용해 보는것도 추천하더라고요.
그리고 최적화 작업이 까다롭고 어렵다는걸 리액트 팀에서도 알고 있어서,
지금 같이 수작업으로 memo 를 지정해주지 않아도 리액트가 자동으로 코드를 최적화 시켜주는 새로운 기능을 실험하고 있다고 합니다!
