Introducing Heroku’s React Refetch Operations Console

Summary

Heroku built an operations console for Private Spaces to provide a bird’s-eye view of the platform and detailed investigation of individual spaces. It is a single-page React application backed by a reverse proxy, but its constituent applications originally used jQuery state, mixins, or classic Flux. The team considered Redux, then rejected a global store for server-rendered data because application state was already represented in the URL. React Refetch instead maps component props to remote requests, injects immutable PromiseState props, and recalculates requests when URL parameters change. Its declarative model removes stores, callbacks, actions, reducers, and switch statements while supporting composed and chained requests, periodic refresh, custom headers and methods, lazy loading, and server writes; the team presents it as a simpler alternative when client-side state need not persist.

Takeaways

1. 1

   React Refetch maps component props to requests instead of loading server data into a global Redux or Flux store.

2. 2

   PromiseState represents pending, fulfilled, and rejected request states as one composable prop for rendering.

3. 3

   Changing a URL parameter changes the corresponding prop, recalculates the request, and fetches new data automatically.