Debounced Input

Question

Create an input that debounces user input before updating state.

Accepted Answer

import React, { useState, useEffect } from 'react'; function App() { const [value, setValue] = useState(''); const [debounced, setDebounced] = useState(''); useEffect(() => { const handler = setTimeout(() => setDebounced(value), 500); return () => clearTimeout(handler); }, [value]); return (

setValue(e.target.value)} />

Debounced: {debounced}

); } export default App;