useDebounce

useDebounce hook provides a simple way to debounce heavy calculations.

Import

import { useDebounce } from "@prismane/core/hooks";

Usage

function Demo() {
  const [value, setValue] = useState("");

  const debounced = useDebounce(value, 1000);

  return (
    <Flex direction="column" gap={fr(5)}>
      <Field
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Debounce Field"
      />
      <Text
        cl={(theme) => (theme.mode === "dark" ? ["base", 200] : ["base", 700])}
      >
        {debounced}
      </Text>
    </Flex>
  );
}

API

Parameters

Name	Type	Description	Default
`value`	`any`	The value that should be debounced.	-
`delay`	`number`	The debounce delay.	`500`

Return Value

Name	Type	Description
`debounced`	`any`	The debounced value.

Go BackuseCopyToClipboard

Up NextuseDimensions