useDebouncedValue

About

Tracks another value and gets updated in a debounced way.

Installation

npm install rooks

Importing the hook

import { useDebouncedValue } from "rooks";

Usage

import React, { useState } from "react";
import { useDebouncedValue } from "rooks";

function Demo() {
  const [value, setValue] = useState("");
  const [debouncedFoo, immediatelyUpdateDebouncedValue] = useDebouncedValue(
    value,
    500
  );
  // use `immediatelyUpdateDebouncedValue` if you want to update `debouncedValue` immediately

  return (
    <div>
      <input
        onChange={(e) => setValue(e.target.value)}
        placeholder="Please type here"
      />
      <div>{debouncedFoo}</div>
    </div>
  );
}

render(<Demo />);

Arguments

Argument	Type	Description	Default value
value	Date	the value to be debounced	undefined
timeout	number	milliseconds that it takes count down once	1000
options.initializeWithNull	boolean	Should the debouncedValue start off as null in the first render	false

Return Value

An array is returned with the following items in it

Type	Type	Description
debouncedValue	typeof value	The debouncedValue
immediatelyUpdateDebouncedValue	function	Handy utility function to update the debouncedValue instantly

---

Codesandbox Examples

Basic Usage

---

Join Bhargav's discord server

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.