Reasons and solutions for the failure of React event throttling effect

The problem here is:
Solution 1:
Solution 2: Assign initialization in the constructor
Summary of mining pits:

Today, when I was working on a react project, I throttled an input onKeyDown event, but the throttling effect failed.

Problem code:

render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.throttle(this.handleKeyDown)}/>
      </div>
    )
  }

throttle = (fn) => {
    let valid = true
    const context = this

    return function() {
      if (!valid) return
      valid = false

      const args = arguments

      fn.apply(context, args)

      setTimeout(() => {
        valid = true
      }, 1000);
    }
  }

  handleKeyDown = (e) => {
    let { value } = e.target
    const keyCode = e.keyCode

    if (keyCode !== 13) return

    if (!value.trim()) return
    
    // Send search this.props.search(value)
  }

The problem here is:

this.props.search(value) in handleKeyDown() method
The component props are refreshed, triggering the react update flow lifecycle. Re-executed render();

In this way, the throttle() method will be re-executed;

throttle = (fn) => {
    console.log('%c throttle initialization', 'color: red');
    let valid = true
    const context = this

    return function() {
      if (!valid) return
      valid = false

      const args = arguments

      fn.apply(context, args)

      setTimeout(() => {
        valid = true
      }, 1000);
    }
  }

If you add printing to the code, you will see throttle initialization print multiple lines in the console;

Solution 1:

Put the throttling initialization position into the event function assignment

render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/>
      </div>
    )
  }

handleKeyDown = this.throttle((e) => {
    let { value } = e.target
    const keyCode = e.keyCode

    if (keyCode !== 13) return

    if (!value.trim()) return
    
    // Send search this.props.search(value)
  })

Solution 2: Assign initialization in the constructor

render() {
    return (
      <div className="search-bar">
        <input className="search-input" type="text" placeholder="Please enter the user name to search (English)" onKeyDown={this.handleKeyDown}/>
      </div>
    )
  }

constructor(props) {
    super(props)
    this.handleKeyDown = this.throttle(this.handleSearch)
  }

  handleSearch = (e) => {
    let { value } = e.target
    const keyCode = e.keyCode

    if (keyCode !== 13) return

    if (!value.trim()) return
    
    // Send search this.props.search(value)
  }

Summary of mining pits:

To better understand the triggering mechanism of the react life cycle

The above is the detailed content of the reasons and solutions for the failure of React event throttling effect. For more information about the failure of React event throttling effect, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in: