What are ways to increase the speed of the fetch API?

[Mr-Ingram]

The fetch, at least for me, is very slow when I call it. I use it to display current data and when someone does something in the front-end, it re fetches the data. It also updates the back-end, but the response is slow when retrieving that data. I initially call the api with componentDidUpdate:

`componentDidUpdate(prevProps, prevState) {
  if (!prevState.dataSource) {
fetch(`https://www.example.com/React/profile.php?username=${this.state.username}` , {
       method: 'GET',
       headers: {
         'Accept': 'application/json',
         'Content-Type': 'application/json',
       }

      })
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({
            isLoading: false,
            dataSource: responseJson,
            user_image:  responseJson[0].user_images.map(item => ({ ...item, progress: new Animated.Value(0), unprogress: new Animated.Value(1) }))
            },function() {
            });
        })
        .catch((error) => {
          //console.error(error);
        });`

I mapped the progress and unprogress to give each animation a unique value. So that all animations will not play, but the correct one with the id does.

When a user "likes" something, it updates the back-end and the way I handle the front end is to fetch the same data again.

anim_like = (item) => {
          //console.log(item.likes);
          Animated.timing(item.progress, {
            toValue: 1,
            duration: 1500,
            easing: Easing.linear,

  }).start();
  fetch(`https://www.example.com/React/user-like.php?username=${this.state.username}`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    post_id : item.id,

  })

  }).then((response) => response.json())
      .then((responseJson) => {
        this.forceUpdateHandler();


      }).catch((error) => {
      
      });

}

anim_unlike = (item) => {
          //console.log(item.likes);
          Animated.timing(item.unprogress, {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear,
            useNativeDriver: true
  }).reset();
  fetch(`https://www.example.com/React/user-unlike.php?username=${this.state.username}`, {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    post_id : item.id,

  })

  }).then((response) => response.json())
      .then((responseJson) => {
        this.forceUpdateHandler();


      }).catch((error) => {

      });

}

this.forceUpdateHandler() is basically the same fetch in the componentDidUpdate() inorder to update the front-end. In my MySQL Query when I limit my data to no more than 5, the fetch times are quick. But any more than that it just slow. What can I do to speed this up?

[react-native-bot]

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

Please make use of the bug report template to let us know about a reproducible bug or regression in the core React Native library.

If you'd like to propose a change or discuss a feature request, there is a repository dedicated to Discussions and Proposals you may use for this purpose.