function Search({ onSearch }) { const [value, setValue] = React.useState('') // This is the solution const debouncedSearch = React.useMemo( () => debounce(val => { onSearch(val) }, 750), [onSearch] ) const handleChange = React.useCallback( e => { setValue(e.target.value) debouncedSearch(e.target.value) }, [debouncedSearch] ) return <input type="text" value={value} onChange={handleChange} /> }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter