Ndtyjky

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!

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

 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;