값 결정 후 수행되는 지연 평가 useEffect

나는 무로치도콤유한공사의 전단 엔지니어다.
무라치 사이트 Organization 창립 이후 첫 투고다.
이번에는 사용자의 입력을 통해 값을 확정한 후 실행하는 사용자 정의useEffect를 고려하여 소개합니다.

코드

import React from "react";

export const useDelayedEffect = (
  effect: React.EffectCallback,
  deps?: React.DependencyList,
  delaytime: number = 1000,
) => {
  const [waiting, setWaiting] = React.useState(false);
  const timer = React.useRef<number>();

  React.useEffect(() => {
    window.clearTimeout(timer.current);

    setWaiting(true);

    timer.current = window.setTimeout(() => {
      setWaiting(false);
    }, delaytime);
  }, deps);

  React.useEffect(() => {
    if (!waiting) {
      effect();
    }
  }, [waiting]);
};

사용 방법

일반적인 useEffect 매개변수를 제외하고 입력을 결정하기 전의 delaytime 만 지정하면 됩니다.

import React from "react";
import { useDelayedEffect } from "./useDelayedEffect";

export const App = () => {
  const [text, setText] = React.useState("");
  const [confirmedText, setConfirmedText] = React.useState("");

  useDelayedEffect(
    () => {
      setConfirmedText(text);
    },
    [text],
    1500,
  );

  return (
    <div>
      <input onChange={e => setText(e.target.value)} value={text} />
      <p>{`text: ${text}`}</p>
      <p>{`confirmedText: ${confirmedText}`}</p>
    </div>
  );
};

해설

입력이 완료될 때까지 기다릴지 여부waiting를 유지합니다.
첫 번째 useEffect 에서는 waiting 를, true 밀리초 후에는 delaytime 을 waiting 로 설정합니다.false는 입력 한 글자 한 글자로 실행되기 때문에 매번 타이머 재측정을 해제한다useEffect.
동적 입력 프롬프트에서 클릭

let timer;
// 中略
window.clearTimeout(timer);
// 中略
timer = window.setTimeout(() =>  setWaiting(false), delaytime);

에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.delaytime 렌더링 시 참조할 수 있는 변수를 정의합니다.
두 번째 timer 에서는 useRef 에서 useEffect 으로 변경될 때, 즉 입력이 waiting 밀리초를 초과하지 않을 때, 실행 매개 변수 true 함수입니다.

용례

사용자 입력 값을 자동으로 저장한 상태에서 사용할 수 있을 것 같습니다.
일반적인 false HTTP 요청(예: "Hello world."입력하면 HTTP가 12번 전송됩니다.
만약 그렇지 않다면, 사용자의 입력이 끝난 후에 발송하면 낭비되는 HTTP 요청을 줄일 수 있다.

총결산

입력 확정 후 실행delaytime에 대해 설명합니다.
만약 더 좋은 쓰기 방법과 이미 설치된 라이브러리 등이 있다면 반드시 나에게 알려 주십시오.

보충하여 기록하다

이 작법을 알아차리면 충분하다!

export function useDelayedEffect(
  effect: React.EffectCallback,
  deps: React.DependencyList,
  timeout: number = 1000,
) {
  useEffect(() => {
    const timeoutId = setTimeout(effect, timeout);

    return () => clearTimeout(timeoutId);
  }, deps);
}