Reactのdebounceとthrottleのhooksをそれぞれ試してみた

Reactのdebounceとthrottleをhooksがないかとそれぞれググってみて検索の上の方に出てきたのをただ試してみただけの投稿です、よろしくお願いします

私が試したコードはこちらです

debounce

debounceはこちらを試しました

xnimorz/use-debounce - github

yarn add use-debounce

import React, { useState } from "react";
import { useDebounce } from "use-debounce";

const App = () => {
  const [text, setText] = useState("");
  const [value] = useDebounce(text, 1000);

  return (
    <>
      <input onChange={e => setText(e.target.value)} />
      <p>Actual value: {text}</p>
      <p>Debounce value: {value}</p>
    </>
  );
};

export default App;

debounceが簡単に試せました

throttle

throttleはこちらを試しました

bhaskarGyan/use-throttle - github

yarn add use-throttle

import React, { useState } from "react";
import { useThrottle } from "use-throttle";

const App = () => {
  const [text, setText] = useState("");
  const value = useThrottle(text, 1000);

  return (
    <>
      <input onChange={e => setText(e.target.value)} />
      <p>Actual value: {text}</p>
      <p>Throttle value: {value}</p>
    </>
  );
};

export default App;

throttleが簡単に試せました

---

以上です。みていただいてありがとうございました。m(_ _)m