React setState with Lodash

input 태그에서 color를 변경할 때, 이를 state로 관리하게 되어 값이 계속 변할때마다 setState를 호출할 때 일시적으로 메모리 사용량이 급증하는 경우가 있었다.

이를 해결하기 위해 이전에 개념적으로만 알고 있던 throttle을 적용하기로 결정해 Lodash 라이브러리를 설치후 setState를 throttle로 감싸주었으나, 제대로 동작하지 않았다.

다행히 스택오버플로우에서 해당 이유를 설명해주는 글을 찾아 쉽게 이해할 수 있었다.
Throttle is not working when using hooks setState
How to use throttle or debounce with React Hook?

위 글에 따르면, throttle을 사용하는 함수를 컴포넌트 내에서 작성하게 될 경우, state가 변경될 때 마다 업데이트 되므로 계속 함수가 초기화되고 정상적으로 throttle이 동작하지 않는 문제가 생긴다.

따라서 useRef, useCallback, useEffect를 이용하여 state의 변경과 무관하게 계속해서 throttle을 이용한 함수가 업데이트 되지 않도록 하는 방법을 답변에서 제안하였고, 그중 useRef를 이용한 방법을 아래와 같이 사용했다.

// ColorModal.tsx
import _ from "lodash"; // throttle을 쓰기 위해 사용

// setState를 수행하는 함수
const handleColorModalChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setColorModalInfo((prev) => {
      prev.selectedEvent!.event.setProp("backgroundColor", e.target.value);
      prev.selectedEvent!.event.setProp(
        "textColor",
        getTextColorByBackgroundColor(e.target.value),
      );

      prev.selectedEvent!.event.setProp(
        "borderColor",
        getBorderColorByBackgroundColor(e.target.value),
      );
      return {
        ...prev,
        color: e.target.value,
      };
    });
  };

// setState 함수를 감싸줄 useRef를 이용한 throttle 함수
const handleColorModalthrottle = useRef(
  _.throttle((e: React.ChangeEvent<HTMLInputElement>) => {
    handleColorModalChange(e);
  }, 100),
);

...

return <ColorModal onChange={handleColorModalthrottle.current} />

위처럼 useRef를 이용해 Lodash의 throttle을 이용한 함수를 선언한 뒤, 내부에서 setState를 사용하여 state가 변경되더라도 throttle함수가 업데이트 되지 않도록 작성하니 문제 없이 코드가 동작하였다.