Bytes: React Query is single and ready to mingle

Bytes banner (Turn on images 😘)

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

  1. 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.

  2. 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.

  3. 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]

  4. 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).

  5. Apoorv Goyal wrote about what it’s like building an app with ChiselStrike – a new, modern take on BaaS.

  6. 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.

  7. 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.]

  8. 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;
}

Share Bytes

ui.dev banner
 

We work hard to make Bytes something you'd want to share with your developer friends. And to make it a little easier, we'll give you free stuff when you do.

30

Your bits

Your Referral Page

Your shareable link

https://bytes.dev?x=1697807915
 

Have a product you think our developers will love?
Advertise in Bytes

youtube icon youtube icon twitter icon instagram icon

50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101

Unsubscribe from Bytes

Older messages

Bytes: C++ kind of sucks, actually

Monday, July 25, 2022

This week, we've got Google's succession plans, Bun tattoos, and my virtual wolfpack chatroom from 2005. Welcome to #110. Live footage of the C++ succession ceremony Google wants to build the

Bytes: what exactly are the differences between JSC and V8?

Monday, July 18, 2022

This week, we've got robots, engines, and minions. Welcome to #109. When you finally give GitHub Copilot your credit card Love, Death & (Coding) Robots Last year, GitHub introduced us all to

Bytes: Sun's Out Bun's Out

Monday, July 11, 2022

As a reminder for all our cultured readers, today is National Slurpee Day so make sure you take advantage. This week, we've got hot cross buns, a new Shrek getting chosen, and how to apply The

Bytes: Like any good doggo, ESLint might be a little overbearing

Monday, July 4, 2022

Happy Fourth of July to those who celebrate and happy July 4th to those who don't. This week, we've got our special Bytes Cocktail recipe, our class action lawsuit Airbnb developers, and a

Bytes: Hot Spec Summer is BACK

Monday, June 27, 2022

This week, we've got Hot Spec Summer, Shopify's Big H, and Bionicles fan fiction. Welcome to #106. Hot Spec Summer is back A tradition unlike any other Last week, we observed the only religious

#1 on the App Store

Monday, August 8, 2022

We've covered all kinds of tools recently, from no-code tools to AI tools. Depending on where you are, you might've... Product Hunt Read in browser This newsletter is brought to you by You'

GCP Newsletter #306

Monday, August 8, 2022

Welcome to issue #306 August 8th, 2022 News Data Analytics Data Studio Official Blog Introducing Data Studio as our newest Google Cloud service - Data Studio, our self-service business intelligence and

What Is a Reverse Proxy, and How Does It Work?

Monday, August 8, 2022

Read in Browser Logo for DevOps by How-To Geek August 8, 2022 What Is a Reverse Proxy, and How Does It Work? What Is a Reverse Proxy, and How Does It Work? Reverse proxies are a useful tool in any

University acceptance rates by college and program

Monday, August 8, 2022

SQL, Database Querying, Aggregation Functions, InterviewQs University acceptance rates by college and program SQL Database Querying Aggregation Functions Forward this email to a friend or colleague and

Amazon buys the company behind Roomba robot vacuums

Monday, August 8, 2022

The Morning After Now available on your smart speaker and wherever you get your podcasts Apple Podcasts | Spotify | Google Play | iHeart Radio It's Monday, August 08, 2022. Amazon made a $1.7

Smartwatches Are Great, but a Luxury Smartwatch Is Pretty Dumb

Monday, August 8, 2022

Read in Browser Logo for Review Geek August 8, 2022 Believe it or not, smartwatches are pretty great. When they first took off years ago, that wasn't a guaranteed outcome, given that they were

Post from Syncfusion Blogs on 08/08/2022

Monday, August 8, 2022

New blogs from Syncfusion Top 7 JavaScript Object Destructuring Techniques More from the Syncfusion Ecosystem Bold Reports: Paginated Reports and Analytics Bold Desk: Customizable Help Desk Software

🏷 Data Labeling for ML: Survey

Monday, August 8, 2022

About 45% of the time in data science projects is consumed by processing and labeling data. It's fair to say that data labeling is one of the most expensive tasks of any machine learning project.

Architecture Weekly #87 - 8th August 2022

Monday, August 8, 2022

Architecture Weekly - links and resources to boost your knowledge and developer skills! ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Digital transformation in 2022 and beyond: These are the key trends

Monday, August 8, 2022

Foldable phones might be the next big thing: Here's what you need to know ZDNet Facebook Twitter LinkedIn ZDNet Insights August 8, 2022 Digital transformation in 2022 and beyond: These are the key