Dev Stack Source

Answer : Here is a React Hooks specific solution for Error Warning: Can't perform a React state update on an unmounted component. Solution You can declare let isMounted = true inside useEffect , which will be changed in the cleanup callback, as soon as the component is unmounted. Before state updates, you now check this variable conditionally: useEffect(() => { let isMounted = true; // note this flag denote mount status someAsyncOperation().then(data => { if (isMounted) setState(data); }) return () => { isMounted = false }; // use effect cleanup to set flag false, if unmounted }); const Parent = () => { const [mounted, setMounted] = useState(true); return ( <div> Parent: <button onClick={() => setMounted(!mounted)}> {mounted ? "Unmount" : "Mount"} Child </button> {mounted && <Child />} <p> Unmount Child, while it is still ...

Answer : UPDATE: Using RXJS 6 pipe operator: this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); You could create a rxjs/Subject and call .next() on keyup and subscribe to it with your desired debounceTime. I'm not sure if it is the right way to do it but it works. private subject: Subject<string> = new Subject(); ngOnInit() { this.subject.debounceTime(500).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); } onKeyUp(searchTextValue: string){ this.subject.next(searchTextValue); } HTML: <input (keyup)="onKeyUp(searchText.value)"> An Update for Rx/JS 6. Using the Pipe Operator. import { debounceTime } from 'rxjs/operators'; this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); Everything else is the same