React Native: setState delay

Question

I'm trying to set a state from a fetch response, but it seems it takes a while to update the state.

What I learned is that fetch is quick until it comes to setState. There, it takes about 3 seconds to update.

fetch(ENDPOINT)
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({product : responseJson.product, related: responseJson.related, ready: true});
      })
      .catch((error) => {
        console.error(error);
    }).done();

Any tips?

Thanks

How did you measure 3 sec delay ? You need to measure the difference between two "then" conditions. — suman j, Jan 02 '17 at 17:24

score 7 · Accepted Answer · edited May 23 '17 at 12:13

7

setState is asynchronous.

From the docs of react itself if you see :-

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.

You can read more about this in the documentation.

Also, you can check something similar here

edited May 23 '17 at 12:13

Community

1
1

answered Jan 02 '17 at 18:34

Harkirat Saluja

7,768
5
47
73

OK, I think i'm getting there. It seems my reactClasses are getting slow to render. Any tip? – Lucas Veiga Jan 02 '17 at 18:49

React Native: setState delay

1 Answers1