React 使用 debounce 和 setState

Question

背景

假設我們都知道的debounce從功能lodash 。

如果用戶快速輸入1 、 12 、 123 、 1234 ，它允許我們在一定的延遲時間后僅使用1234進行一次警報。

這非常用於減少請求量，用於優化。

---

描述

對於普通的輸入字段，我們可以使用那種debounce並且它有效。

問題：一旦我們在同一個回調中使用debounce添加setState ，則debounce將無法正常工作。

有誰知道原因？

import React, { useState } from "react";
import "./styles.css";
import { debounce } from "lodash";

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = debounce(value => {
    alert(`request: ${value}`);
  }, 1000);
  const onChange = e => {
    setInput(e.target.value); // Remove this line will lead to normal debounce
    debouceRequest(e.target.value);
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}

Answer 1

試試這個（使用 useCallback）：

import React, { useState, useCallback } from "react";
import "./styles.css";
import { debounce } from "lodash";

const request = debounce(value => {
  alert(`request: ${value}`);
}, 1000);

export default function App() {
  const [input, setInput] = useState("");

  const debouceRequest = useCallback(value => request(value), []);

  const onChange = e => {
    debouceRequest(e.target.value);
    setInput(e.target.value); // Remove this line will lead to normal denounce
  };

  return (
    <div className="App">
      <input onChange={onChange} />
    </div>
  );
}