React state really slow on a text input

Viewed 155

I have a text input which looks like this:

<input
    placeholder="Search by City, Zip Code, or Name"
    type="text"
    className="searchBar"
    value={this.state.search}
    onChange={(e) => this.setState({ search: e.target.value })}
    onKeyDown={this.keySearch}
></input>

My problem here is let's say I type the word hello. Only after 5 seconds does it show up, and each type I type a letter it takes 5 seconds to show up in the text input. It should be instantaneous.

This is not a browser or computer problem.

On another page on my website a have a text input written similarly to the one above, and it is perfectly fine.

Is this because I have so much state in my constructor?

constructor(props) {
    super(props);
    this.state = {
      shops: [],
      burger: "0",
      pointerEvents: "none",
      width: "30px",
      logout: "none",
      login: "flex",
      loadingMAP: true,
      search: "",
      modal: true,
      addresses: [],
      currentPosition: {},
      userLocation: { lat: 39.0119, lng: -98.4842 },
      zoom: 4,
      loadingMAP2: "block",
      dashboard: "none",
      FetchingData: "block",
      showMap: "flex",
      gridlistDisplay: "flex",
      showmaptext: "Show map",
      MapBoxDisplay: "block",
      loadingShopBusinesses: "none",
      shopbusinessesmapbox: [],
      count: 0,
    };
  }

Or is this another problem?

Please help and thanks.

My full code:

https://gist.github.com/rherugu/510fabd4dd89da080a843f61ec1881e0

0 Answers
Related