TanStack Query VS Recoil

@tanstack/react-query

A common convention I've seen is using T at the start of a type parameter, [1] for example. TKey, TData, TError, TSuccessCallback, etc. I always liked T at the end, but I've not seen that as often.

[1] https://github.com/TanStack/query/blob/59a6d3df3035d6effeaed...

Tables are most commonly used to render database query results — in modern times, the output of an ORM. In this post, I'll introduce a way of connecting Prisma - the most popular TypeScript ORM, to React Table, with the help of React Query and ZenStack. You'll be amazed by how little code you need to write to render a full-fledged table UI.

I was interested in how nested React and TanStack useSuspenseQuery worked together. The small app below is a visualization of various combinations of and TanStack Query.

To ensure that we get the best TanStack Query experience possible we are also encouraged to share feedback and participate in the discussion on GitHub, which you can check out here!

I trust you found this information beneficial. For further details, please refer to the conversation on this GitHub issue here

Tanstack - Tanstack has evolved to an entire ecosystem consisting of the famous Tanstack (or React) Query, Tanstack Table, now also Tanstack Router and Tanstack Form. It started with Tanstack Query, which adopted Nx and Nx Cloud. Zack talked about this collab with Dominik, and we also had Dominik on our Nx live stream. Now, all the above-mentioned Tanstack libs have adopted Nx, and there's more coming.

"I’m building SQLSync because I want to make client-side applications easier to build without us having to reinvent the wheel each time."

Kinda ironic no?

Anyway, since the article is also about React, I can't recommend enough React Query [1] if you don't want to worry about caching data to reduce calls to the database and managing/refreshing stale data. It simplified so much my job.

[1] https://tanstack.com/query

Recoil Documentation

There is also one more library that is also a popular option for state management. The React Recoil.

Atomic state management solutions, like Recoil or Jotai, break down state into small, reusable units called atoms. It's reducing unnecessary re-renders by allowing components to subscribe only to the specific pieces of state they need. When a state update occurs, only the components that depend on that particular atom will re-render, rather than triggering a re-render of the entire component tree or large sections of it. It's so easy and comfortable to user, I remember the first time I used it I thought to myself "Wow! that's the way it should be done!" basically if you understood react's useState hook you'll understand how to use these libraries.

Recoil provides a way to manage the global state in React applications. It's an alternative to other state management solutions and integrates seamlessly with the React ecosystem.

4. Recoil 🌟

Atom-based: splits states into tiny pieces of data called atoms, which can be written to and read from using React hooks. In this group, we have Recoil and Jotai.

recoil -> Designed to solve a specific problem. Not good for all use cases. Understand it first! You can learn more about it here.

Recoil Official Website

Recoil 🌀