Prevent Componentdidmount From Fetching Data If Already Available From Server-side

ComponentDidMount() is triggered when the component is mounted, including when it is hydrated following server-side rendering. One of the solutions I found online is checking wheth

Solution 1:

I have found an alternative solution. In my Redux store I keep the URL of the current page. Therefore on navigation, I am able to do the following:

componentDidMount() {
  const { url, match } = this.props;
  if (url !== match.url) {
    fetchData(match.path);
  }
}

Solution 2:

Just use a boolean variable in the store, I just use one called "done", when the server fetch the data it set the variable to true, in the component in compoponentDidMount just check if the variable is true, if is, then dont fetch the data, like this:

componentDidMount() {
  if(!this.props.done)
    this.props.fetchData();
}