Skip to main content

useDebounce

Importing useDebounce Hook​

import { useDebounce } from '@ciceksepeti/cui-hooks';

Example​

import React, { useState } from 'react';
import { useDebounce } from '@ciceksepeti/cui-hooks';

export Example = () => {
  const [text, setText] = useState(
    'This text will change 1 second later after finishing the typing.'
  );

  // 1000 represents delay time as milisecond.
  // 1000 ms = 1 second
  const debouncedText = useDebounce(text, 1000);

  return (
    <div>
      <p>{debouncedText}</p>
      <input
        type='text'
        style={{ padding: '10px', width: '100%' }}
        placeholder='Type here to test'
        onChange={(event) => setText(event.target.value)}
      />
    </div>
  );
};

Preview & Test​

PREVIEW & TEST AREA
useDebounce

This text will change 1 second later after finishing the typing.