[URH-57] useDeepCompareEffect 신규

[bicochan]

👾 Pull Request

• 티켓: useDeepCompareEffect 신규
• 상태: 신규

1️⃣ Spec

• 의존성 배열의 깊은 비교를 통해 변화를 감지하고 콜백을 실행시킵니다.

2️⃣ 변경 사항

• isEqual() 함수를 사용하기 위해 fast-deep-equal 패키지를 추가하였습니다.
  • isEqual() 함수를 직접 작성하려면 상당한 양의 코드가 필요합니다.
  • fast-deep-equal 패키지는 852byte의 작은 번들 사이즈와 주당 46,000,000 이상 다운로드하는 패키지로 신뢰성이 높아 설치해봤습니다.

3️⃣ 예시 코드

function App() {
  const [, setCount] = useState(0);
  const effectCountRef = useRef(0);
  const deepCompareCountRef = useRef(0);

  useEffect(() => {
    effectCountRef.current += 1;
  // 빈 객체는 매번 새로운 참조를 갖기 때문에 effectCount는 계속 증가
  }, [{}]);

  useDeepCompareEffect(() => {
    deepCompareCountRef.current += 1;
  // 빈 객체를 같은 값으로 판단해 deepCompareCountRef는 한 번(첫 시도)만 증가
  }, [{}]);

  return (
    <div>
      <p>effectCount: {effectCountRef.current}</p>
      <p>deepCompareCount: {deepCompareCountRef.current}</p>
      <p>
        <button type="button" onClick={() => setCount((c) => c + 1)}>
          reRender
        </button>
      </p>
    </div>
  );
}

4️⃣ 관련 문서 (선택 사항)

• fast deep equal - github

[jeongbaebang]

👍

[bicochan]

@Choozii 지예 님 리뷰 한 번만 부탁드려요!

[Choozii]

리뷰가 늦었네요... 수고하셨습니다 🆒 🆒 🆒

[Choozii]

[P5] 결국에 type 자체는 똑같기는 한데 React.DependencyList라는 타입이 있나바유!

[bicochan]

저도 그 타입을 사용해 보려고 했었는데 unknown[]으로 작성하는 게 더 직관적이라고 판단해 봤습니다...!

ps. import 수를 줄이고 싶은 욕심도 한스푼...😅