The Ghost of TanStack Past

Issue #232.October 19, 2023.2 Minute read.
Bytes

Today’s issue: Ouija-board driven development, a sneak peek at the React-Forget compiler (finally!), and an Angular meta-framework with a slightly more creative name than usual.

Welcome to #232.

Eyeballs logo

The Main Thing

A guy stacking a bunch of plastic cups on top of a guy who's sleeping

TanStacks on stacks on stacks.

TanStack Query hits v5

The last time we wrote about React’s most popular data fetching library in August 2022, it had just launched v4, changed its name from React Query to TanStack Query, and decided to start supporting other JS frameworks.

Fast forward 15 months, and the TQ crew has come a long way: The React Query version of TanStack has grown over 2x to ~3.5 million weekly downloads, they’ve launched adapters for Vue, Svelte, and Solid.js, and they just released TanStack v5 on Tuesday.

The team’s major focus for v5 was to make TanStack Query “smaller, better, and more intuitive to use,” and they seemed to check all those boxes.

v5 is 20% smaller than v4, and a few key changes and new features help it deliver on the “better and more intuitive” promise:

  • They removed overloads from the codebase, which unifies how you use useQuery and other hooks. This makes the object API more consistent and helps you avoid annoying TypeScript error messages.

  • A new, simplified way to do optimistic updates lets you leverage the returned variables from useMutation, without having to write code that updates the cache manually.

  • Shareable mutation state gives you access to the state of all mutations shared across components with a new useMutationState hook.

  • First-class support for suspense, plus experimental support for streaming with RSC.

Bottom Line: By continuing to adapt to the ever-changing React ecosystem and adding support for other JS frameworks, TanStack Query is proving that it’s going to be around for the long haul.

That’s why we’ve been working with Tanner and Dominik from the React Query core team to build query.gg 🔮 — a brand new React Query course that’s packed with interactive visuals and real-world challenges to help you master the library fast.

        
spamspy logo

Our Friends
(With Benefits)

The Captain Planet kids putting their rings together to summon Captain Planet

With all our spam combined, we can save the internet

SpamSpy is the future of spam fighting

This community-driven spam blocker is basically the Captain Planet of spam protection.

It lets us combine all of our spam data together to create an AI-powered spam solution that’s constantly evolving — so it can stay one step ahead of bots and spammers, instead of just reacting to them.

It’s still in closed beta, but if you subscribe to their newsletter, you can get notified and start using it before everyone else.

Here’s how it works:

  1. Connect your data through RapidAPI to submit your spam content.

  2. SpamSpy’s AI learns to block your spam content, along with all the other spam submitted by other community members.

  3. You can use the SpamSpy platform to block spam on your own site for good.

Join the Discord today to see what the future of spam fighting looks like.

Pop Quiz logo

Pop Quiz

Sponsored by Datadog’s State of Serverless 2023

For this free report, Datadog examined telemetry data from thousands of companies’ serverless apps to analyze the latest trends.

What gets logged when you click the inner div?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>What gets logged?</title>
    <style>
      #outerDiv {
        background-color: lightgrey;
        padding: 50px;
        border: 2px solid black;
        text-align: center;
      }

      #innerDiv {
        background-color: lightcoral;
        padding: 20px;
        margin: 20px;
        border: 2px solid black;
        text-align: center;
      }
    </style>

  </head>
  <body>
    <div id="outerDiv">
      Outer Div
      <div id="innerDiv">Inner Div</div>
    </div>

    <script>
      const outerDiv = document.getElementById("outerDiv");
      const innerDiv = document.getElementById("innerDiv");
      outerDiv.addEventListener(
        "click",
        (e) => {
          console.log("Outer div clicked!", e.target);
        },
        true
      );

      innerDiv.addEventListener(
        "click",
        (e) => {
          e.stopPropagation();
          console.log("Inner div clicked!", e.target);
        },
        false
      );
    </script>

  </body>
</html>
Cool Bits logo

Cool Bits

  1. query.gg 🔮 is the spooky new landing page we just launched for our upcoming React Query course. It’s inspired by a (very true) traumatic experience one of us had playing with a Ouija board at a sleepover when we were 12, and we were the only kid who couldn’t get it to work, and our friends said it was because we “didn’t have a connection to the spirit world.” 😭

  2. Node.js 21 just dropped with some new test runner updates and stable WebStreams for processing data in small sizes for browser applications.

  3. Jetbrains JavaScript Day is a free, virtual event on Nov. 2nd that brings together community experts to discuss trends and answer your questions about the ever-changing JavaScript ecosystem. It features great speakers like Fred K. Schott, Simona Cotin, and more, so don’t miss out! [sponsored]

  4. View Transitions just landed in Remix v2.1. They’re still experimental, but Halloween is a good time to experiment with all sorts of things.

  5. Sathya Gunasekaran from the React Core Team gave a 25-minute talk at React India called, Statically Analysing React Components for Fun and Profit, where he discusses his work on the the React-Forget compiler and gives a quick peek under the hood.

  6. Analog is a fullstack meta-framework for Angular that uses Vite for serving and building and file-based routing and server routes. I just wish they could’ve come up with a more creative name like Nixt or Ngxt.

  7. The ByteDance team just released Rspress 1.0 — an Rspack-based static site generator with MDX support.

  8. QA Wolf gets web apps to 80% automated end-to-end test coverage in 4 months. They’ll build and maintain your test suite in Playwright, plus give you unlimited parallel runs on their infra, so you never have to worry about bugs again. [sponsored]

  9. Artem Zakharchenko wrote an article called Why Fetch Promise Doesn’t Reject on Error Responses.

  10. gluestack-ui just launched v1.0 of its universal headless component library for React/Next and React Native. Gluestacks was also the name of the homemade candy my elderly neighbor used to hand out on Halloween when I was a kid — back before we knew that dried Elmer’s glue shavings weren’t great for your intestinal tract, no matter how tasty they were. My digestion recovered, eventually.

Pop Quiz logo

Pop Quiz: Answer

Sponsored by Datadog’s State of Serverless 2023

What gets logged when you click the inner div?

// Outer div clicked! <div id=​"innerDiv">​Inner Div​</div>
// Inner div clicked! <div id=​"innerDiv">​Inner Div​</div>

Even though stopPropagation() is called in the child’s event handler, the parent’s event handler still executes because it’s set to capture, and it executes before the event reaches the child in the capturing phase.

If the parent’s event handler was set to bubble, then the child’s event handler would execute first, and the parent’s event handler would not execute at all because the event would have been stopped in the child’s event handler.

Lastly, the target property of the event object is always the element that the event was dispatched to, which is the inner div in this case.