Реагируйте на использование debounce с помощью setState

Question

Фон

Предположим, что мы все знаем о функции debounce из 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>
  );
}