[React.js] useCallback 예시

useCallback에 대해 질문이 들어와서 예시를 만들어 주면서 답변을 해주었는데, 짧게나마 적은 코드가 아까워서 블로그에 남깁니다.

const message = 'hi';

function UseCallBackExample() {
  const [, renderingBtn] = useState(0);
  const noMemo = () => console.log('hi');
  const yesMemo = useCallback(() => console.log(message), [message]);

  useEffect(() => {
    console.log('no memo called');
  }, [noMemo]);

  useEffect(() => {
    console.log('yes memo called');
  }, [yesMemo]);

  return (
    <button onClick={() => renderingBtn(prev => prev + 1)}>rerendering</button>
  );
}

export default UseCallBackExample;

1) useEffect가 의존성 배열안의 값이 변경되는지 감지해서 call된다는걸 이용해서
2) reRendering 버튼을 누를 때
3) noMemo와 yesMemo (useCallback으로 메모이제이션 한 함수)가 변하는지 아닌지 확인 가능

간단한 예시지만, 이런 예시가 누군가에겐 필요한것 같아 공유합니다.