0

I've been developing applications with react for a while. I use both the official site of react and examples from other sources. However, I have a question. Why should I setState in the onChange of each input element? This renders the page unnecessary rendering. Let me explain myself with a simple example.

Let's have an input textbox. If the user presses submit after entering the values, we want to show that value on the screen. I can do this example in 2 kinds. But I don't know which one to choose. I will be grateful if you could help me.

In Example 1, the page is rendered only when I click the submit button.

However, in example 2, the situation is different. The page is rendered for each value I enter in the textbox. And when I press submit button, the page is rendered.

When I look on the Internet, it is usually shown as in example 1. It gives the same result in 2 examples. But which one should I prefer?

Example 1 : 

class App extends React.Component {
    state = {
       value: ''
    }

handleSubmit = e => {
     e.preventDefault();
     this.setState({ value: this.textInput.value})
 };

render() {
  return (
    <div>
      <h1>React Ref - Callback Ref</h1>
      <h3>Value: {this.state.value}</h3>
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={e => this.textInput = e} />
        <button>Submit</button>
      </form>
    </div>
  );
 }
}
ReactDOM.render(<App />, document.getElementById("root"));

Example 2 : 

class App extends React.Component {
   state = {
     value: ''
   }

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

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

  render() {
    return (
      <div>
        <h1>React Ref - Callback Ref</h1>
        <h3>Value: {this.state.value}</h3>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.onChange} />
          <button>Submit</button>
       </form>
     </div>
   );
 }
}

ReactDOM.render(<App />, document.getElementById("root"));
omerstack
  • 535
  • 9
  • 23
  • React is smart enough to render only the parts that needs to be re-rendered, so the entire page is not rendering on every input change, only the input (you can visualize that with the react chrome extension). Therefor, in my opinion, I think that the second option is the way to go. Let React do the magic for you. – AfikDeri Nov 03 '19 at 20:28
  • React nice. However, if I have a big example, I think it would be better not to render the page over and over. React wants me to split pages into small components. If he was as smart as you say, I would put all the components in one place. Then when the state changed it just changed the corresponding place. I think that's a wrong sentence:React is smart enough to render only the parts that needs to be re-rendered. React can do this if you can break the page into smaller pieces. But that's my idea. – omerstack Nov 03 '19 at 20:57
  • See this stackoverflow link https://stackoverflow.com/questions/52553251/onchange-or-onblur-to-change-the-state-in-reactjs – dorriz Nov 04 '19 at 13:42

0 Answers0