How to use debounce - 10 common examples

} catch ( postsFail ) {
                dispatch( receivePosts( [] ) );
                console.error( postsFail );
            }
        } );
    } );

    request.on( 'error', ( requestError ) => {
        // eslint-disable-next-line no-console
        console.error( `problem with request: ${ requestError.message }` );
    } );

    request.end();
};

const debouncedFetchPosts = debounce( getPosts, FETCH_DEBOUNCE_INTERVAL );

const fetchPosts = function fetchPosts ( state ) {
    const {
        search,
        groups,
        services,
     } = state;

    return ( dispatch ) => {
        debouncedFetchPosts( search, groups, services, dispatch );
    };
};

const fetchPostsImmediate = function fetchPostsImmediate ( state ) {
    const {
        search,

constructor(...args) {
    super(...args);
    this.mounted = false;
    this.handleResize = debounce(() => {
      // Skip configuration where the position is screen size invariant.
      if (this.props.in || this.props.direction === 'down' || this.props.direction === 'right') {
        return;
      }

      if (this.transitionRef) {
        setTranslateValue(this.props, this.transitionRef);
      }
    }, 166);

    this.handleEnter = node => {
      setTranslateValue(this.props, node);
      reflow(node);

      if (this.props.onEnter) {
        this.props.onEnter(node);

export function trackScrolling() {
    const debouncedUserActivity = debounce(() => trackUserActivity(), 250, /* trailing: */ false);
    const handleScrollUpdate = () => {
        debouncedUserActivity();
    };
    window.addEventListener("scroll", handleScrollUpdate);
}

const defaultQueryVal = useQueryParam(SEARCH_VALUE_QUERY_PARAM_KEY) as string; // search query to start with

  /**
   * Track the current value in the search box.
   */
  const [searchVal, setSearchVal] = useState(defaultQueryVal || "");
  const searchOnChange = useCallback(
    // TODO: debounce this
    (e: React.ChangeEvent) => {
      setSearchVal(e.target.value);
    },
    []
  );

  // track debounce with ref (see https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
  const debouncedLastSearchUpdater = useRef(debounce(onNewSearchVal, 1500));
  useEffect(() => {
    if (searchVal) {
      debouncedLastSearchUpdater.current(searchVal);
    }
  }, [searchVal]);

  return (
     onNewSearchVal(searchVal)}
      {...rest}
    />
  );
};

webViewPanel.webview,
    output,
    gist,
    scripts,
    styles
  );

  if ((await config.get("playground.showConsole")) || manifest.showConsole) {
    output.show(false);
  }

  const autoRun = await config.get("playground.autoRun");
  const runOnEdit = autoRun === "onEdit";

  const documentChangeDisposable = vscode.workspace.onDidChangeTextDocument(
    debounce(async ({ document }) => {
      if (isPlaygroundDocument(gist, document, MARKUP_EXTENSIONS)) {
        const content = getMarkupContent(document);

        if (content !== null) {
          htmlView.updateHTML(content, runOnEdit);
        }
      } else if (isPlaygroundDocument(gist, document, SCRIPT_EXTENSIONS)) {
        // If the user renamed the script file (e.g. from *.js to *.jsx)
        // than we need to update the manifest in case new scripts
        // need to be injected into the webview (e.g. "react").
        if (
          jsEditor &&
          jsEditor.document.uri.toString() !== document.uri.toString()
        ) {
          // TODO: Clean up this logic
          const oldFile =

this.state = { isCollapseVisible: true, collapsed: true, maxHeight: 'auto' }

    this.wrapper = React.createRef()
  }

  calcMaxHeight = () => {
    const { collapseHeight } = this.props
    const wrapper = this.wrapper.current

    if (wrapper.scrollHeight > collapseHeight) {
      const maxHeight = wrapper.scrollHeight + 60
      this.setState({ isCollapseVisible: true, maxHeight })
    } else this.setState({ isCollapseVisible: false, maxHeight: 'auto' })
  }

  debouncedCalcMaxHeight = debounce(this.calcMaxHeight, 500)

  componentDidMount() {
    window.addEventListener('resize', this.debouncedCalcMaxHeight)
    this.calcMaxHeight()
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.debouncedCalcMaxHeight)
  }

  render() {
    const { children, collapseHeight } = this.props
    const { collapsed, isCollapseVisible, maxHeight } = this.state
    const height = isCollapseVisible && collapsed ? collapseHeight : maxHeight
    const transitionTime = 600
    const fadeOutTime = 400

awebooking.dialog = function (selector) {
  const $dialog = $(selector).dialog({
    modal: true,
    width: 'auto',
    height: 'auto',
    autoOpen: false,
    draggable: false,
    resizable: false,
    closeOnEscape: true,
    dialogClass: 'wp-dialog awebooking-dialog',
    position: { my: 'center', at: 'center center-15%', of: window },
  })

  $(window).on('resize', debounce(() => {
    $dialog.dialog('option', 'position', { my: 'center', at: 'center center-15%', of: window })
  }, 150))

  return $dialog
}

created() {
      this.fetchUserData();
      this.clearSuccessMessage = debounce(this.clearSuccessMessage, debounceMilliseconds);
    },

<span>
            
            <span>
              {light.name}
            </span>
          </span>
          
        
      
    )
  }
}

_registerMediaQueryListeners() {
    this._onMediaChange = debounce(this.onMediaQueryChange.bind(this), 50);
    Object.keys(BaseComponent.queries).forEach((k) => {
      BaseComponent.queries[k].addListener(this._onMediaChange);
    });
  }