react inner component's state change don't smooth - reactjs

Question

I'm trying to control inputs with state.
But I'm having a problem with this case which input keep losing it's focus when I hit the keyboard.
See picture below:
https://codesandbox.io/s/how-to-solve-this-7kwj6
export default class App extends React.Component {
constructor(props) {
super(props);
this.onBchange = this.onBchange.bind(this);
}
state = {
a: true,
b: "",
c: ""
};
onBchange(e) {
const thisClass = this;
return (async function() {
await thisClass.setState({ b: e.target.value });
console.log(thisClass.state.b);
})();
}
onCchange = e => {
this.setState({ c: e.target.value });
};
render() {
// this cause problem why?
const Test = ({ b, c, onBchange, onCchange }) => (
<Fragment>
<span>B: </span>
<input value={b} onChange={onBchange} />
<span>C: </span>
<input value={c} onChange={onCchange} />
</Fragment>
);
return (
<div className="App">
{this.state.a && (
<Test
b={this.state.b}
c={this.state.c}
onBchange={this.onBchange}
onCchange={this.onCchange}
/>
)}
</div>
);
}
}
Please let me know if you need more info about this.
Any ideas?

Answer 1

Your app is rerendering those elements on each change because each keystroke causes new props to be passed to <Test/> within your App's render method.
Notice that changing the return method in render to this stops the issue:
<div className="App">
<span>B: </span>
<input value={this.state.b} onChange={this.onBchange} />
<span>C: </span>
<input value={this.state.c} onChange={this.onCchange} />
{/* {this.state.a && (
<Test
b={this.state.b}
c={this.state.c}
onBchange={this.onBchange}
onCchange={this.onCchange}
/>
)} */}
</div>