Bytes #111 - React Query is single and ready to mingle

This week we’ve got open source rebrands, dinosaurs that aren’t extinct anymore, and a new film from the Jordan Peele of Web Dev.

Welcome to #111.

Michael Scott as Date Mike

Hi, I’m TanStack. Nice to meet me.

The Artist Formerly known as React Query

When you’re the most popular data fetching library in the React ecosystem, it’s tempting to get complacent — but the RQ team is not about that life.

They pushed the boundaries again last week when they released React Query v4 and revealed some big news: they’re officially single and ready to mingle (with the rest of the JS ecosystem).

That’s a tastefully euphemistic way of saying that React Query is now framework agnostic, with “adapters” for each specific JS framework. They’ve already got a built-in React adapter, and adapters for Vue, Solid, and Svelte are in the works.

And to prove they’re not playing favorites, they changed their name from React Query to TanStack Query — kind of like when Prince changed their name to Ƭ̵̬̊ and became a legend forever (even if it created a ~~little~~ lot of confusion at first).

In addition to getting developers to unironically say “TanStack” in daily life, the technical improvements in v4 are impressive.

Offline support: In v4, Query no longer assumes an active network connection and works for any type of async data — and it has a Network mode that lets you develop offline first.
Performance improvements: Tracked queries help optimize renders and gives you a nice performance boost.
Persistence: You now have a lot more control over where you are storing data, and things like local storage work out of the box.
First class React 18 support: TanStack Query might be framework agnostic, but it hasn’t forgotten about its first love. The React adapter now uses useSyncExternalStore to ensure compatibility with concurrent mode.

Bottom Line: With this release, TanStack Query seems like the ideal solution for handling async data for just about any front-end application. We like it so much that we made a full course about it if you want to give us your money 🤑.

Ross from friends with text saying humor based on my pain.

Laughing about building notifications so we don’t cry [sponsored]

Courier gave my team so much time for activities

Newton’s 3rd law of motion clearly states that, “building app notifications always takes 5x longer than you think.”

And that might be understating it now that we have so many different platforms to worry about (email, SMS, web and mobile push, Slack, and tons more).

That’s what makes Courier so amazing. They give you complete notification infrastructure with one API that you can set up in an afternoon.

That API integrates with over 50 notification channels, and it handles everything — templating, routing, automations, even logging and analytics. It’s your PM’s *wildest* dream come true.

Courier is used by Fortune 500 companies and startups like Lattice and LaunchDarkly to save an average of 480 engineering hours a year. That’s a lot more time for ~~hide and go seek Fridays~~ team building.

The best part? Courier lets you send your first 10,000 notifications of every month for free (no credit card required).

Check it out. 👈

Barney emerging from the woods

Docusaurus v2 emerging from its 3-year alpha/beta period

Doc shop talk

It’s taken 4 years, 75 alphas, and 22 betas, but it’s finally here.

No, we’re not talking about React 18 (for once). We’re talking about Docusaurus — another Meta-backed open source project that just launched v2 of its static site generator for building documentation sites.

How we got here: The hardest part of creating a doc site is obviously *writing* good docs. But back in 2017, developers at “the artist formerly known as Facebook” realized there might be a better approach to building the actual websites than just copy-pasting the same Jekyll template over and over again.

So they built their own SSG with a unique value prop — get your doc site online in 10 minutes so you can focus on writing the content (with Markdown), but provide enough flexibility to go back later and truly customize it with your own branding, design, and features (with React).

Fast forward a few years, and Docusaurus is probably a lot more popular than you think, even when compared to more “all-purpose” React frameworks.

What’s new in v2:

React is now used on the client (not just the server like v1), which enables a more modern navigation
MDX support, so you can create interactive React components in your docs
More theming flexibility and a new system of plugins make customization a lot easier

Bottom Line: Docusaurus v2 just went live on ProductHunt — so go show them some love with an upvote, so that something besides a Chrome extension that steals an ungodly amount of personal data can win product of the day for once.

JS Tip — Sponsored by FusionAuth

This is a complete auth solution that just works. Check out their free community version to see why it’s got over 10 million downloads.

How can we improve this code?

async function completeCheckout(orderId) {
  await updateAnalytics(orderId);
  const order = await processOrder(orderId);

  return order;
}

Cool Bits

Bartek Iwańczuk (from the Deno team) wrote about How to roll your own JavaScript runtime. Reminds me a lot of when my dad taught me how to roll my own cigarettes. Man, sometimes I really miss the fourth grade.
Adam Argyle made a 30-minute GUI Challenge video on building Carousels in CSS. And if he makes a few more short horror films like that, he’ll have earned a new official job title at Google — The Jordan Peele of Web Dev.
CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs 🙏 [sponsored]
Blueboat is a new, serverless JS runtime with enhancements for data-intensive applications that clearly was very inspired by Bartek’s article (that’s a joke). Can’t tell if we’re living through the runtime renaissance or the runtime dark ages right now, but at this pace we’ll have more runtimes than websites soon (math checks out).
Apoorv Goyal wrote about what it’s like building an app with ChiselStrike — a new, modern take on BaaS.
Michael Lynch wrote about how he regrets his $46k website redesign and provided some valuable insight on working with contractors and agencies. But hey, at least he didn’t pay a consulting firm $32 Million for a website that never even went live like Hertz did. Gotta find that silver lining somewhere.
GrafBase is an edge-native data platform that gives you instant serverless GraphQL backends. Ok, but why do they call it GrafBase tho? I don’t get it.]
The Liveblocks team wrote about how they built undo/redo for a multiplayer environment — a process they describe as “notoriously tough” and “fraught with difficulty.” Sounds a lot like the job of trying to manage the Sleezer Tour back in 2000, which would’ve been co-headlined by the two most influential bands of the 21st Century. “Fraught with difficulty” indeed.

JS Tip — Sponsored by FusionAuth

How can we improve this code?

async function completeCheckout(orderId) {
  await updateAnalytics(orderId);
  const order = await processOrder(orderId);

  return order;
}

Because processOrder doesn’t depend on the result of updateAnalytics, we can parallelize the two invocations.

async function completeCheckout(orderId) {
  const [_, order] = await Promise.all([
    updateAnalytics(orderId),
    processOrder(orderId)
  ])

  return order;
}