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

Well, that's how you implement controlled input elements in React.

However, if performance is a major concern of yours, you could either isolate your input element in a separate stateful component, hence only triggering a re-render on itself and not on your entire app.

So something like:

class App extends Component {    
  render() {
    return (
      

        ...
        
        ...
      
    );
  }
}


class MyInput extends Component {
  constructor() {
    super();
    this.state = {value: ""};
  }

  update = (e) => {
    this.setState({value: e.target.value});
  }

  render() {
    return (
      
    );
  }
}

---

Alternatively, you could just use an uncontrolled input element. For example:

class App extends Component {    
  render() {
    return (
      

        ...
        
        ...
      
    );
  }
}

Though, note that controlled inputs are generally recommended.