Data Fetching in React and Solid

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 500ms.
• 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

Solid

Comparison

• Dependencies:
  • React uses 4 libraries:
    • react
    • react-dom
    • 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 fetchPokemon function somewhat more complicated.
  • Solid uses only solid-js.
• Solid and React may differ significantly in how they work, but their public APIs and usage are very similar.
• Bundle size:
  • React:

  • Solid:

  • 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).

Conclusion

Recently I've been using Relay with Suspense, ErrorBoundary, and useTransition. 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.