i have a component which update the backend after an action in frontend.I used the componentDidmount() but it fetched half of the data unless i refresh physically. so i decided to use componentDidUpdate() it updated instantly but the problem is that method keeps on calling back-end for data in every second it don't want that . i want the back end to be called after an action,then update the front-end is there any react life cycle method apart from componentDidMount() or componentDidUpdate()
Create a state variable in parent component and update it in every action in which you want to make api calls and pass it as a prop to the current component. Then you can make api calls in componentWillRecieveProps of child component by checking value of same variable in nextProps param.
Like Gijo said, what's the matter with componentDidMount ? componentDidUpdate is likly unsiutable for API calls.
And it's pretty unlikely that only half the data got fetched. Do you may mean it's only partly updating your UI? Have you a sample repo or a codesandbox where you can showcase your problem?
"but it fetched half of the data unless i refresh physically" what does this mean? It's not clear. componentDidmount can be used for api calling without any problem
Indeed there is, I suggest reading up on this page. It sounds like you could either make use of a lifecycle event, or use Redux to manage your fetching/getting from your backend.
If your app is not very complex, then the lifecycle events will work just fine.
If you intend on expanding your application to a big size, save yourself some time later, learn redux. Redux will take care of the fetching and updating after a user takes an action on the front end.
Word of Caution: Redux is a total pain in the ass to learn, but its well worth it!!
purijit v
Let's look at the component life cycle. From the information that i got, "that method keeps on calling back-end for data in every second", i guess that when action calling, it's update data in store and make the props change, so the life cycle will be "shouldComponentUpdate" -> "componentWillUpdate" -> "render" -> "componentDidUpdate", that why it's looping call the API.
Actually you can fetch API on componentDidMount. Once API callback the data will update to redux store(i guess you use redux right?) and the component that subscribe the data will call "componentWillReceiveProps" so you can put the logic in there.