avoid constant re-render from “input” or “textarea” in react js

Question

Currently in react js, when I want to bind a text area or an input with a \"state\", I will need to set the onChange method and setState() everytime user type in a single le

Answer 1

You don't need a complicated react solution to this problem, just a little common sense about when to update state. The best way to achieve this is to encapsulate your setState call within a timeout.

class Element extends React.Component {
    onChange = (e) => {
        clearTimeout(this.setStateTimeout)
        this.setStateTimeout = setTimeout(()=> {
            this.setState({inputValue: e.target.value})
        }, 500)
    }
}

This will only set state on your react element a 500ms after the last keystroke and will prevent hammering the element with rerenders as your user is typing.