useCallback 유의사항

Tags
설명
 

setter를 위해 이전 값을 참조하는 용도라면, prev 값을 받도록 하여 상태값에 대한 디펜던시 없애기

setter 목적으로만 사용되는 콜백함수의 경우에, 이전 상태값을 통해 연산을 하는 경우가 있다.
이 목적으로 상태값을 디펜던시에 추가하게 되면, 상태값이 바뀔 때마다 콜백함수도 매번 새로 생성되므로 최적화 시에 안좋은 영향을 끼칠 수 있다.
따라서 setter 목적으로 쓰이는 경우에는 이전 상태값은 prev 값을 받아서 사용하도록 하여, useCallback의 디펜던시에서 상태값을 제외시킨다.
 
ㅁㄴㅁㄴㅇㅁ
ㄴㅇㅁㄴ
ㅇㅁㄴㅁㄴㅁㄴㅇ

함수를 반환하는 형태는 사용하지 않는다.

(인자) ⇒ () ⇒ void 이런 형태로 만들어서 쓰지 말자.
useCallback으로 감쌌더라도 실제 컴포넌트 입장에서는 매번 새로운 함수가 전달되었다고 인지하여 매번 리렌더링을 일으키게 된다.
 
()⇒void 형태의 함수를 프롭으로 전달받는 경우에 인자에 따라 다른 동작을 하도록 하기 위해서, 혹은 코드가 깔끔하게 보이기 위해서 이렇게 쓰곤 한다.
onPressCell={onPressCell} ㅁㄴㅇ ㅁㄴㅇ ㅁㄴ ㅇㅁ ㄴㅇ
 
// useCallback으로 감쌌지만 컴포넌트 입장에서는 매번 함수가 바뀌었다고 인지하게 된다. const handlePressCell = useCallback( (conditionInfo: BodyConditionInfo) => (): void => { onPressCell(conditionInfo); // useCallback으로 감싸져 있는 함수이며, 메모이즈드 된 함수를 사용하고 있음을 확인하였음. }, [onPressCell], );