ReactJS delay onChange while typing
With React Hooks and Function components
To keep the string the user is typing, use the useState
hook to store the text the user is typing. Then give that state to the value of the input. Also be sure to use setState
on the onChange
event handler of the input, otherwise the input value won't change.
To trigger an action only sometime after the user stops typing, you can use the useEffect
hook together with setTimeout
. In this case, we want to trigger useEffect
when the input value changes, so we'll create a useEffect
hook and on its dependency array give it the variable with the value of the input. The function given to useEffect
should use setTimeout
to trigger an action after the delay time that is desired. Also, the function given to useEffect
should return a cleanup function that clears the timeout set. This avoids doing actions for input values which are no longer relevant to the user.
Below is a little example of an app that uses the above steps to keep the string the user is typing visible and to show the finished string 500ms after the user stops typing.
function App() { const [query, setQuery] = useState(""); const [displayMessage, setDisplayMessage] = useState(""); useEffect(() => { const timeOutId = setTimeout(() => setDisplayMessage(query), 500); return () => clearTimeout(timeOutId); }, [query]); return ( <> <input type="text" value={query} onChange={event => setQuery(event.target.value)} /> <p>{displayMessage}</p> </> );}
Sounds you are going to need to use setTimeout
to start a timer as soon as the user enters text. If the user enters another character, restart the timer. If the user does not type again before the timer completes, it will fire an action that toggles the checkbox:
class App extends React.Component { constructor() { super(); this.state = { text: '', checked: false }; this.timer = null; } componentDidUpdate (prevProps, prevState) { if(prevState.text !== this.state.text) { this.handleCheck(); } } onChange = e => { this.setState({ text: e.target.value }); }; handleCheck = () => { // Clears running timer and starts a new one each time the user types clearTimeout(this.timer); this.timer = setTimeout(() => { this.toggleCheck(); }, 1000); } toggleCheck = () => { this.setState( prevState => ({ checked: !prevState.checked })); } render () { return ( <div> <input value={this.state.text} onChange={this.onChange} placeholder="Start typing..." /><br/> <label> <input type="checkbox" checked={this.state.checked} onChange={this.toggleCheck} /> Toggle checkbox after user stops typing for 1 second </label> </div> ) }}ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id="root"></div>
One way to do this would be to have your onChange
handler execute two functions:
- Function for immediately updating state
- Debounced function
Example code:
import debounce from 'lodash.debounce';class Foo extends React.Component { constructor() { super() this.state = { value: '' } // Delay action 2 seconds this.onChangeDebounced = debounce(this.onChangeDebounced, 2000) } handleInputChange = (e: Event) => { // Immediately update the state this.setState({ value: e.target.value }) // Execute the debounced onChange method this.onChangeDebounced(e) } onChangeDebounced = (e: Event) => { // Delayed logic goes here } render() { return ( <input onChange={this.handleInputChange} value={this.state.value} /> ) }}