debounce react code example
Example 1: onchange debounce react
import React, { useCallback } from 'react';
import _ from 'lodash';
const MyComponent = ({ data, handleInputChange }) => {
const debounceFunc = useCallback(
_.debounce(e => handleInputChange(e), 500),
[]
);
const handleChange = e => {
debounceFunc(e);
};
return <TextInput data={data} onChange={handleChange} />;
};
export default MyComponent;
Example 2: how to add debounce in react redux js
function SearchInput() {
const [realTimeValue, setRealTimeValue] = useState('');
const debouncedValue = useDebouncedValue(realTimeValue, 500);
useEffect(() => {
api.fetchSearchResults(debouncedValue);
}, [debouncedValue])
return <input onChange={event => setRealTimeValue(event.target.value)} />
}