첫 번째 건너뛰기Custom Hooks

소개

이제 React에서 hooks를 사용할 수있게되어 일년이 지납니다. 주요 라이브러리 등은 Class 컴포넌트에서 hooks를 이용한 Functional 컴포넌트로 대체되어 있습니다.
폐사 보관 하지만 hooks를 적극적으로 채용하고 있습니다.
그런데 그중, Class컴퍼넌트에는 있었다 componentDidUpdate 에 해당하는 hooks는 없다고 하는 벽에 부딪쳤습니다.
첫회는 아무것도 하지 않지만 2회째 이후는 뭔가 처리를 끼고 싶은 등이 유스 케이스에 있다고 생각합니다. 그런 편리한 Custom Hooks를 만들었으므로 소개합니다.

구현

import {DependencyList, useEffect, useState} from 'react';

export default function useSkip(effect: Function, deps: DependencyList, times: number = 1) {
  const [_times, setTimes] = useState(0);
  useEffect(() => {
    if (_times >= times) {
      return effect();
    } else {
      setTimes(_times + 1);
    }
  }, deps);
}

해설

hooks 이름은 useSkip 로 했습니다.

인수

기본적인 사용법은 useEffect 와 다르지 않습니다. 첫 번째 인수에 콜백 함수를 전달하고 두 번째 인수에 DependencyList를 전달합니다.
세 번째 인수로 여러 번 처리를 건너 뛰는 방법을 전달할 수 있습니다. 대부분의 경우 한 번만 건너뛰는 수요가 없을 것 같기 때문에 기본적으로 times=1 로 둡니다.

실행 횟수 관리

  const [_times, setTimes] = useState(0);

이 부분에서 실행 횟수를 관리하는 상태를 보관 유지합니다.

    if (_times >= times) {
      return effect();
    } else {
      setTimes(_times + 1);
    }

이 부분에서 인수 횟수에 도달하지 않은 경우 콜백을 발화시키지 않고 실행 횟수를 증가시킵니다.
지정된 횟수에 도달하면 콜백이 발화하기 시작합니다.

동작 확인

다음 프로그램으로 동작을 확인합니다.
버튼을 누를 때 useEffect 또는 useSkip 에서 전달하는 콜백이 발화되는지 관찰합니다.

import React, {useEffect, useState} from 'react';
import useSkip from '@hooks/useSkip';

function App() {
  const [num, setNum] = useState(0);

  useEffect(() => {
    console.debug(`num: ${num}`);
    console.debug('fire useEffect');
  }, [num]);

  useSkip(() => {
    console.debug('fire useSkip');
  }, [num]);

  useSkip(
    () => {
      console.debug('fire useSkip 5 times skipped');
    },
    [num],
    5
  );

  return <button onClick={() => setNum(num + 1)}>increment</button>;
}

첫회는 useEffect 만이지만, 2번째부터 1번째의 useSkip , 5번째부터는 2번째의 useSkip가 발화하고 있습니다.
좋은 느낌이네요. componentDidMount 와 같은 처리도 할 수 있을 것 같습니다.

참고