The bridge to modern React

Today’s issue: Messy JavaScript benchmarking, reducing the cognitive load of elf on a shelf, and answering life’s Rust’s biggest questions.

Welcome to #354.

---

The bridge to modern React

I still remember the look on my parents’ faces when I told them I was majoring in Outdoor Recreation Management during my freshman year of college. But after freezing my a** cheeks off during my first “field assignment,” I decided to switch majors and pursue my passion for the great indoors instead.

And yes, that is a highly convoluted metaphor for what the React Router/Remix team (RRR team?) is going through right now. Stick with me.

The team spent the past couple of years porting all of the React Router functionality to Remix, only to change their major change directions again last month with the release of React Router v7 – which “brings everything you love about Remix back into React Router proper.”

Why are they doing this? React 19 made it clear that the future of React is on the server. But unless you’re using a meta-framework like Next.js or Remix, there’s no easy on-ramp to adopt these new features.

That’s where RR v7 comes in. Over 7 million React projects already depend on the library, so porting all of Remix’s features back to React Router provides a “bridge to React 19.” In theory, this should allow developers to leverage the new React APIs without rewriting their entire application.

The RRR team was even nice enough to provide two different upgrade options, depending on how React 19-curious you are:

1. Library Mode: This is your classic React Router SPA setup, providing declarative routing for components and not much else. It’s a good choice if you DGAF about all of React’s new server-specific features.

2. Framework Mode: This is the new, maxed-out version of React Router. It’s a batteries-included, SSR-enabled, full-stack framework that’s built on top of Vite and gives you modern features like loaders, actions, and RSC.

Bottom Line: If the jump from library to framework is as small as the RRR team thinks it is, this release really could make React Router the “bridge to React 19” for millions of developers.

And if not, I look forward to them porting all of React Router back into Remix in 6 months. Snip snap.

---

Extism brings AI to WebAssembly

We’re all a little Wasm-curious, but it’s always felt like a pain to get started – even though the security and performance benefits are huge.

That’s why Extism built a free universal plugin system that lets you ship Wasm apps in days (not weeks).

The killer feature? Security. Instead of running sketchy executables with full system access, Extism sandboxes everything, so it’s secure by default.

And they just opened up access to mcp.run – a new registry that lets you host, discover, and publish Model Context Protocol servlets for LLMs + agents.

There’s a lot going on under the hood here, but this lets you easily connect your code to AI agents, models, and apps that can run anywhere – from browsers to IoT devices. And it’s always secure by default.

Check it out – and see why mcp.run just won Anthropic’s latest Hackathon in San Francisco.

---

const enrichEvents = (events) => {
  const metadata = {
    usr_789: { tier: "premium", joined: "2023-04-01" },
  };

  const enriched = events.map(event =>
    {
      id: event.id,
      time: event.time,
      user: metadata[event.userId],
      value: event.properties.totalValue
    }
  );

  return enriched;
};

const events = [
  {
    id: "evt_123",
    time: "2024-12-10T10:00:00Z",
    userId: "usr_789",
    properties: {
      totalValue: 99.99,
    },
  },
];

console.log(enrichEvents(events));

---

1. Artem Zakirullin wrote about how cognitive load is what matters for developers writing code and for parents trying to keep up with the elf on a shelf insanity.

2. Alex Korban wrote some impressions of React and TypeScript from an Elixir/Elm developer. Shocker: he hates it.

3. Incogni is offering 58% off their annual plans with the coupon code BYTES. It scrubs your personal data from the web and removes your sensitive information from all broker types, including those tricky People Search Sites. [sponsored]

4. Right on cue, Tzvetan Mikov wrote about compiling full-featured JavaScript to Wasm. Just use Extism, my guy.

5. Daishi Kato wrote some thoughts on what RSC means for SPAs.

6. Jacob Jackson wrote about how JavaScript benchmarking is a mess. Just like my mental health in December.

7. CarbonQA provides high-quality QA services that scale. Their US-based testers will break your app repeatedly and do all the manual testing you hate doing yourself. [sponsored]

8. The Chrome team wrote up a 2024 recap of the most impactful new Chrome features and they managed to only mention Gemini a respectable 7 times.

9. Raymond Camden wrote an article on summarizing with the Transformers.js SDK.

10. David Teller dared to ask (and answer) the question we know was on your mind all day on Christmas: what would it take to add refinement types to Rust? Life’s biggest questions always come out around the holidays.

---

Most likely your IDE would catch this one for you, but there is a syntax error. The map function is an arrow function that implicitly returns the result of the expression inside the block. In this case, the block is not a valid expression, so the code will throw a syntax error. To fix this, you can wrap the object in parentheses to make it an expression.

const enrichEvents = (events) => {
  const metadata = {
    usr_789: { tier: "premium", joined: "2023-04-01" },
  };

  const enriched = events.map((event) => ({
    id: event.id,
    time: event.time,
    user: metadata[event.userId],
    value: event.properties.totalValue,
  }));

  return enriched;
};

const events = [
  {
    id: "evt_123",
    time: "2024-12-10T10:00:00Z",
    userId: "usr_789",
    properties: {
      totalValue: 99.99,
    },
  },
];

console.log(enrichEvents(events));