Reactjs initial ajax call from initial page load using chrome extremely slow

Question

I'm dealing with a very slow ajax get request that appears only on page load using chrome. This implies I'm not loading something correctly or my API is unresponsive for the first few requests.

However: 1. On initial page load using safari I do not see this issue 2. On initial page load using chrome-incognito I do not see this issue

What can I do to fix this?

I have the following reactjs class:

var helloWorld = React.createClass({
  getInitialState: function () {
     return {items: []};
  },

  findByName: function ( event, action ) {
    payload = {'q':event.target.value}
    $.ajax({
      data: payload,
      url: '//127.0.0.1:3000/api/search',
      type: "GET",
      dataType: "json",
      success: function ( data ) {
        // console.log(data.results)
        this.setState({ items: data.results });
      }.bind(this)
    });

  },

    render: function() {
        return (
    <div className="container">
        <div className="row">

          <div className="col-md-12">
            <div className="input-group matter-index-top">
              <input type="text" className="form-control" onChange={this.findByName} placeholder="Search plant name" />
            </div>
          </div>

        </div>
        <hr />
        <ItemList items={ this.state.items } />
      </div>
            )
    }
});

React.render(
    React.createElement(helloWorld, null),
    document.getElementById('content')
)

On initial page load using chrome requests take forever and stall for ~ 10-20 seconds:

Subsequent requests go through as fast as I can type:

This issue does not affect Chrome Incognito when I reload the page or Safari:

Finally here is a look at the headers while the request is stalled:

Do you have any chrom extensions enabled? – BradByte Aug 25 '15 at 20:11 — BradByte, Aug 25 '15 at 20:11
good question! I disabled every single extension – JZ. Aug 25 '15 at 20:13 — JZ., Aug 25 '15 at 20:13

score 1 · Answer 1 · edited May 23 '17 at 12:24

The problems above are signs of a slow API. It had nothing to do with React, the request, or anything with my app.

The reason for the above problems was because the API server running locally was not threaded. Starting my Flask server with this flag resolved hours of trouble:

./run.py runserver --port=3000 --threaded

For more information see this post: Slow Requests on Local Flask Server

Reactjs initial ajax call from initial page load using chrome extremely slow

1 Answers1