Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Debouncing Events
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("⚛️"));
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("⚛️"));
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("⚛️"));
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("⚛️"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment