React의 props와state의 변경을 감시하는 간단한 디버깅 훅

요즘 일.
한 구성 요소가 렌더링 횟수를 많이 낭비했기 때문에 그것을 디버깅해야 한다.
props와state를 바꾸면 나타나는 것은 당연한 일이지만 어떤 변화가 나타나면 추적하기 어렵다.
왜 이렇게 말할까요. 프로스트와state가 많을수록 어떤 값이 바뀌었는지 수동으로 확인해야 하기 때문입니다.
여기에 소개하고 싶은 것은 이것useDebughook입니다.
어쨌든 전체적으로 이런 느낌.

//　実際に使う hook
export const useChangeDebugger = (props) => {
  const previousValue = usePrevious(props);

  const getChange = getChanges(previousValue, props);

  if (getChange) {
    getChange.forEach((change) => console.log(change));
  }
};

const usePrevious = (props) => {
  const previousValue = React.useRef(null);

  React.useEffect(() => {
    previousValue.current = props;
  });

  return previousValue.current;
};

function getChanges(previousValue, currentValue) {
  if (
    typeof previousValue === "object" &&
    previousValue !== null &&
    typeof currentValue === "object" &&
    currentValue !== null
  ) {
    return Object.entries(currentValue).reduce((acc, cur) => {
      const [key, value] = cur;
      const oldValue = previousValue[key];

      if (value !== oldValue) {
        acc.push({
          name: key,
          previousValue: oldValue,
          currentValue: value,
        });
      }

      return acc;
    }, []);
  }

  if (previousValue !== currentValue) {
    return [{ previousValue, currentValue }];
  }

  return [];
}

무엇을 하고 있는지 말하려면 이전 값(use Previous)과 현재 값을 비교하고, 다르면 콘스토어에 대상 중 어떤 값이 바뀌었는지 기록하는 등 매우 간단한 훅이다.
사용법은 이렇습니다.

const Counter = (props) => {
  useChangeDebugger(props);

  return <span>{props.count}</span>;
};

이후 렌더링할 때마다 콘솔에 표시

{ key: 'count', previous: 0, current: 1 }

이것만으로도 디버깅 훅으로 편리하게 만들 수 있지만 이렇게 할 수도 있다

const useEffectDebugger = (fn, deps) => {
  useChangeDebugger(deps);

  return React.useEffect(fn, deps);
};

const useMemoDebugger = (fn, deps) => {
  useChangeDebugger(deps);

  return React.useMemo(fn, deps);
};

const useCallbackDebugger = (fn, deps) => {
  useChangeDebugger(deps);

  return React.useCallback(fn, deps);
};

React 원래의 function 패키지에 디버깅 기능을 추가했습니다.
사용 방법은 매우 간단하다. 단지 원래의use 함수를 ↑로 바꿀 뿐이다.
이렇게

const Counter = (props) => {
  useEffectDebugger(() => {
    document.title = `clicked ${props.count} times`;
  }, [props.count]);
};

이러면 로그가 나와요

{ name: "0", previousValue: 0, currentValue: 1 }

name: "0"의 이유는 deps가 배열이고 Object이기 때문입니다.enties(current Value)라면 index가 키로 취득되기 때문이다.index를 대조하면 어디가 변했는지 똑똑히 볼 수 있다.
이렇게 하면useffect 등 무한순환을 일으키는 값을 간단하게 줄일 수 있다.
그러나 부족한 점은 적용되지 않는다eslint/rule-of-hooks.
따라서 이것은 eslint을 만족시킨 후에 debug를 바꾸는 절차라고 생각합니다.
debug가 끝난 후에 원래의 함수를 회복하는 것을 잊지 마세요!