Does React need to Re-Render Textbox at its OnChange Event - reactjs

Question

I've been working on a React project recently. I've gotten to the point where I know that when typing in a textbox React updates its UI state and re-renders the textbox and brings focus back to it. The whole process happens so fast that user doesn't notice that textbox has been re-rendered while typing.
Now here my question is that why doesn't React just update UI state of textbox at onChange event and doesn't re-render the textbox and hence doesn't require to put focus on it.
Why isn't the re-render process saved in this, or other similar, cases. What were we missing if we dont re-render?

Answer 1

React doesn't re-render elements in the sense that it creates a new one which replaces the old. In your example it simply updates the value.
React will only ever remove an element if it was replaced with one of another type. If it's of the same type, it will simply update the missing or altered attributes. You should have a read about Reacts Reconciliation on the official docs.
Elements Of Different Types
Whenever the root elements have different types, React will tear down the old tree and build the new tree from scratch. Going from <a> to <img>, or from <Article> to <Comment>, or from <Button> to <div> - any of those will lead to a full rebuild.
DOM Elements Of The Same Type
When comparing two React DOM elements of the same type, React looks at the attributes of both, keeps the same underlying DOM node, and only updates the changed attributes.
Demo
I have prepared a demo below. It's a combination of React with jQuery just to demonstrate this.
When you type some text into the textarea, the state is updated and the element value is updated to show what you typed. This is done with React.
The button is outside the React scope completely. There is an eventlistener written with jQuery which randomly alters the elements css background color.
If the component was replaced each time React updated the state value of the component (i.e when we type inside the textarea), the background color would be lost since we would be talking about a newly created DOM element.
However, as you can see, this is not the case -- the background stays.
class Greeting extends React.Component {
constructor() {
super();
this.state = {txt: ""};
}
updateTextarea = (e) => {
this.setState({txt: e.target.value});
}
render() {
return <textarea onChange={this.updateTextarea}>{this.state.txt}</textarea>;
}
}
ReactDOM.render(<Greeting />, document.getElementById('app'));
$("#btn").on("click", function() {
var colors = ["red", "green", "lightblue", "grey", "pink", "orange"];
var rand = Math.floor(Math.random() * 6);
$("#app textarea").css("background", colors[rand]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<button id="btn">Randomize color!</button>