React Debouncing Events

index-0-non-debounced.js

import React, { Component } from "react";
import { render } from "react-dom";
import "./index.css";

class Widget 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 = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <Widget /> : null}
      </div>
    );
  }
}

render(<App />, document.getElementById("⚛️"));

index-1-simple-debounce.js

import React, { Component } from "react";
import { render } from "react-dom";
import { debounce } from "lodash";
import "./index.css";

class Widget 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 }));
  }, 1000);
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <Widget /> : null}
      </div>
    );
  }
}

render(<App />, document.getElementById("⚛️"));

index-2-event-obj-debounce-a.js

import React, { Component } from "react";
import { render } from "react-dom";
import { debounce } from "lodash";
import "./index.css";

class Widget extends Component {
  state = { text: "" };
  handleChange = debounce((text) => {
    this.setState({ text });
  }, 500);
  componentWillUmount() {
    this.handleChange.cancel();
  }
  render() {
    return (
      <div>
        <input onChange={e => this.handleChange(e.target.value)} />
        <textarea value={this.state.text} />
      </div>
    );
  }
}

class App extends Component {
  state = { show: true };
  handleToggle = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <Widget /> : null}
      </div>
    );
  }
}

render(<App />, document.getElementById("⚛️"));

index-3-event-obj-debounce-b.js

import React, { Component } from "react";
import { render } from "react-dom";
import { debounce } from "lodash";
import "./index.css";

class Widget extends Component {
  state = { text: "" };
  debounceEvent(...args) {
    this.debouncedEvent = debounce(...args);
    return e => {
      e.persist();
      return this.debouncedEvent(e);
    };
  }
  handleChange = (e) => {
    this.setState({ text: e.target.value });
  };
  componentWillUmount() {
    this.debouncedEvent.cancel(); 
  }
  render() {
    return (
      <div>
        <input onChange={this.debounceEvent(this.handleChange, 500)} />
        <textarea value={this.state.text} />
      </div>
    );
  }
}

class App extends Component {
  state = { show: true };
  handleToggle = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };
  render() {
    return (
      <div>
        <button onClick={this.handleToggle}>Toggle</button>
        {this.state.show ? <Widget /> : null}
      </div>
    );
  }
}

render(<App />, document.getElementById("⚛️"));