Hot module reloading (HMR) can greatly improve the local development experience by enabling changes to be reflected without requiring that the local server be restarted. However, you may encounter issues seeing content updates if it is not configured properly in Gatsby.

Gatsby uses different data source plugins that load data from the CMS when the site is being built. If you are running Gatsby in develop mode, you'd need to restart the local server in order to refetch new data. On the other hand, Stackbit monitors for content updates and fetches data automatically without needing to restart Gatsby. The pages are rebuilt and the client is notified by a socket message that the data is changed resulting in the change being rerendered on screen.

HMR enables this to happen automatically, but it can be broken. The most common way is when the render process is blocked by defining the wrong condition in the shouldComponentUpdate implementation. To avoid this, if you need to define this method, make sure to check if the component children have changed as well, otherwise they will not be re-rendered with new data.

Below is an example of a broken implementation that doesn’t check the children's status:

shouldComponentUpdate(nextProps, nextState){
  return this.props.something !== nextProps.something; //children will not be checked for update && updated
}

And below is the implementation that will check the children's status and update properly:

shouldComponentUpdate(nextProps, nextState){
  return this.props.something !== nextProps.something || this.props.children !== nextProps.children; //children would be checked as well
}

Ready to get started?