📢 Earlier this year, I teamed up with the folks behind
@uidotdev
to build a brand new course for teaching the concepts of TanStack Query. I'm so happy to announce that we're getting close, and early registration is now possible at 🔮
components / hooks / types / utils (and constants) is the split I'm seeing in many codebases, yet it's the one I dislike the most. It groups by type, not by domain. "useTheme" will live next to "useTodo", but not next to ThemeProvider ... why?
📢 Yesterday, we released an experimental react-query-nextjs package for the app directory. Wrap your app in the <ReactQueryStreamedHydration> component to enjoy direct useQuery fetches on the server with suspense, which streams to the client 🎉
Example:
PSA: Whenever you think of writing useEffect, the only sane thing is to NOT do it. Instead, go to the react docs and re-read the page about why you don't need an effect. You really don't.
But what if I ne.. - NO. read the page!
In my specia.. - NO. read the page!
READ THE PAGE
❤️ I've talked a lot about how I love zustand - I've been using it quite extensively over the last 3 years.
📚 This is the beginning of a series I've planned on "working with zustand". The intro is a bit basic, I want to go deeper in the future:
My wife just told me that a website to buy tickets doesn't work. Turns out she was just clicking the button before JS has finished hydrating so it did nothing 🙈. Thanks, SSR...
Today's 🌶 take: Don't export functions just to write a unit test for them. If the function isn't used outside of the file in your app / library - don't test it. It's literally an implementation detail. Test the public interface only!
oh that explains sooo much about
@Jira
😂. Like why I always need to reload pages to get new data, and that totally screws up the sorting because it's not persisted to the url. It's seriously bad UX, which is what you get a lot with hand-crafted solutions.
One of the blessings of working on
@Atlassian
apps is that I don't have to mess around with react-query or complex state management solutions. In most cases, it's a single fetch on page load, which can live happily inside useEffect() without too much drama
🕵️We've fixed a huge performance problem this week by moving useState + context over to zustand. It was the same amount of code. The lib is < 1kb.
⚛️Don't use context for state management. Use it for dependency injection only. The right tool for the job!
📖 As promised, here is my article about callback refs and why they are better than useRef + useEffect if you want to do something with the element after it rendered:
Please don't name your variables `renderTable` or `showIcon`. It is not helpful to read:
{ renderTable ? <Table data={data} /> : null }
If we should render it, we render it. Thank you, Captain Obvious 🦸
Instead, try to name variables for what they represent:
📚 It's been almost 1.5 years since I wrote my first blog post about working with zustand. It's about time I wrote a follow-up piece - about using zustand together with React Context
Why does it sometimes feel that open source moves a lot faster than the "real work" even though (or maybe because of?):
- there are no estimations
- no sprints
- no retros
- no pressure
- no "process"
- barely a roadmap
Things ship and work, and quality is good, too...
🚩 component design red flag: A component should never need to know where it is rendered. This is the responsibility of the parent rendering it.
<Link color={isInsideToolTip ? 'secondary' : 'primary'} />
Optimistic updates will be a totally different, simplified experience in TanStack Query v5 🤯
We can now just render the variables of the running mutation instead of writing directly to the queryCache in `onMutate`
@sebastienlorber
The descriptiveness of a variable needs to be proportional to its scope. In a small scope like the shown .filter, anything, even `x` is good enough. No need to avoid the one letter abbrev here.
Not gonna lie that (as a maintainer of a library in the data fetching space) I'm feeling mostly afraid of server components and suspense.
"How will this work with react-query" is a good question. It feels like I'm supposed to have an answer but I don't. Huge imposter syndrome rn
📢 TanStack Query v5 alpha.34 has a new power feature for useQueries: A top-level `combine` option that lets us transform data from all Queries into whatever we want 🎉
Read more about it here: And try out the latest alpha version:
Holy 🤯 react-query is used in ~ 1 out of every 6 react projects / installs.
react weekly downloads: ~20m
react-query (v3): ~1.5m
@tanstack
/react-query (v4+): ~1.8m
Question is, what are the other 5 using 😁?
🔮 Exciting news: I'm so happy to announce that the course on TanStack Query I've been working on will launch May 22 🚀
Huge thanks to
@tylermcginnis
and the team behind
@uidotdev
for working with me on this 🙏
One of my worst habits: I can't stop. I investigated a tricky problem today that I couldn't solve. At dinner, I was distracted, grumpy and agitated. I had to go back to the laptop until I found the cause.
Now that I got it, my kids are already asleep. That wasn't worth it 😞
📚 Update time: All my react-query blogposts are now future proof, using the object syntax everywhere, which will be the only valid syntax starting with v5. After updating all the docs and examples, my blog was the last stop:
strong agree here 🙌
there's one tiny thing: you usually don't want to separate queryKey from queryFn. I know I've spread this pattern myself, and I'll write about why and how we've solved this in v5 soon.
How I use React query:
1. Create custom hooks that wrap related useQuery and useMutation calls.
2. Inline queryFn and mutationFn args. This enforces always using React query to query and mutate.
3. Colocate related queries and mutations in the same file, and invalidateQueries…
I'm gaining hundreds of followers and the page views on my blog are through the roof 📈.
Is it the orange site?
Is it google trends?
NO, it's a
@t3dotgg
video 😱
Okay let's do this: Show me your weirdest usage of useEffect and I'll try to get rid of it ⚡️
No guarantees but I think a lot of effects I see in the wild are not necessary 😄
Things I'm proud of from 2023:
🔮reduced my job to two days a week to work on
🗣️ gave a talk in person at a
@ReactVienna
meet-up and
@ReactSummit
(remote)
🚢 shipped
@tan_stack
query v5
📚 my blog doing incredibly well (> 1M visits)
🎉 reached 30k…
📚 New Blogpost: If you're wondering why you'd want a library like React Query, because you could just as well call fetch in useEffect, then this article is for you:
Why is everybody doing this:
useQuery<Some, Types, Here>(...)
instead of just typing the `QueryFunction` and inferring the rest. Is there an article or a video out there that tells everyone this is the way? Because it's not ...
🤪 Am I going crazy or is this a legit way to avoid hydration errors? Basically abusing `useSyncExternalStore` to safely read server snapshots on the server and on the first client render, and then falling back to the client snapshot.
The good thing is that on client side…
📚 Have you ever wondered how react-query works internally? Why it is so efficient at managing async state? What a QueryObserver is?
Then come with me as we take a look under the hood - inside react query...
📢 We will very likely be removing the onSuccess / onError / onSettled callbacks from `useQuery` in v5. I tried very hard to come up with a good use-case, but imo there is none.
I'll write an RFC soon, but if you have a legit use-case, let me know now!
I'm super proud to announce that my blog has made it as a community resource into the official react-query docs 🎊
You can now read an excerpt of all my RQ related articles here:
and the docs also link to them from other places. Thank you
@tannerlinsley
📚 Getting back to valuable content: I wrote a blogpost today with all arguments I could find on why the generic notation (Array<string>) is better than the array notation (string[]) in TypeScript. Let me know if I missed anything:
📚 So I finally found the time to write about why we made the breaking parameter changes in v5, and what this new API enables us to do. Prepare to have your mind blown if you don't yet know what the Query Options API can do for you 🤯
📹Did you know that TanStack Query now has it's own eslint-plugin with rules that help you catch bugs early and stay future proof?
I'm explaining what it can do for you in this video:
🔥The ReactQuery Devtools keep getting better and better: In the latest version, you can put your query into loading or error state to test how it behaves - all thanks to GitHub user paul-sachs 🎉
@jherr
Hm, please don't store JWTs in client side storages 🙈. Store them in cookies created by the server (secure, http-only, same-site). I wanted to write an article about this a long time ago...
📢 The slides + transcript of my talk "Thinking in React Query", which I gave both at a
@ReactVienna
meetup and
@ReactSummit
, are available on my blog now:
I think this might just be the most important part in the whole series...
🤝React Query and React Router (the remixed one, v6.4) - how do they integrate? Should I use one or both for data fetching?
I went through the tutorial and integrated RQ into it. Read about it here:
It's not the blogpost I wanted to write today, but it's the one I needed to write. I hope this will further shed some light on the issues.
Why we are breaking the useQuery API on purpose
🌶️ hot take: optimistic updates are overrated and overused.
They make sense for a small amount of interactions where instant feedback is necessary, but mostly, a pending state is just fine.
I did write about this before:
📢 TanStack Query v5 is now in beta 🎉
After 91 alpha releases over the last 5 months, we now believe our APIs are mostly stable - we don't have any plans to drastically change them.
📹So I got nerd-sniped into making a Trellix clone with
@tan_stack
React Query over the weekend. I think it works really well, but feel free to disagree. No framework, no backend - just the great msw, vite + RQ SPA.
Nice side-effect: it works if you lose network connection 😱
📢Coming to you in v5: Fully interactive and editable data explorer in the Query devtools 🔥.
All thanks to a contribution from
@bastibuck
🚀
Now available in v5.0.0-rc.5
🤯 This honestly sounds so good. Not quite ready yet, but implementing a context selector with just the `use` and `useMemo` primitives is a really great design imo. A glimpse to the future 🔮
📢 TanStack Query v5 is now available as a release candidate 🎉
This means we're pretty close to shipping it "as-is", unless you find and report things. There has never been a better time to try out v5 than RIGHT NOW
Okay, this is crazy. I was not ready to hit the 30k mark anytime soon. What an incredible, surreal day. Thank you everyone for sticking around with me ❤️. I'll have some new content to share tomorrow. Just you wait :)
🚀 react-query v3.30.0 is out with big news: query cancellation is now supported out of the box 📦: You'll get an `AbortSignal` passed to the queryFn, and can forward it to fetch / axios - RQ will do the rest 😮
The
#TypeScript
compiler might not be the fastest - but why is that such a big problem?
"We have a large project" - I get that, but there are other things you can do that will impact development speed and DX:
I've put a bit too much on my plate lately. Working on
@tan_stack
Query v5, the 🔮 course, my day job as a tech-lead, consulting on the side, remeda v2, and now the router. It's unsustainable.
So today, I've decided to take a step back from remeda. The lib is very mature and in…
@jamonholmgren
react-query doesn't do data-fetching - it's an async state manager based on promises, so you don't need to copy data from react-query into another state manager. I have multiple blogposts and a talk on just this topic 😂
I was today years old when I found out that `setTimeout` uses a 32bit int for the delay value; everything larger will instantly trigger the passed function.
We use this for garbage collection in React Query, so don't try to set a value larger than 596 hours (24.8 days) 😂
💁♂️React tip: I think most implementations of `usePrevious` will write to a ref in an effect and return it, but the rules of react advise us to not read refs during render.
Here is my implementation, based on what I learned in the new react docs ():
Looks like I had 10 (ten) followers on Twitter when I joined the TanStack Discord in September 2020. This was my opening message in the "introductions" channel.
It's surreal that I crossed 18k today. Can't believe how much open source has changed my life ❤️
I have been asked a lot lately how to make your own low-level abstraction over useQuery and have it work in
#TypeScript
. My answer is usually: You don't need it, as those abstractions are often too wide. But there are use-cases for it, so here is my take. Let's break it down ⬇️
🏡Welcome home,
@angular
🔥Amazing work by
@Arnoud_dv
on the new Signals based Angular adapter for TanStack Query
➡️Now available in v5.12:
🧪Marked as experimental but please try it out and give feedback
📚Docs are here:
How to add 500kb+ of JS to all pages? Easy: Have an un-optimized PNG (3k pixels wide), inline it into an SVG with base64 encoding, then render it as a React Component (svgr), which will inline it into the shared JS bundle 🤪
I'm not saying that's the code I just found 🙃
📢 announcing remeda v1.0.0 🚀
My favourite TypeScript utils library finally became "officially stable". If you're looking for a light-weight, type-safe, fully treeshakable, data-first and data-last replacement for lodash/ramda, give it a try: