Merry Christmas!🎄 I'm excited to officially announce the release of
@Tan_Stack
Router v1! 🎉🎊
🔒 Fully Type Safe
♻️ Built-in Loader Caching
🔎 URL State Management + Search Param APIs
🎁 So much more!
A wild full-stack React framework appears!
It's very early, but TanStack .com's `tsr` branch is already being built and deployed to
@vercel
using our new experimental full-stack template "TanStack Start", which uses TanStack Router and a splash of
@nkSaraf98
's Vinxi.
More info…
I'm happy to announce:
🎉 React Query Devtools! 🎉
Visualize, sort, debug, manipulate and explore your queries in real-time! This is just the beginning!
#TanStack
#React
#javascript
So stoked to finally get to announce and release:
React Query!!!
- Agnostic data fetching
- Auto Caching & Refetching (Window Focus, Polling/Realtime)
- Dependent Queries
- Mutations
- Auto Garbage Collection
- Pagination + Scroll Recovery
- 4.1 kb
You inspired me,
@cassidoo
.
Since hooks and the early conception of the suspense API, I have personally felt that React has been obsessed with just a handful of concepts. While technically impressive and undoubtedly pushing the limits and boundaries of what a single-threaded UI…
As a user of a library, moving your TS to JSdoc or declaration files is totally fine. I still get types. But this is just... weird.
The information loss alone is hard to justify for me. "Need info here?, Consult the docs, if we have them and they're up to date."
Announcing React Virtual 🎉
A React hook for virtual scrolling of rows, columns and grids in fixed, variable, and dynamic measurement modes!
#TanStack
#react
#javascript
Lots of us should genuinely up the empathy for
@dan_abramov
. Effects are hard. Docs about them even harder. Have you ever written docs for a prolific library? He's balancing core learning material with loads of ecosystem expectations.
Keep pushing Dan. The new docs are great ✊
React Table will here-forth be known as... TanStack Table!
- It's now in BETA 🎉
- Adapters for React, Solid, Svelte & Vue
- New docs (and new )!
- Release candidate coming very soon
Just use <select>, right? I wish. My life right now:
- Async
- Multi-Select
- 100,000's of options
- Fuzzy search
- Multi-faceted filtering & sorting
- Virtualized/Paginated
I should really publish my
@Tan_Stack
Select package soon...
“My code is so safe! We have so many tests!”
I can’t imagine anyone’s written enough tests to fully cover
@typescript
’s StrictNullChecks. This rule alone will literally enforce you to be the most defensive, edge-case-aware, error-handling programmer you can imagine.
It’s 💯/💯
#ReactQuery
Users:
What if I told you that you would never have to see another spinner again (...maybe just one on bootstrap? 🤔), and you wouldn't even have to use suspense at all?
Let's just say I'm almost done with the alpha release for a new library you'll want to try! 😃
Just built another app that will probably never benefit from server components or streaming. It’s an SPA, behind a login, with zero SEO concerns for users that will never care about or appreciate “It streams, baby” and instead immediately asked about offline support.
Also, is…
I'm highly considering moving from [var, setVar] pairs when using React.useState to a [var, varSet] pattern.
The amount of time I lose by not being able to cmd+d or find-replace those vars is adding up.
#react
#reactjs
#javascript
I'm convinced that React's concurrent rendering model is fundamentally at odds with fine-grained reactivity/updates/rerendering.
I have users who are clawing at me for fine-grained updates and rendering subscriptions in TanStack Router, but you simply can't have both…
When I build libraries for React, ironically, I don't really use hooks like useState, useReducer, etc.
One of the best perks (and footguns) of managing your state *outside* of react is that you get to have full control over when a component should rerender.
Just about every SPA I've ever used could use a lot less <Button>, and a lot more <Link>. I'm not talking about pathname routing either. A vast majority of the time, the state you're about to manage belongs in the URL and I'd wager you're not putting it there because either you…
Remember, it's 99.9% likely that the thing standing between you and shipping is not the framework/library feature/tool/pattern discussion of the day. It's work. Buckle down and do it.
#ReactQuery
's new website and docs are now officially released! 🥳🎉✨
"Performant and powerful data synchronization for React"
Fetch, cache and update data in your React and React Native apps all without touching any "global state".
#TanStack
I wish I could take all of the work I’ve done on
@tan_stack
over the years (and even the work I’m doing right now on the next big thing) and bolt it on to
#NextJS
. Wishful thinking? Absolutely. Regardless, they’re just killing it right now with Next 13.
Ditto. Here’s how it worked for me:
Tried to build an app
Started a company
Needed better charts
Needed more scalable UI
Needed a table library
Needed better forms
Needed better fetching/caching
Needed even better charts
Needed a better router
It’s extremely unorthodox,…
Beginners, please, just build stuff. Any stuff. That’s all you need. Learn just enough to make the next step in your project.
Forget learning paths, they’re all dumb. Reality doesn’t work that way. Enjoy the mess.
#ReactQuery
just reached 20,000 Github Stars! 🎉
It's been such a good ~18 months and I'm super excited to say that we're just getting started. We've got some awesome things in the pipeline for the next year of RQ.
Thanks everyone!
Sincerely,
#TanStack
#ReactQuery
now supports automatic refetching on network reconnection! 🎉🥳
This means that if your users lose their internet connection, your queries will update automagically when they reconnect to the internet!
#TanStack
#React
#javascript
After 6 years of building and serving
@nozzleio
's marketing site with React and JS, has *finally* been relaunched with Wordpress!
Let me tell you why this is monumentally awesome.
👇
I'm so flippin' excited about this not just because it relieves me of…
🎂 🎉 One year ago today,
#ReactQuery
was born! Since then...
⭐️ 14k GitHub Stars
⬇️ 1.8M installs
👷188 Contributors
And it’s just getting started! Thanks for all your support!
Stay tuned for an even more awesome data-in-React experience coming in v3!
Look Ma! No types!!! ... but still fully typed 😉
For type safety to work in
@tan_stack
Router before this, you had to "hint" to TS in a few places. With this new pattern, you're type-free, but still retain fully inferred type safety.
🎉🥳⚛️ React Table v7 is now in Beta!
"Hooks for building fast and extendable tables and datagrids for React"
- Built with and for React hooks
- Headless rendering
- Mo faster, mo bettah. Like easily 100x
- Plugin system. Also based on React hooks
Okay 🤯 What kind of wizardry is this?? This unlocks fine-grained rendering!!!
Each nested route component subscribes to an individual path segment and it only re-renders it when URL state is changed. And all of this is type-safe too??
Still not able to wrap my head around it
After 2 years of learning advanced TypeScript and redesigning React Table's API to be fully TS, my very own tables in
@nozzleio
(the reason for all of it) are finally 100% type-safe all the way from data to pixels.
I agree with my users now... TanStack Table is 🔥😊
React Query v2 is here! 🎉🎉
Check out the release notes here for a complete feature list and migration guide.
- Simplified dependent query syntax
- Less over-fetching
- Better polling
- Status booleans
+ more!
#TanStack
#ReactQuery
#React
#Javascript
In the same way
@typescript
allowed me to stop holding application schematics in my brain 🤯,
@solid_js
's next gen reactivity primitives are freeing up my brain from constant change detection worry. e.g. "How will this data or its changes be consumed reliably system-wide?"
It's here!
@Tan_Stack
Router now has a
@vite_js
Plugin! 🎉
As promised it currently detects and handles route generation, so no more need to use the Router CLI (tsr watch/generate).
Also, be sure to try out the experimental auto-code-splitting with it!…
With
@Tan_Stack
Router's beforeLoad + context, you can easily lock down an entire route subtree based on an async dependency. For instance, an auth check only needs to happen once, which will cause all subsequent loaders to wait:
When the check completes the user can be made…
TanStack Virtual is now available in beta! 🎉
🤖 100% Headless
🌎 Framework Agnostic (PR your adapter!)
🏆 ReactVirtual Successor
🛠 Upgraded API
📚 New Docs/Site
🎉🥳 My new course "React Query Essentials" is launching in 2 days! (July 29)
- THE official
#ReactQuery
course
- $99 early bird discount for 1 week, then $149
- 30 day guarantee, PPP on request
❤️/ Retweet to WIN 1 of 3 free course vouchers!
#TanStack
Upgraded an old Next.js project to v14 app router and can now say from experience that I highly prefer the Remix file-based routing conventions over Next's.
I'm even happier now that I (mostly) adopted those same conventions for
@Tan_Stack
Router.
Last week I had a tonsillectomy, tympanostomy, and partial uvulectomy. Least to say, recovery has been the absolute worst. But it’s also been the best. Despite losing 18 lbs in 7 days while forcing cool liquified shots of bland nutrients down…
My “chronic allergies” (if that’s…
Forms suck. I don't care if you're a React, Vue, Angular, Svelte, whatever user, they are just terrible to build.
I can also say that it's very unlikely for any library or tool to change my mind on this. I've tried 'em all, and even built my own several times.
/mute
🎉 Announcing React Table v7! 🎉
Full feature list and release notes below!
Over a year of work went into this with help from tons of contributors & motivation from sponsors. Thanks to everyone for helping me pull this off!
#TanStack
#React
#Javascript
Cringe fo sho, but highly effective. In defense (that really shouldn't be necessary, but here we are), I yielded to the nickname as opposed to inventing it.
Guess what, we use in memory jwts for our saas app that’s an auth only spa with zero SSR or pre-rendering. The bundle is “massive” after a few codesplit navigations because we handle a lot of data and to do that require some interesting libraries around datavis, tables, querying,…
This is an experimental branch of running on
@Tan_Stack
Router
- Streamed SSR
- Vite
- File Based Routes
- Loaders
- Server Function RPCs
- Deferred Data + Suspense
- Route title/meta/links/scripts
- Probably more I'm forgetting
Lots of people saying that building responsive sidebars is difficult, but... yes they're right. It absolutely is. Here's
@nozzleio
's app sidebar. Not perfect, but pretty snappy. The markup, state, and styles for this kind of thing are completely underestimated and usually…
Of course there are apps/sites that need server side stuff. And I'm glad we're getting better answers to that story. However, in my experience there are *way* more people running SPAs that don't need or care about a server/center stack setup than X/Twitter or the town square…
@code
@typescript
... Why is this such a bad experience?
Could we get some syntax highlighting here? Even just two colors to separate the type reference from the message? Some more indentation?
If I have to read these debug tooltips much longer, I will inevitably go insane.
.
@TanStack
Router just got some some fresh upgrades!
- Code-splitting/lazy-loading your routes now only requires a single .lazy.tsx suffix companion file for your route.
- Route tree generation is much cleaner and smaller when using this new convention
- All classes have been…
I'm using
#ReactQuery
with Zustand and really liking the pairing. It's a super tiny, very flexible, no-nonsense client-state solution for React.
If I were to write a client-state solution from scratch, it would likely resemble Zustand in many ways.
I love Next.js. With the latest APIs for edge regeneration of static pages, I can’t really imagine where I would want to use a fully-up-front SSG for React again.
Mark my words, this is just the beginning. You thought Gatsby and friends were cool? The future is much brighter.
The pivotal moment of transitioning from intermediate to advanced
@typescript
was realizing the type system is a programming language in itself, w/ variables, functions, conditionals, & loops.
Utility types like Required, Record, Pick, Omit are all built with these primitives.
I'd like to cosign most of this article. As a library developer, I feel the pains in here so much, but I also feel the same attachment to React as described at the end of the article.
Oh hello
@Uber
, I see you’re using
#ReactQuery
now :)
I doubt you’ll ever become a sponsor, but the least you could do is offer me a few free rides right?!
🆕 post: Why do Webdevs keep trying to kill REST?
My unifying mental model for
- REST vs
@GraphQL
- Apollo, React Query, Firebase, Amplify Appsync vs...
- Phoenix Liveview, Rails Hotwire, React Server Components
- shoutouts to
@remix_run
and
@supabase
I had a 10 tweet thread drafted about how I basically have no use for GraphQL anymore because of
#ReactQuery
. This article covers *almost* all of that thread but way better! Way to go
@Swizec
! Draft deleted!
We’ve had years of experience learning and avoiding the footguns, edge cases and quirks of async + useEffect so you don’t have to.
@Tan_Stack
Query is the result. I you do anything async in your React components, you’d be foolish not to at least consider it.
After all,…
React’s hooks are still so confusing to people that Twitter is full of folks saying “I don’t fetch data in useEffect” without understanding that they are using a library that calls 30 other hooks, including useEffect.
HOLY SHMOLY... I think I just unlocked a new portion of my brain that can understand the more complex Typescript types. Utility types, pattern matching, inference, extraction, composition.
It's young and naive, but I'm feeling very very dangerous now.