CODEWITHSUNDEEP
javascriptreactjs
chris
chris

Reputation: 36947

ReactJS delay onChange while typing

I need the state to change to maintain the string the user is typing. However I want to delay an action until the user stops typing. But I can't quite place my finger on how to do both.

So When the user stops typing I want an action to be triggered, but not before. Any suggestions?

Upvotes: 99

Views: 123503

Answers (11)

Markus Ethur
Markus Ethur

Reputation: 76

let reqDelay = useRef();

const yourMethod = () => {
  clearTimeout(reqDelay.current);

  reqDelay.current = setTimeout(() => {
    // do your fetch or whatever you want here
  }, 1000)
}

This way will prevent to re-render

Upvotes: 0

Ali Toshmatov
Ali Toshmatov

Reputation: 121

I have created npm package for this matter, you can use provided hook to get both immediate and delayed values.

https://www.npmjs.com/package/use-delayed-search

Upvotes: 0

Mohammad Momtaz
Mohammad Momtaz

Reputation: 635

You can use debounce and throttle of lodash library for delaying to call change handler function, the following code is based on debounce. The same code can be used for the throttle function. Debounce: delays invoking function until after X milliseconds Throttle: invokes function at most once per every X milliseconds

Sample code:

import React,{useEffect, useState, useMemo} from "react"
import debounce from "lodash.debounce";

export default function App() {
  const [search, setSearch] = useState("");
  const handleChangeSearch = ({ target }) => {
    setSearch(target.value);    
  };
  const debouncedChangeHandler = useMemo(
    () => debounce(handleChangeSearch, 500),
    []
  );

  useEffect(() => {
    return () => {
      debouncedChangeHandler.cancel();
    }
  }, []);

  return (
    <div className="App">      
      <label > Search:
      <input sx={{ display: { xs: "none", md: "block" } }}
        onChange={debouncedChangeHandler}
        name="search"
        type="text"
        placeholder="search..."
      />
      </label >
    </div>
  );
}

Upvotes: 0

Dor Ben Itzhak
Dor Ben Itzhak

Reputation: 315

With React Hooks - useRef

const timer = useRef(null)
    
useEffect(() => {
    
    clearTimeout(timer.current)
    timer.current = setTimeout(() => {
     // your logic
    },1000)
    
},[value])

Upvotes: 10

Karthik Raja
Karthik Raja

Reputation: 111

You can build a custom hook specifically for this purpose and use it just like the useState hook. This is more like an extension of jnforja's answer

import { useEffect, useState } from "react";
const useDebounce = (initialValue = "", delay) => {
  const [actualValue, setActualValue] = useState(initialValue);
  const [debounceValue, setDebounceValue] = useState(initialValue);
  useEffect(() => {
    const debounceId = setTimeout(() => setDebounceValue(actualValue), delay);
    return () => clearTimeout(debounceId);
  }, [actualValue, delay]);
  return [debounceValue, setActualValue];
};

export default useDebounce;

And use it just like the useState hook with the delay value

const [value, setValue] = useDebounce('',1000)

You can also check this article, explaining the implementation if you want.

Upvotes: 4

Edwin Vergara
Edwin Vergara

Reputation: 171

With React Hooks and Function components

const [timer, setTimer] = useState(null);

function changeDelay(change) {
    if (timer) {
      clearTimeout(timer);
      setTimer(null);
    }
    setTimer(
      setTimeout(() => {
        console.log(change);
      }, 3000)
    );
}

In input

<input type="text" onChange={(e) => { changeDelay(e.target.value); }} />

Upvotes: 17

AmerllicA
AmerllicA

Reputation: 32572

Call every state update except the first time:

Actually, I have the same issue but a little setTimeout could help me with a check ref for the first time mount:

import React, {useState, useEffect, useRef} from "react";

const Search = () => {
    const filterRef = useRef(); // use ref to call the API call all time except first time
    const [serpQuery, setSerpQuery] = useState('');

    useEffect(() => {
        let delayTimeOutFunction;

        if(!filterRef.current) {
            filterRef.current = true;

        } else { // componentDidMount equivalent
            delayTimeOutFunction = setTimeout(() => {
                console.log('call api: ', serpQuery)
            }, 700); // denounce delay
        }
        return () => clearTimeout(delayTimeOutFunction);
    }, [serpQuery]);

    return (
      <input value={serpQuery} onChange={e => setSerpQuery(e.target.value)} />
    );
};

Upvotes: 3

jnforja
jnforja

Reputation: 1258

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>
    </>
  );
}

Upvotes: 123

Chase DeAnda
Chase DeAnda

Reputation: 16441

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>

Upvotes: 34

richardgirges
richardgirges

Reputation: 1532

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} />
    )
  }
}

Upvotes: 21

AngelSalazar
AngelSalazar

Reputation: 3113

You can debounce on the onChange event (if the user is typing the onchange event will not execute)

Warning - Keep in mind that creating functions on render is a bad practice. I did it in order to illustrate the solution. A more safe solution is to use a class Component that creates the debounced handler on its constructor.

class DebouncedInput extends React.Component {
  constructor() {
    super();

    // Creating the debouncedOnChange to avoid performance issues

    this._debouncedOnChange = _.debounce(
      this.props.onChange, 
      this.props.delay
    );
  }

  render () {
    const { onChange, delay, ...rest } = this.props;
    return (
      <input onChange={this._debouncedOnChange} {..rest} />
    )
  }
}

Example below

function DebouncedInput (props) {
  const { onChange, delay = 300, ...rest } = props;
 
  
  return (
    <input 
      {...rest}
      onChange={ _.debounce(onChange, delay)}
    />
  )
}

function App() {
  return (
    <div>
      <DebouncedInput 
        type="text"
        placeholder="enter"
        delay={2000}
        onChange={() => console.log('changing')}
      />
    </div>
  )
}

ReactDOM.render(
  <App/>,
  document.querySelector('#app')
);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
</head>
<body>
 <div id="app"></div>
</body>
</html>

Upvotes: 1

Related Questions