Data Fetching in React and Solid
Using Suspense, ErrorBoundary, and useTransition.
This is a comparison of data fetching in React and Solid.
Note: This uses unreleased React features versions. The way the React code works is how one could use plain React to do data fetching once these features are released. React data fetching libraries like React Query and SWR are starting to support these features, so they may end up working similarly. Relay has already fully embraced these features.
In these examples
fetchPokemon is a function that returns a
Promise of a list of pokemon from pokeapi.
- It takes in a page offset.
- It delays API responses by
- It errors every 3rd request.
With this function we can easily test our pagination, our loading states, and our error states.
I was surprised by the similarity of data fetching in React and Solid. Solid is clearly inspired by React's work in this area.
Both React and Solid can use:
Suspense- To fetch data in a subtree before rendering.
ErrorBoundary- To catch errors in a subtree.
useTransition- To display old data while fetching new data.
I wanted to include Svelte in this comparison, but Svelte does not officially include these primitives.
ErrorBoundary kind of exists,
Suspense is difficult, and
useTransition is unexplored.
- React uses 4 libraries:
react-error-boundary- Not strictly needed, but I didn't want to include any class components.
react-cache- Currently unstable and built from source. It memoizes based on the key given to
fetchPokemon, which made retrying the
fetchPokemonfunction somewhat more complicated.
- Solid uses only
- React uses 4 libraries:
- Solid and React may differ significantly in how they work, but their public APIs and usage are very similar.
- Bundle size:
- Solid's output is about 1/10 the size of React's in this use case.
- Solid takes 60% less time to build (likely because of pulling in less code).
- Performance: I can't easily make a performance comparison based off this simple demo (aside from load time, which is just based on bundle size). Solid is generally considered more peformant (benchmarks).
Recently I've been using Relay with
It's been interesting seeing how much code goes away when you have good patterns for handling networking. The performance and UX ends up being great too.
It makes me optimistic for Solid that these patterns are all supported, so something like Relay would be possible in Solid.
It does seem the development of React is more cautious than Solid.
React has not formally released
Suspense for data fetching and
useTransition (Concurrent Mode) yet.
Solid, which is inspired by these APIs, has included and documented them.
It's great if these APIs end up being flexible enough, but if significant changes need to be made Solid's approach will result in more churn.
I have no conclusion either way in terms of which framework you should use. Solid and React both have very good patterns for data fetching.
The React example uses these versions:
- This is built from source.
Tweet about this post and it will show here.