Reasons and solutions for the failure of React event throttling effect

Reasons and solutions for the failure of React event throttling effect

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:
  • How to introduce scss into react project
  • How to introduce Angular components in React
  • React introduces container components and display components to Vue
  • React internationalization react-intl usage
  • React Synthetic Events Explained
  • A brief comparison of Props in React
  • Detailed explanation of the solution for migrating antd+react projects to vite
  • React implementation example using Amap (react-amap)
  • A brief introduction to React

<<:  Examples of optimization techniques for slow query efficiency in MySQL IN statements

>>:  Explanation of Linux kernel optimization configuration for high-concurrency nginx server

Blog    

Recommend

How to add sudo permissions to a user in Linux environment

sudo configuration file The default configuration...

Details of MutationObServer monitoring DOM elements in JavaScript

1. Basic Use It can be instantiated through the M...

26 Commonly Forgotten CSS Tips

This is a collection of commonly used but easily ...

How to use Docker+DockerCompose to encapsulate web applications

Table of contents Technology Stack Backend build ...

How to install MySQL and Redis in Docker

This article is based on the CentOS 7.3 system en...

Detailed installation tutorial of mysql 5.7.11 under Win7 system

Operating system: Win7 64-bit Ultimate Edition My...

How to uninstall MySQL 8.0 version under Linux

1. Shut down MySQL [root@localhost /]# service my...

Analysis of the HTML writing style and reasons of experienced people

1. Navigation: Unordered List vs. Other Label Ele...

Detailed explanation of CSS3 Flex elastic layout example code

1. Basic Concepts //Any container can be specifie...

A detailed explanation of the subtle differences between Readonly and Disabled

Readonly and Disabled both prevent users from chan...

Vue implements a complete process record of a single file component

Table of contents Preface Single file components ...

jQuery+Ajax to achieve simple paging effect

This article shares the specific code of jquery+A...