Lodash debounce with React Input

The debounce function can be passed inline in the JSX or set directly as a class method as seen here:

search: _.debounce(function(e) {  console.log('Debounced Event:', e);}, 1000)

Fiddle: https://jsfiddle.net/woodenconsulting/69z2wepo/36453/

If you're using es2015+ you can define your debounce method directly, in your constructor or in a lifecycle method like componentWillMount.

Examples:

class DebounceSamples extends React.Component {  constructor(props) {    super(props);    // Method defined in constructor, alternatively could be in another lifecycle method    // like componentWillMount    this.search = _.debounce(e => {      console.log('Debounced Event:', e);    }, 1000);  }  // Define the method directly in your class  search = _.debounce((e) => {    console.log('Debounced Event:', e);  }, 1000)}

This is how I had to do it after googling the whole day.

const MyComponent = (props) => {  const [reload, setReload] = useState(false);  useEffect(() => {    if(reload) { /* Call API here */ }  }, [reload]);  const callApi = () => { setReload(true) }; // You might be able to call API directly here, I haven't tried  const [debouncedCallApi] = useState(() => _.debounce(callApi, 1000));  function handleChange() {     debouncedCallApi();   }  return (<>    <input onChange={handleChange} />  </>);}

With a functional react component try using useCallback. useCallback memoizes your debounce function so it doesn't get recreated again and again when the component rerenders. Without useCallback the debounce function will not sync with the next key stroke.

`

import {useCallback} from 'react';import _debounce from 'lodash/debounce';import axios from 'axios';function Input() {    const [value, setValue] = useState('');    const debounceFn = useCallback(_debounce(handleDebounceFn, 1000), []);    function handleDebounceFn(inputValue) {        axios.post('/endpoint', {          value: inputValue,        }).then((res) => {          console.log(res.data);        });    }    function handleChange (event) {        setValue(event.target.value);        debounceFn(event.target.value);    };    return <input value={value} onChange={handleChange} />}

`