The future of React is not another state manager

02 Mar, 2018
Xebia Background Header Wave

Dan Abramov demoed awesome UX improvements coming to React, but no new state management approach. There was some confusion that the declarative data fetching shown was somehow an alternative to Redux.
The confusion was mainly caused by an article stating the "Future Fetcher API" has replaced Redux. The article quoted a tweet by Kent C. Dodds that was meant as a joke.

Dan did demo how React will give a better user experience by rendering asynchronously. React will no longer block the main JS thread when doing expensive DOM operations. It can prioritize rendering important updates over less important ones. This means that updates caused by user interactions will be performed before other updates. I recommend watching the demo.
This approach can also be leveraged to suspend rendering when waiting for IO operations. In the talk Dan showed how you can suspend rendering by using Promises inside the render loop. This can look like a new approach to state management, but it was just showing how you can pause rendering in your own code as well.
The code for the demo was using setState to store which movie was clicked.
The data fetching was performed by a regular fetch call. The createFetcher method from ../future was just a way to cache a function that returns a Promise. It also suspends React rendering while the Promise is pending. See this thread for more details on the cache:

Using cached data fetching in React is something you can already do. Using a component like react-promise. Internally react-promise also leverages setState.
[gist id=6fd6662e1e299981b9d35b8169d57cc8]
This is not a full state management approach, just a way to do declarative data fetching. Declarative data fetching gives you a nice abstraction to display the loading, error and response state of an ajax call, but it doesn’t allow you to store user input.
Caching the ajax calls in a global cache is a nice addition to make it possible to reuse the same server data across the application. You could implement this yourself. You could even use the browsers own response caching or use the Cache API inside a service worker. However, it is not something new.
Overall I’m excited about the new UX improvements coming to React. I’m less excited about the bikeshedding regarding state management.


Get in touch with us to learn more about the subject and related solutions

Explore related posts