debounce

debounce 미들웨어는 연속적인 상태 업데이트를 효율적으로 관리하는 강력한 도구입니다. 이 미들웨어는 빠르게 연속되는 여러 상태 변경을 일정 시간(기본값 300ms) 동안 모아두었다가, 마지막 이벤트 이후 지정된 시간이 경과하면 한 번에 처리하는 방식으로 작동합니다.

특히 검색 입력, 폼 변경, 창 크기 조정과 같이 빈번한 이벤트가 발생하는 상황에서 불필요한 렌더링과 연산을 방지함으로써 애플리케이션의 성능을 크게 향상시킵니다.

const useStore = create(
  debounce(initialState, wait = 300ms)
)

debounce 미들웨어의 진정한 강점은 단순히 마지막 업데이트만 적용하는 것이 아니라, 모든 업데이트를 순차적으로 처리한다는 점에 있습니다. 이는 특히 사용자가 여러 번의 클릭이나 입력을 통해 상태를 변경할 때, 각 액션의 의도를 보존하면서도 성능을 최적화할 수 있게 해줍니다.

const useStore = create(
  debounce({ count: 0 }, 1000)
);

export default function Page() {
  const [count, setCount] = useStore(store => store.count)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count => count + 1)}>Increment</button>
      <button onClick={() => setCount(count => count - 1)}>Decrement</button>
    </div>
  )
}