React 使用 debounce 和 setState

Question

背景假设我们都知道debounce函数 from lodash。如果用户快速输入1, 12, 123, ，它允许我们在一定的延迟时间后1234仅使用 , 进行一次警报。1234这非常用于减少请求量，用于优化。描述对于普通的输入字段，我们可以使用那种debounce并且它可以工作。问题：一旦我们setState在同一个回调中添加了debounce，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>

  );

}