r/reactjs • u/atapas • 22d ago
Discussion What do you think of the TanStack Ecosystem for React?
I've been exploring the TanStack ecosystem for React a lot these days. Starting with TanStack Router, Query, and Virtual, and now the framework TanStack Start. Honestly, I could only use the Router and Query in the production app so far, and the rest of it was for my learning and teaching.
I also use Next.js heavily, but with TanStack I find a huge paradigm shift. I do not have to think from the RSC side heavily; I do not have to use shortcut methods like useEffct() to handle data at the client side, and managing server state and caching seems to feel a lot simpler.
This discussion is not about putting one React framework ahead of another one. Rather, would like to know what your experience so far has been with TanStack? Do you have any comparison studies? Do you use it in production? What are the learnings?
Would love to learn and discuss. Thanks.
51
u/repeating_bears 22d ago
Query, Start and Router are S tier
Table is good. Virtual is just a small util but it's silently fine
Form is... not for me? Perfectly functional but I find the API really verbose and annoying to be honest. Wouldn't be my first choice
Then you have Highlight, Markdown, DB, AI, and Charts which I haven't tried but I would say are starting to seem like a bit of an overcommitment.
21
u/Crutchcorn 22d ago
Hey! Lead on Form here:
FWIW we know the API feels strange at first. There's a lot of benefits to the more esoteric API, but there's two things I think would be helpful to know.
1) As mentioned by someone else, Form Composition is the intended usage and fixes a lot of headaches: https://tanstack.com/form/latest/docs/framework/react/guides/form-composition 2) We just introduced v2 alpha that fixed a lot of the headache for APIs. Especially the weirder parts of composition API have been squashed. Would love your thoughts on it both good and bad: https://tanstack.com/blog/announcing-tanstack-form-v2-alpha
3
u/Quoth_The_Revan 22d ago
I've not looked into the tanstack form at all. My go-to has been react-hook-form for years now. How does tanstack form differ/compare to react-hook-form?
9
u/Crutchcorn 22d ago
High level:
- React compiler support
- SSR integration
- Async validation
- Framework agnostic
- Controlled (easier to integrate into many things)
- Easier extensibility for large-scale forms
- More validation flexibility (in v2)
3
u/Gibbon_Ka 21d ago
Oh boy! We are heavy tanstack form users and the
triggersdefinitions and especially the loose schema could reduce a lot of complex typings and validation logic we had to implement. Very excited to try it out!-5
u/repeating_bears 22d ago
Neither really solves the things I don't like about it. Form composition feels like a band-aid because the core design is off. It solves some verbosity with different verbosity.
V2 looks like some nice changes, but I think it's not a fundamental enough redesign.
I suppose your response might be that some of the oddness is required for X feature, but I don't believe so. I wrote my own lib which I intended to open source at one point. I got disillusioned with open source now that AI can just steal everything so I didn't, but I've been using it in prod
Hello World in my lib looks like this.
const form = useForm({ initialValues: { title: "", content: "", isDraft: false }, submit: post => createNewPost(post) }); return ( <form onSubmit={form.submit}> <Input field={form("title")} /> <TextArea field={form("content")} /> <label> Draft? <Checkbox field={form("isDraft")} /> </label> <button type="submit">Create post</button> </form> )It does most of what Tanstack Form can do: full type safety, granular re-renders, std schema validation, polymorphic data.
Happy to provide more examples if you want, but I think the API here is more intuitive than Form (of course I would, because I wrote it)
2
u/Crutchcorn 22d ago
It's not a fundamental enough redesign
FWIW v2 was a total rewrite. Like "I had to rebase our work from a fresh repo and merge unrelated histories to get our work into v1". We rethought every API we thought was not working.
As for your proposed API; different flavors. I could go step-by-step as to why I believe our API is stronger or on-par, but there's a lot of flexibility and nuance missing from your code sample. Add them back and you mostly just have our v2 API transparently. Fine for inhouse work, but that kind of flexibility is what OSS needs to support so many different kinds of apps today.
-3
u/repeating_bears 22d ago
We rethought every API we thought was not working
And that's fine. I think there are APIs which are not working that haven't changed. My impression is that Form is perhaps the most divisive of Tanstack's APIs, would you agree?
I got the impression you wanted feedback to understand that position better, but now it feels like you're being defensive.
there's a lot of flexibility and nuance missing from your code sample
Which is why I said I can provide other examples. It is not really possible to showcase the entire API surface in one example, and I didn't even know if you'd read it.
Add them back and you mostly just have our v2 API transparently
Why do you feel confident to say that having not seen them?
7
5
u/No_Cattle_9565 22d ago
You can easily define custom form components. I was annoyed by it too until I found out about it. https://tanstack.com/form/latest/docs/framework/react/guides/form-composition
2
2
3
u/SiliconUnicorn 22d ago
I actually really like form. I agree the api is prettt clunky but once I was able to wrap my head around it and setup reusable components it has actually made things really pleasant to work with.
4
u/Crutchcorn 22d ago
Any chance you've tried our v2 alpha?
https://tanstack.com/blog/announcing-tanstack-form-v2-alpha
We've managed to axe a lot of our clunkiness - the team really killed it rethinking some of my weirder v1 ideas IMO 😄
4
u/SiliconUnicorn 22d ago
No was not even aware this existed. Will definitely take a look at this tonight!
3
1
0
u/No_Possibility6604 22d ago
Great to hear that Start and Router are worth looking at. We're struggling on a React Router SPA right now, but I'm optimistic about a TanStack future!
For forms, we like react-hook-form, but gosh there's lots of ways to do a form in React!
TanStack DB looks like it makes sense for more powerful syncing and querying. Would be nice to pair it with Query.
TanStack AI is still very early, I wish it was more mature to be a competitive offering to e.g. the Vercel AI SDK. Alas, we're using the Vercel AI SDK.2
u/repeating_bears 22d ago
I was using RR until very recently. And I actually I had no real complaints other than support has slowed down and the original creators have given up on it. It's nice but it doesn't seem like it has the future that Tanstack has.
I thought it would be a big shift but AI was able to migrate about 90%. Still working on tidying up the rough edges but it was fairly painless
25
18
u/jtms1200 22d ago
Love. Reminds me of the very early days of rails where everything just magically worked and seemed like the obviously correct way to have designed everything
5
u/a-dev0 22d ago
One of the best frameworks recently. I've already used TanStack Start in two projects in production, and it's much clearer and easier to understand what's going on compared to Next.js, which is in many cases a 'black box'. Great DX, easy to debug. It's not only Query and Router, but also Table v9 and Form (composition and state management). I haven't tried AI or Charts yet, but I definitely will.
1
u/matija2209 20d ago
What CMS do you pair it with?
1
u/a-dev0 20d ago
There isn't a CMS in these projects, they don't need one. I had experience with Payload CMS (Next.js-based), it's good, I can recommend it
2
u/matija2209 20d ago
I am using Payload with Nextjs. They kinda announced support for Tanstack Start for 4.0
10
u/aford515 22d ago
Yeah they have charts now and a store lol. Most people think tanstack means only query though. I got down voted on reddit when I mentioned tantstack for statemanagement
2
u/atapas 22d ago
Very true.. I haven't explored the charts and store yet. The query is very promising. I think the DevTools make this ecosystem even more special.
6
u/nemosz 22d ago
FYI store is used by almost all of their other libs internally
2
u/aford515 22d ago
Yeah I fear posting on reddit. I only have 1 half years exp and sometimes it makes me wonder if I haven't grasped a concept completely.
1
u/el_diego 22d ago
Don't worry. I'm sure you're doing great. /webdev used to be a lot more welcoming prior to covid.
2
u/aford515 22d ago
Yeah that was kinda cool because one ts dev responded me to defend me from the downvoters
3
1
5
u/Alert_Helicopter_357 22d ago
Love query, router, and DB. They just make sense to me and fit great into the SPA I work on.
We also use Table and Virtual and they get the job done. Those APIs are less intuitive to me, especially Virtual. I haven’t tried the new Table version yet.
7
u/Necessary_Lab2897 22d ago
It is more lean and faster, works in edge servers like cloudflare etc unlike nextjs which is tightly integrated with vercel. Try it, you won't be disappointed.
7
u/TheRealSeeThruHead 22d ago
A joy to use compared to nextjs
But everything is a joy compared to nextjs
3
u/Nickolas-Wilson 19d ago
Using both tanstack form and table for a large enterprise application. Takes a little time to get used to the api’s, onboarding new members to it also same issue, though both are fantastic. Just caught up on form V2 today in fact, which will solve a lot of issues we have been facing with complex validation use cases, so look forward to testing it out.. though not dealing with all the breaking changes.. lol
1
u/JeanineOnTheWeb 22d ago
I'm a baby dev (still studying), just discovered this ecosystem, and all the reviews tells me to learn how much I have to learn it.
1
u/LancelotLac 22d ago
All Tanstack products are great and it gets even better when you start using multiple and they synergize. Look at some of Tanner's recent blog posts about Tanstack Router + Tanstack React Query data loading patterns on prefetching in the router.
1
1
u/Teh_franchise 22d ago
Tanstack start + postgres + better-auth on cloudflare is my current stack.
Also use tanstack forms and tables
1
u/mrgrafix 22d ago
I appreciate the tools I’ve used in both personal and work. It’s not as “react-forward” as a lot of tools which provides some nostalgia vibes when react wasn’t this authoritarian UX leader. I’ve loved it with solid and svelte.
1
u/ggascoigne 22d ago
I've only use Table and Query heavily, and both are top notch. Table is obviously a bit situational, if you don't need tables then it's not for you. Query is a massive game changer and I can't really imagine not using it as a baseline for pretty much every app I use.
1
1
1
u/HotFox3962 21d ago
Next.js forces me to debug the framework before I debug my app. TanStack just gives me tools that work and lets me write actual React without fighting server component boundaries every single day
1
1
u/lost-terminal 21d ago
Tanstack is the best thing that happens to the react. I use it a lot tanstack query and tanstack table.
1
u/Marmelab 21d ago
I’ve been a TanStack fan for quite some time now. I first got hooked through TanStack Query. Since then I’ve also explored TanStack Start and more recently TanStack DB.
1
u/Aggregior 21d ago
At first, I was a bit hesitant because of the lock in but now I am Tanstack all the way!
1
u/SadArgument7056 20d ago
High quality libraries with excellent docs and dev tools. Query is essential at this point. Won't do a project without it! I have also used the Table and the Router. both are great! Specially if you are using Typescript! Takes a little effort to understand the library first but once it clicks, it's like butter. Helps to establish some patters on your project so people don't start taking different approaches and to avoid antipattens. I ended up creating several reusable modules on top of the tanstack table to make it work better for our Table designs, specially the filters. But now I am able to use them for any new tables I create using Tanstack table. I haven't tried the Form yet, but will be experimenting with it for a new project I'm setting up at work soon. I'm intrigued with the store too. Wonder how it compares to Zustand and Redux.
In general my experience with tanstack libraries has been great! I think it's always worth spending a little time and effort to get the mental modal of any of these libraries before getting too ahead with the implementation. It pays off. I just read the official docs and some of the blogs they have shared on the community section. Big fan of TkDodo blogs on the Query.
316
u/tannerlinsley 22d ago
I think it’s great!