How to use

debounce

function

in

lodash

debounce((value, { index }) => {

    if (this.state.VGridLine) {
      this.setState({ crosshairValues: [{ x: this.state.data[index].x, y: this.state.data[index].y }] })
    }

  }, 1)

constructor(props) {
  super(props);

  this.schema = yup.object();
  this.state = {
   formData: null,
   changed: false,
  };

  this.changeForm = this.changeForm.bind(this);
  this.preSubmit = this.preSubmit.bind(this);
  this.onInvalidSubmit = this.onInvalidSubmit.bind(this);
  this.debouncedFormChangeHandler = debounce(this.handleFormChange, VALIDATION_DELAY).bind(this);
 }

render() {
    const searchVideo = debounce((term) => this.searchVideo(term), 300);

    return (
      <div>
        <SearchBar onSearch={ (term) => searchVideo(term) }/>
        <VideoDetails video={ this.state.selectedVideo } />
        <VideoList
          onVideoSelect={ (selectedVideo) => this.setState({ selectedVideo })}
          videos={ this.state.videos } />
      </div>
    );
  }

componentWillMount () {
  this.delayedCallback = debounce((value) => {
   kakuna.get(`https://api.pokemontcg.io/v1/cards?name=${value}`).end().then(
    (res) => (this.setState({
     cards: res.body.cards
    })))
  }, 50)
 }

/**
 * Serve the site in watch mode
 */
const serve = (options, flags) => {
 log.info(`Starting local server at http://localhost:${flags.port}`);

 const { srcPath, outputPath } = parseOptions(options);

 build(options);
 server.serve({ path: outputPath, port: flags.port });

 chokidar.watch(srcPath, { ignoreInitial: true }).on(
  'all',
  debounce(() => {
   build(options);
   log.info('Waiting for changes...');
  }, 500)
 );
}

render() {
    const { productFilter } = this.props;
    const handleChangeCategory = debounce(changeCategory, 200);
    return (
      <FormEdit
        mode={mode.FILTER}
        title="Filter"
        form={productFilter}
        onSubmit={applyFilter}
      >
        <Column>
          <ItemEdit
            type={itemType.COMBOBOX}
            field={productFilter.$('category')}
            onChange={handleChangeCategory}
          />
        </Column>
      </FormEdit>
    );        
  }

constructor(props) {
  super(props);

  this.state = {
   search: '',
   page: 1,
   pageSize: 20,
   loaded: false,
   canLoadMore: true,
   area: props.location && props.location.search
    ? props.location.search
        .substring(1, props.location.search.length)
        .split('=')[1]
    : undefined,
   pageSearch: 1,
   pageSizeSearch: 20,
   notSearched: false
  };

  this.handleSearchDebounced = debounce(() => {
   this.setState({
    pageSearch: 1,
    pageSizeSearch: 20,
   },
   () => this.handleLoadMoreUsers(true));
  }, 300);
 }

// To prevent React nullifies the event you must call event.persist()
 // http://stackoverflow.com/questions/35435074/using-debouncer-with-react-event
 // https://facebook.github.io/react/docs/events.html
 debounceEventHandler(...args) {
  const debounced = debounce(...args)
  return function(e) {
   e.persist()
   return debounced(e)
  }
 }

constructor(props) {
  super(props);
  this.setVariables = debounce(this.props.relay.setVariables, 300);
 }

const useDebouncedFn = (
 fn,
 wait = 100,
 options = {
  leading: false,
  trailing: true,
 },
 dependencies,
) => {
 const debounced = debounce(fn, wait, options);

 return useCallback(debounced, dependencies);
}

constructor(props) {
  super(props);
  this._performSearch = debounce(this._performSearch, 500);
 }

constructor(props) {
  super(props);
  this.search = debounce(this.search, 300);
 }

debounce(cb => cb(), 200)

constructor() {
  super();
  this.state = {
   region: {
    latitude: 10.780889,
    longitude: 106.629271,
    latitudeDelta,
    longitudeDelta,
   },
   isPanding: false,
   openModal: false,
  };
  this.onPanDrag = debounce(this.onPanDrag, 1000, {
   leading: true,
   trailing: false,
  });
 }

constructor (props) {
  super(props)
  this.setVariables = debounce(this.props.relay.setVariables, 300)
 }