use-debounced-state

use-debounced-state

디바운스된 값으로 state를 관리하는 use-debounced-state 훅에 대해 설명해 드릴게요. @mantine/hooks 패키지에서 제공돼요.

출처: 문서

본문

사용법

import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useDebouncedState('', 200);

  return (
    <>
      <TextInput
        label="Enter value to see debounce effect"
        defaultValue={value}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </>
  );
}

use-debounce-value와의 차이점

  • 디바운스되지 않은 값에 직접 접근할 수 없어요.
  • 비제어 입력(value 대신 defaultValue prop)에 사용돼요. 예를 들어 입력에 입력된 문자처럼 매 state 변경마다 렌더링되지 않아요.
  • 커스텀 state 공급자나 props와 함께 동작하지 않아요. 내부적으로 useState를 사용해요.

Leading 갱신

{ leading: true } 옵션으로 첫 호출에서 값을 즉시 갱신할 수 있어요:

import { useDebouncedState } from '@mantine/hooks';
import { TextInput, Text } from '@mantine/core';

function Demo() {
  const [value, setValue] = useDebouncedState('', 200, { leading: true });

  return (
    <>
      <TextInput
        label="Enter value to see debounce effect"
        defaultValue={value}
        onChange={(event) => setValue(event.currentTarget.value)}
      />

      <Text>Debounced value: {value}</Text>
    </>
  );
}

정의

interface UseDebouncedStateOptions {
  leading?: boolean;
}

type UseDebouncedStateReturnValue<T> = [T, (newValue: SetStateAction<T>) => void];

function useDebouncedState<T = any>(
  defaultValue: T,
  wait: number,
  options?: UseDebouncedStateOptions,
): UseDebouncedStateReturnValue<T>

내보내는 타입

UseDebouncedStateOptions와 UseDebouncedStateReturnValue 타입은 @mantine/hooks 패키지에서 내보내지므로 애플리케이션에서 import할 수 있어요:

import type { UseDebouncedStateOptions, UseDebouncedStateReturnValue } from '@mantine/hooks';

더 알아보기 (Learn more)