🍎 Throttling & Debouncing 이란?

짧은 시간 간격으로 연속해서 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하는 기법 (ex. 인스타그램 좋아요 버튼)

🌳 Throttling 이란?

짧은 시간 간격으로 연속해서 발생한 이벤트들을 일정시간 단위(delay)로 그룹화하여 처음 또는 마지막 이벤트 핸들러만 호출되도록 하는 것

🌳 Debouncing 이란?

짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 이벤트로부터 일정 시간(delay)이 경과한 후에 한 번만 호출하도록 하는 것
주로 사용되는 예: 입력값 실시간 검색, 화면 resize 이벤트

메모리 누수(Memory Leack)란?
필요하지 않은 메모리를 계속 점유하고 있는 현상

import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

export default function Home() {
	const navigate = useNavigate();
	let timerId = null;
  
  	const throttle = (delay) => {
    	if (timerId) {
        	// timerId가 있으면 바로 함수 종료
          	return;
        }
      	console.log(`API요청 실행! ${delay}ms 동안 추가요청 안받음`);
      	timerId = setTimeout(() => {
        	console.log(`${delay}ms 지남 추가요청 받음`);
          	timerId = null;
        }, delay);
    };
  
  	const debounce = (delay) => {
    	if(timerId) {
        	// 할당되어 있는 timerId에 해당하는 타이머 제거
          	clearTimeout(timerId);
        }
      	timerId = setTimeout(()=>{
        	// timerId에
        })
    }
}

🌳 lodash 적용해보기

import { useState, useCallback } from "react";
import _ from "lodash";

function App() {
	const [searchText, setSearchText] = useState("");
  	const [inputText, setInputText] = useState("");
  
  	const handleSearchcText = useCallback(
    	_.debounce((text) => setSearchText(text), 2000),
      	[]
    );
  
  	const handleChange = (e) =>{
    	setInputText(e.target.value);
      	handleSearchText(e.target.value);
    };
  
  	return (
    	<div style={{paddingLeft: 20, paddingRight: 20,}}>
        	<h1>디바운싱 예제</h1>
        	<br />
        	<input
              placeholder="입력값을 넣고 디바운싱 테스트를 해보세요."
              style={{ width: "300px" }}
              onChange={handleChange}
              type="text"
            />
        	<p>Search Text: {searchText}<p>
            <p>Input Text: {inputText}</p>
        </div>
    );
}
export default App;