How to use ts-debounce - 5 common examples

function handleUpdate(records: MutationRecord[]): void {
    const added = records
        .map(record => [...record.addedNodes])
        .reduce((x, y) => x.concat(y))
        .filter((x: HTMLElement) => {
            return (
                ignoredChanges.indexOf(x.nodeName) === -1 && (!x.classList || !x.classList.contains('result-blocker'))
            );
        });
    if (added.length > 0) {
        blocker.checkForBlockedVideos();
    }
}

const debounceTime = 250;
const mutationObserver = new MutationObserver(debounce(handleUpdate, debounceTime));

library.add(faTimesCircle);
dom.watch();
new Settings().load().then(settings => {
    blocker = new Blocker(settings);
    blocker.init().then(() => {
        const subscription = interval(100).subscribe(() => {
            if (document.getElementById('content')) {
                const youtubeApp = document.getElementById('content');
                const options: MutationObserverInit = {
                    attributes: false,
                    childList: true,
                    subtree: true,
                };
                mutationObserver.observe(youtubeApp, options);
                blocker.checkForBlockedVideos();

React.useEffect(() => {
        const handleResize = debounce(() => {
            setInnerWidth(hasWindow ? window.innerWidth : 0);
        }, DEBOUNCE_DELAY);

        if (hasWindow) {
            window.addEventListener('resize', handleResize);
        }

        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

componentDidMount() {
    this.onResizeDebounced = debounce(this.onResize, this.props.resizeDebounce);
    if (this.containerRef.current) {
      const { clientWidth, clientHeight } = this.containerRef.current;
      this.props.updateParentDimensions({ width: clientWidth, height: clientHeight, top: 0, left: 0 });
    }
    this.ro.observe(this.containerRef.current as Element);
  }

export type FetcherChildrenFunction = (
  options: FetcherControllerStateAndHelpers
) => React.ReactNode

interface State {
  suggestions: SuggestionSection[]
  loading: boolean
  error?: Error
}

export class UiTypeaheadFetcher extends React.Component {
  requestId = 0
  state = { loading: false, error: undefined, suggestions: [] }
  mounted = false

  fetch = debounce(() => {
    if (!this.mounted) {
      return
    }
    this.requestId++
    this.props
      .fetchData(this.props.searchValue ? this.props.searchValue : "", {
        requestId: this.requestId
      })
      .then(
        (suggestions: SuggestionSection[]) => {
          if (this.mounted) {
            this.props.onLoaded(suggestions, undefined)
            this.setState({ loading: false, suggestions })
          }
        },
        (error: Error) => {

if (props.breakpoints !== undefined) {
            breakpoints = props.breakpoints;
        } else if (props.theme !== undefined) {
            breakpoints = props.theme.breakpoints;
        } else {
            breakpoints = RootTheme.breakpoints;
        }

        const sortedBreakpoints = sortBreakpoints(breakpoints);

        this.state = {
            breakpoints: sortedBreakpoints,
            current: getBreakpointKey(innerWidth, sortedBreakpoints),
            innerWidth: hasWindow ? window.innerWidth : 0,
        };
        this.handleResize = debounce(this.handleResize.bind(this), 100);
        this.hasWindow = hasWindow;
    }