[react] useEffect 의 deps 변경에 대해 debounce (throttle) 처리하는 샘플코드

import { dc, isNotBlank } from '@/utils/common';
import _ from 'lodash';
import React, { useEffect, useRef, useState } from 'react';

/**
 * textarea 의 내용이 변할 때 debounce를 걸고 convert 함수를 실행한다.
 */
const TsxConverter = () => {
  const [contents, setContents] = useState<string>('');

  const debounced = useRef(_.debounce((newVal) => convert(newVal), 1000));

  useEffect(() => {
    if (isNotBlank(contents)) {
      debounced.current(contents);
    }
  }, [contents]);

  /**
   * 변환
   */
  const convert = (val: string) => {
    dc(`## val: [${val}]`);
  };

  /**
   * textarea onChange 이벤트핸들러
   */
  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const val = e.target.value;
    setContents(val);
  };

  return (
    <>
      <textarea value={contents} onChange={onChange} />
    </>
  );
};
export default TsxConverter;

참고

• https://stackoverflow.com/questions/54666401/how-to-use-throttle-or-debounce-with-react-hook