¿Cómo realizar el antirrebote en ReactJS?

Un evento antirrebote en ReactJS le permitirá llamar a una función que garantiza que una tarea que consume mucho tiempo no se active con tanta frecuencia. Es una función que toma una función como parámetro y envuelve esa función en un cierre y la devuelve para que esta nueva función muestre el comportamiento de «esperar un poco».

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app react-debouncing    

Paso 2: después de crear la carpeta de su proyecto, es decir, reaccionar contra el rebote , muévase a ella con el siguiente comando:

cd react-debouncing

Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

npm install lodash

Estructura del proyecto: Tendrá el siguiente aspecto.

Directorio de proyectos

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React, { Component } from "react";
import { debounce } from "lodash";
  
class WidgetText extends Component {
  
  state = { text: "" };
  
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  
  render() {
    return (
      <div>
        <input onChange={this.handleChange} />
        <textarea value={this.state.text} />
      </div>
    );
  }
}
  
class App extends Component {
  
  state = { show: true };
  
  handleToggle = debounce(() => {
    this.setState(prevState => ({ show: !prevState.show }));
  }, 500);
  
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <WidgetText /> : null}
      </div>
    );
  }
}
  
export default App;

Explicación:

• Tenga una página simple con un botón de alternar, si hacemos clic en él, los campos de entrada desaparecen y hacemos clic nuevamente para recuperar el campo de entrada y si escribimos en el cuadro de entrada, el texto se reflejará inmediatamente en el área de texto a continuación.
• Tenemos un componente React WidgetText, y esencialmente solo tiene el área de entrada y texto y luego el componente de la aplicación en sí tiene el botón de alternar.
• Condicionalmente, si hacemos clic en el botón de alternar, entrará en la captura del controlador, el estado anterior lo mira y muestra bool fuera del estado y lo voltea, por lo que si era cierto, representará el WidgetText si es falso, lo hacemos. no representar el WidgetText.

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: