Description
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?