componentDidUpdate keeps getting called - reactjs

Question

componentDidUpdate () {
this.showPosts();
}
showPosts = async () => {
var userID = await AsyncStorage.getItem('userID');
fetch(strings.baseUri+"getPostWithUserID", {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"user_id": userID
})
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.setState({
data: responseJson.data,
imageSrc: responseJson.data.imgSrc,
});
}
else {
this.setState({show: false});
}
})
}
I'm calling showPosts function from componentDidUpdate to show my updated Flatlist. But componentDidUpdate keeps getting called. Should I use shouldComponentUpdate ?
========================== UPDATED CODE ============================
This is from Home Screen
async componentDidMount () {
this._isMounted = true;
await this.showPosts();
}
componentDidUpdate () {
this.showPosts();
}
showPosts = async () => {
try {
var userID = await AsyncStorage.getItem('userID');
fetch(strings.baseUri+"getPostWithUserID", {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
"user_id": userID
})
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.setState({
data: responseJson.data,
imageSrc: responseJson.data.imgSrc,
});
}
else {
if (this._isMounted) {
this.setState({show: false});
}
}
})
.catch((error) => {
console.error(error);
});
}
catch (err) {
console.warn(err);
}
}
componentWillUnmount () {
this._isMounted = false;
}
This is Image Descrpiption screen from where I'll navigate back to Home Screen
postData = async () => {
this.setState({loading: true});
var location = await AsyncStorage.getItem('location');
var path = await AsyncStorage.getItem('path');
var post_type = await AsyncStorage.getItem('post_type');
var userId = await AsyncStorage.getItem('userID');
var newPath = path.split("/");
var imageName = newPath[newPath.length-1];
const formData = new FormData();
var media = {
uri: path,
name: imageName,
type: 'image/jpg',
};
formData.append('image', media);
formData.append('user', userId);
formData.append('description',this.state.description);
formData.append('location',"usa");
formData.append('post_type',post_type);
formData.append('userprofile_picture',imageName);
fetch(strings.baseUri+"addPosts",{
method: 'POST',
headers: { 'Content-Type': 'multipart/form-data' },
body: formData,
})
.then((response) => response.json())
.then((responseJson) => {
let jsonObj = JSON.parse(JSON.stringify(responseJson));
if (jsonObj.status=="true") {
this.props.navigation.popToTop()
&& this.props.navigation.navigate('Home'); // This navigates me to the HomeScreen
}
else {
}
})
.catch((error) => {
console.error(error);
});
}

Answer 1

ComponentDidUpdate is an update LifeCycle Hook, this will get triggered when there is something is changed in the component State or Props.
Coming to your code:
You are calling a handler showPosts to setState, that will again trigger the update lifecycle.
This will lead to an infinite loop.
Solution
If you want to load the posts only in the first time, then move to Creational Life Cycle hook ( componentDidMount ).
componentDidMount() { // This just gets called once in creational lifecycle //
this.showPosts(); }
if you want this to always have the latest data, then there are two ways
Updating component is in the same component tree branch:, In this case , it's easy to achieve this you can pass the state from the updating component down to child component has props, your job is done OR if they are siblings then do a level up you can move the state one level up and have it coming in has props.
Updating component is in the different component tree branch: I recommend using REDUX, this is the main use of redux.
shouldComponentUpdate Yes definitely you can use this to verify the data and the load if needed, but be careful by using this your components update depends on the code in this.
Please check https://reactjs.org/docs/react-component.html#shouldcomponentupdate

Answer 2

You just need to call this in that way if you do in ComponentDidUpdate and update state in the method call by ComponentDidUpdate then a infinite loop start.
componentDidMount () {
this.showPosts();
}
================EDITED=======================
If you want to use only ComponentDidUpdate then you can use it like.
componentDidUpdate(prevProps, prevState) {
// only update if not match I don't know what's your data is so add a
// simple check like we use for strings.
if (prevState.data !== this.state.data) {
this.showPosts();
}
}
Just use prevState to match.

Answer 3

You can do this too
Common parent component
Create a new component say Posts.
import React, { Component } from 'react';
import HomeScreen from '../../HomeScreen';
import ImageDescription from '../../ImageDescription';
class Posts extends Component {
constructor(){
super();
this.state = {
dataEditted: false;
}
}
newDataHandler = () =>{
this.setState({dataEditted:true}); // this is flag to identify that there is change in data //
}
resetnewDataHandler = () =>{
this.setState({dataEditted:false}); // this handler is used to reset the falg back to initial //
}
render () {
const homeScreen = <HomeScreen editted={this.state.editted} resetHandler={this.resetnewDataHandler}/>;
const imageDescription = <ImageDescription newdataHandler={this.resetnewDataHandler}/>
return (
<div>
{homeScreen}
{imageDescription}
</div>
)
}
}
export default Posts;
This component is going to serve as a bridge to move data between.
Whenever there is fresh data in ImageDescription Component use the newDataHandler passed has props to update the common parent, then the dataEditted will be updated and passed has props to homeScreen Component, now in this componentDidUpdate of homeScreen check whether its true, then call this.showPosts() and also call resetnewDataHandler.

Answer 4

componentDidUpdate() is called when the state is changed (calling setState()) and if you do it inside the showPosts that is also inside the componentDidUpdate() you are creating an infinite state updating.