How to start search only when user stops typing?

You can use setTimeout with respect to your code as follows,

state = {    name: '',    typing: false,    typingTimeout: 0}changeName = (event) => {    const self = this;    if (self.state.typingTimeout) {       clearTimeout(self.state.typingTimeout);    }    self.setState({       name: event.target.value,       typing: false,       typingTimeout: setTimeout(function () {           self.sendToParent(self.state.name);         }, 5000)    });}

Also, you need to bind changeName handler function in constructor.

constructor(props) {   super(props);   this.changeName = this.changeName.bind(this);}

Implement using useEffect hook:

function Search() {  const [searchTerm, setSearchTerm] = useState('')  useEffect(() => {    const delayDebounceFn = setTimeout(() => {      console.log(searchTerm)      // Send Axios request here    }, 3000)    return () => clearTimeout(delayDebounceFn)  }, [searchTerm])  return (    <input      autoFocus      type='text'      autoComplete='off'      className='live-search-field'      placeholder='Search here...'      onChange={(e) => setSearchTerm(e.target.value)}    />  )}

Another way that worked with me:

class Search extends Component {  constructor(props){    super(props);    this.timeout =  0;  }  doSearch(evt){    var searchText = evt.target.value; // this is the search text    if(this.timeout) clearTimeout(this.timeout);    this.timeout = setTimeout(() => {      //search function    }, 300);  }   render() {    return (      <div className="form-group has-feedback">        <label className="control-label">Any text</label>        <input ref="searchInput" type="text" onChange={evt => this.doSearch(evt)} />      </div>    );  }}