reactjs - How can I throttle the setState in React? -


  1. there's searchbar component change whole component state, whole re-render leads child component playerlistwithquery re-render new state well.

  2. there's playerlistwithquery component query graphql server base on search content passed component

the problem don't wanna execute query have change value of input instantly, how can solve issue.

import playerlistwithquery './playerlistwithquery.js' class whole extends component {   constructor(props) {     super(props);     this.state = {       searchcontent: '',     };   }   handlechange = val => {     this.setstate({       searchcontent: val,     });   };    render() {     return (       <div>         <searchbar           placeholder="id"           onchange={this.handlechange}           value={this.state.searchcontent}         />         <playerlistwithquery searchcontent={this.state.searchcontent} {...this.props} />       </div>     );   } }  export default whole; 

// playerlistwithquery.js

const playerlistwithquery = graphql(query_single_player, {   options: props => ({     fetchpolicy: 'network-only',     variables: {       id: props.searchcontent,     },   }), })(playerlist);  export default playerlistwithquery; 

i using lodash's debounce same thing. or can implement debounce function (credit)

// returns function, that, long continues invoked, not  // triggered. function called after stops being called  // n milliseconds. if `immediate` passed, trigger function on  // leading edge, instead of trailing.  function debounce(func, wait, immediate) {  	var timeout;  	return function() {  		var context = this, args = arguments;  		var later = function() {  			timeout = null;  			if (!immediate) func.apply(context, args);  		};  		var callnow = immediate && !timeout;  		cleartimeout(timeout);  		timeout = settimeout(later, wait);  		if (callnow) func.apply(context, args);  	};  };


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -