title: "Synchronous XMLHttpRequest on the main thread is deprecated" error after authentication and redirect in reactjs
body: <p>I'm working on a react application wherein a user can register, and upon registering, the user would then be redirected to the home page.</p>
  
  <p>Below is how I currently have my code.</p>
  
  <p>The problem is after the user submits the registration form and the registration is successful, once the user is redirected I get the following warning message in the browser console:</p>
  
  <pre><code>[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
  </code></pre>
  
  <p>I tried two ways of redirecting, using <code>history.push</code> (passed as a prop from the <code>Route</code> component), and using the <code>Redirect</code> component once I update the state and <code>RegisterForm</code> is rerendered. The warning message is displayed regardless of which method I use.</p>
  
  <p>My question is what am I doing wrong, and how do I fix this problem?</p>
  
  <p>I've seen a lot of other questions regarding this issue, but they mostly just describe why this warning is getting displayed, but not necessarily how to fix the issue causing the warning.</p>
  
  <pre><code>class RegisterForm extends React.Component {
      constructor(props) {
          super(props);
  
          this.state = {
              loggedIn: false,
              username: '',
              email: '',
              password: '',
              passwordConfirmation: ''
          };
  
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(event) {
          const target = event.target;
          const name = target.name;
          const value = target.value;
  
          this.setState({
              [name]: value
          });
      }
  
      handleSubmit(event) {
          axios.post('/users/register', {
              email: this.state.email,
              username: this.state.username,
              password: this.state.password,
              password_confirmation: this.state.passwordConfirmation,
          })
          .then(response =&gt; {
              // const history = this.props.history;
              // history.push('/');
  
              this.setState({
                  loggedIn: response.data.authenticated
              });
          })
          .catch(error =&gt; {
              console.log('Error registering user.');
          });
  
          event.preventDefault();
      }
  
      render() {
          const loggedIn = this.state.loggedIn;
  
          if (loggedIn) {
              return &lt;Redirect push to="/" /&gt;
          }
  
          return (
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;div&gt;
                      &lt;label htmlFor="email"&gt;Email:&lt;/label&gt;
                      &lt;input type="email" id="email" name="email" value={this.state.email} onChange={this.handleChange} /&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;label htmlFor="username"&gt;Username:&lt;/label&gt;
                      &lt;input type="text" id="username" name="username" minLength="3" maxLength="31" value={this.state.username} onChange={this.handleChange} /&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;label htmlFor="password"&gt;Password:&lt;/label&gt;
                      &lt;input type="password" id="password" name="password" minLength="6" value={this.state.password} onChange={this.handleChange} /&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;label htmlFor="passwordConfirmation"&gt;Confirm Password:&lt;/label&gt;
                      &lt;input type="password" id="passwordConfirmation" name="passwordConfirmation" minLength="6" value={this.state.passwordConfirmation} onChange={this.handleChange} /&gt;
                  &lt;/div&gt;
  
                  &lt;button type="submit"&gt;Register&lt;/button&gt;
              &lt;/form&gt;
          );
      }
  }
  
  function Register(props) {
      return (
          &lt;div&gt;
              &lt;h1&gt;Register&lt;/h1&gt;
              &lt;RegisterForm history={props.history} /&gt;
          &lt;/div&gt;
      );
  }
  
  function App() {
      return (
          &lt;div&gt;
              &lt;Router&gt;
                  &lt;Header /&gt;
  
                  &lt;Switch&gt;
                      &lt;Route path="/register" component={Register} /&gt;
                      &lt;Route path="/" component={Home} /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          &lt;/div&gt;
      );
  }
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById('app'));
  </code></pre>