January 6, 2020
Apollo or Recoil?

Apollo or Recoil?

Apollo or Recoil?

January 6, 2020

Which should I choose, Apollo or Recoil? Well, the answer depends on your unique use case. But, I’ve taken some time to break down what I feel are the pros and cons of each.

Apollo Client

The first time using AC (Apollo Client) I was incredibly impressed, and this impression has yet to change. As the docs say:

“Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. Use it to fetch, cache, and modify application data, all while automatically updating your UI.”

And they deliver!

The good

  • GraphQL: If you’re already using GraphQL it’s a no-brainer. They take care of "remote state" incredibly well. Initial queries and mutations are easy to get set up.
  • Fetching & Normalization: They offer a powerful API, and in recent versions, they improved support for tree-shaking, and implemented React Hooks (game changer). SSR or "server-side rendering" in the grand scheme of setup and SSR is easy too.
  • Comprehensive: There are several ways to Query, Fetch and interact with the data. React Hooks were a blessing and created some clean and powerful abstractions. Testing is included and the docs aren’t half bad.

The rest...

  • Requirements: It’s built around (requires) GraphQL, but is that a bad thing?
  • Testing: By no means is it bad, just involved. However, if you are switching from something like Redux, it’s just a new set of boilerplate to get specs running.

RecoilJS

Do we need “another” state management solution? That is the question I asked myself. However, after watching the overview video ideas began to flow and a growing appreciation was seeded.

The good

  • Performance: For highly interactive UI’s this is a no-brainer. The “atoms” as they are referred to are incredibly powerful and a breeze to set up. For "client state" they simply blog Apollo Client (3.0 included) out of the water.
  • Setup: Adding RecoilJS to an application is painless. Add the RecoilRoot, and build out the atoms, selectors, and viola. Off to the races!

The rest...

Honestly, I don’t have any gripes. It’s worth noting that it’s still “experimental” but I’d love to see it open-sourced with some help from its creators. 

Conclusion

If you have a complex, highly interactive UI full of “client state” then Recoil is the way to go. It makes rendering these UI's easier and more performant. 

If data fetching is core to your application and you can get away with setting up a few contexts then Apollo Client + GraphQL for the win. 

Lastly, maybe you have some wiggle room in terms of overall vendor size and want to run with both. RecoilJS weighs in at 11.2kb and Apollo Client at 15.6kb for a "state management" solution that's not too bad.