The compiler is coming for us all

Today’s issue: The inner workings of the TanStack machine, Linter Idol, and developing a co-dependent relationship with my package manager.

Welcome to #411.

---

The compiler is coming for us all

The React team just released some fresh new docs on React Compiler, which means we should be getting a stable release soon 👀.

But since React developers have been conditioned to fear change, many of us still have lingering questions like, Why do we need this? How will this affect performance? Is this somehow Vercel’s fault?

Let’s take a closer look.

Why does React need a compiler? React’s default model is to re-render every time a state change occurs, but sometimes, you want to opt out of this behavior to improve performance. That’s traditionally required you to add manual memoization via useMemo, useCallback, and React.memo – which worked, but often felt tedious, brittle, and annoying to maintain.

According to the new docs, React Compiler “frees you from this mental burden” by automatically adding more precise, fine-grained memoization than what you’d ever do manually.

Historically, I’ve tried to “free myself from my mental burdens” by seeking counsel from the online shaman I hired on Fiverr – but let’s see how React Compiler does it.

Here’s a manually memoized example of how we do things today:

import { useMemo, useCallback, memo } from 'react';

const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
  const processedData = useMemo(() => {
    return expensiveProcessing(data);
  }, [data]);

  const handleClick = useCallback((item) => {
    onClick(item.id);
  }, [onClick]);

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
});

And here’s how you’d write the same code, knowing that React Compiler will memoize everything for you:

function ExpensiveComponent({ data, onClick }) {
  const processedData = expensiveProcessing(data);

  const handleClick = (item) => {
    onClick(item.id);
  };

  return (
    <div>
      {processedData.map(item => (
        <Item key={item.id} onClick={() => handleClick(item)} />
      ))}
    </div>
  );
}

That’s obviously a lot cleaner, but the tradeoff is that it forces you to trust in the React magic more than ever. The good news is that React Compiler has already produced some significant performance gains and DX wins for various Meta apps – and I assume those developers were already half-decent at manual memoization.

Bottom Line: The great compiling is finally upon us. And as AI coding tools continue cementing React as the Framework of Record™️, now’s probably a good time to bake in a little more magic under the hood.

---

Speed up your team’s release cycles *with science*

99% of engineering teams’ problems could be solved by one thing: shipping higher quality code, faster.

That’s exactly what QA Wolf did for Thirty Madison, who increased their app’s test cases by 10x while simultaneously saving developers 20% more time from slow QA cycles (watch the case study).

Here’s how it works:

• They create, maintain, and run automated Playwright tests to cover your entire app
• They provide unlimited parallel test runs on their infrastructure, so you get pass/fail results in under 3 min
• You get zero flakes, because every failed test is reviewed by their team of human QA engineers

Try out a personalized demo for your team – and see how they save 9 hours/week *per engineer* for their customers.

---

What does this evaluate to?

Array.from({ length: 26 }, (x, i) => (i + 10).toString(36)).join(", ")

---

1. TanStack DB now has Svelte support and a new section in its docs about Live Queries. And it’s all possible because Tanner technically doesn’t require sleep – his body can just achieve full REM cycles when he’s silently writing code inside a dimly lit room while listening to Enya.

2. Brian Morrison wrote about How to add multi-tenancy to an app built with Clerk, Lovable, and Supabase – so you can turn your vibe-coded fever dream into a proper B2B platform that’s ready for the big leagues. [sponsored]

3. Last month, Em Sharnoff wrote an article called, Why is the Rust compiler so slow? Just know that reading it will probably get you put on some sort of Rust Mafia watchlist. No one’s seen Em in weeks.

4. Reanimated 4 is a huge release for the popular React Native animation library that introduces a new declarative API for CSS-based animations and transitions.

5. Optimeist automatically optimizes your AWS Lambdas to reduce costs. It instantly detects your Lambdas and auto-tunes their memory, timeout, and configs based on real usage – kind of like the React Compiler, but for your AWS bill. [sponsored]

6. Bun v1.2.19 comes with a new bun why command that explains why a package was installed. There’s something therapeutic about being able to complain to my package manager.

7. Sergio Xalambrí wrote about using Action Routes in React Router.

8. tsgolint is an experimental JS/TS linter that’s written in Go, instead of the usual Rust – so that’s fun. Someone needs to create some sort of early-2000s reality TV competition show that pits all these next-gen linters against each other.

9. CarbonQA provides high-quality QA services for dev teams, so you’ll never have to test your own app ever again. They work in your tools, talk with your team on Slack, and let your engineers spend more of their time on actual engineering. [sponsored]

10. Michael Shilman wrote about How they cut Storybook’s bundle size in half – proving that Ozempic really does work for everything.

11. A new React Aria release adds support for async loading and infinite scrolling, better form integration, and lots more.

12. Jökull Sólberg wrote a quick post on Biome vs. Oxlint’s approaches to building faster, type-aware linting. Vote now for your favorite next-gen linter by calling our toll-free hotline at 1-866-LINTERS, and you’ll be entered to win a lifetime supply of free smoothies at an Orange Julius location near you.

---

What does this evaluate to?

Array.from({ length: 26 }, (x, i) => (i + 10).toString(36)).join(", ")

The English alphabet as a string – 

a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z

Wow, neat.