为什么setTimeout中的输入setState会中断中文IME？

Question

I have a simple controlled input component in React and I am trying to wrap my head around this behavior.

If I do it the normal way, everything works fine and Chinese IME works as expected:

<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    this.setState({ value: event.target.value });
  }}
/>

But if I wrapped a setTimeout or another setState outside, Chinese IME does not work anymore, it seems like it's been interrupted during each setState?

# setTimeout
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    setTimeout(() => {
      this.setState({ value });
    }, 0);
  }}
/>

# another setState
<input
  type="text"
  value={this.state.value}
  onChange={(event) => {
    const value = event.target.value;
    this.setState({ isTyping: true }, () => {
      this.setState({ value });
    });
  }}
/>

I am not looking for the correct way to make Chinese IME work, I just find it very interesting and want to understand what causes this behavior. I sort of understand there's an "update loop" for each setState operation but I am not sure how that would break the Chinese IME. Is this related to event loop and how setTimeout pushes the operation to the back of the queue?

Many thanks!

Answer 1

Try this. You are not recommended to do setTimeout in user input event handler function. Don't use setTimeout of setting state

   handleChange = event = > {
         const value = event.target.value;
         this.setState({ value });
  }

   <input
     type="text"
     value={this.state.value}
   onChange={event => this.handleChange(event)}
  />

Even if it is 0 milliseconds setTimeout will delay setting user input. Check below thread for more details about using setTimeout with zero milliseconds

Answer 2

 I checked your code amd I didn't found any issue on your code. 
 My react version is 16.6 and your code work fine on my machine.

import React from 'react';
class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
          value: ''
      }
   }

   onClick() {
       this.setState({ showLazy: !this.state.showLazy });
   }

   render() {

    return (<div>
              <input
                type="text"
                value={this.state.value}
                onChange={(event) => {
                   const value = event.target.value;
                   this.setState({ isTyping: true }, () => {
                       this.setState({ value });
                   });
               }}
             />
            <input
               type="text"
               value={this.state.value}
               onChange={event => {
                     const value = event.target.value;
                     setTimeout(() => {
                        this.setState({ value })
                     }, 0);
              }}
           />
       </div>)
  }
}

export default AdvanceApp;