React Native's new era

Today’s issue: Singing about transpilation errors in high school choir, force-feeding your brain CSS knowledge against its will, and celebrating .com hitting the big 4-0.

Welcome to #436.

---

React Native’s new era

Earlier this month, the cross-platform gods at Meta The React Foundation blessed us with React Native 0.82 – the first release to run entirely on the New Architecture.

New Arch is a full rewrite of all the major systems that underpin React Native, which the RN team has been working on for the past seven years. That’s almost 38 years in JavaScript time, so why did they spend so much time working on it?

Quick review: The old architecture used an asynchronous bridge that enabled React Native to communicate with the native platform via serialized JSON messages. This created performance issues, which stemmed from too many JSON messages needing to go through a single communication channel (among other things).

So, the React Native team decided to build a New Architecture from the ground up that now consists of three main parts:

• A new native module system allows JavaScript and the native layer to synchronously communicate via a new C++ API. This removes the need to JSON-ify data.

• A new concurrent rendering system supports more responsive UIs and can handle multiple progress trees across multiple threads.

• A new event loop can now process tasks on the JavaScript thread in a well-defined order, allowing React to interrupt rendering to process higher-priority user events.

Bottom Line: Now that React Native 0.82 has shipped the New Arch in all its glory, along with a “new evolution” of their Hermes JavaScript engine with some big perf upgrades, it might finally be time for us to retire the meme we used at the top of this story (and for like three other React Native stories in the past).

Like the old React Native bridge, it served its purpose, but I think we’re all ready to move on.

---

CodeRabbit cuts your code review time (and bugs) in half

It instantly gives you senior engineer-level feedback every time you submit a pull request, so you can catch more errors and ship faster.

Here’s how it works:

• It gets full context of your entire codebase, so it can catch major vulnerabilities and nuanced issues

• It gives you one-click fixes to help you clean up mistakes fast, along with PR summaries for more complex changes

• It learns from your PRs over time, so the more you use it, the smarter it gets

CodeRabbit has reviewed more than 13 million PRs, is currently installed on 2 million repos, and is the #1 most-installed AI App on GitHub & GitLab.

Get a free trial for your team – or use it free forever on open-source projects.

---

function logPropertyUpdates(target) {
  return new Proxy(target, {
    set(target, property, value, receiver) {
      console.log(`Property "${property}" changed to "${value}"`);
      return Reflect.set(target, property, value, receiver);
    },
  });
}

const user = logPropertyUpdates({
  name: "Lew",
  details: {
    age: 24,
    country: "USA",
  },
});

user.name = "Kareem";
user.details.age = 25;

---

1. Anil Dash wrote about how ChatGPT Atlas is the first browser that actively fights against the web. But besides that, I hear it’s great.

2. Ahmad Shadeed created this Section Layout masterclass as part of his never-ending mission to force you to actually learn CSS before you retire.

3. Auth0 created Token Vault to manage all the complexities of obtaining, storing, and refreshing API tokens when building AI agents. So now you can connect your agents to external services like Google and GitHub, without handling sensitive creds or API keys. [sponsored]

4. Biome 2.3 now provides full support for Vue, Svelte, and Astro files, so you can now format and lint JavaScript and TypeScript files inside script tags when using these frameworks.

5. gleescript lets you bundle your Gleam-on-Erlang project into a single executable file. It also lets you sing about transpilation errors to the tune of Don’t Stop Believin’ like nobody’s watching.

6. Sentry created this Ecomm Developer’s Survival Guide to Black Friday, so you can have comprehensive error and performance monitoring setup before something breaks on Nov 28th. [sponsored]

7. Panphora wrote a quick comparison of React vs Backbone to question how much progress we’ve actually made in the last 15 years. Was web dev really better back then, or were we all just younger and enjoying our non-receding hairlines?

8. Astro 5.15 introduces Netlify skew protection and new adapter APIs, while the Fonts API now supports granular font preload filtering.

9. Tanner Linsley (Creator of TanStack) and Jamie Turner (CEO & Co-founder of Convex) are hosting a livestream tomorrow called Let’s Start Something. They’ll talk about recent shifts in platform boundaries for developers, how these changes affect modern app design, and what’s next for full-stack frameworks. [sponsored]

10. Dan Abramov wrote about how to fix any bug, except for the one that broke your heart.

11. Pete Millspaugh wrote this brief history of domains to celebrate .com turning 40. It still looks great for its age, but I heard that it’s been dual-wielding Ozempic and TRT for a while now.

12. Loren Stewart wrote about building the same app 10 times to evaluate frameworks for mobile performance. It’s like how I soft-launched 10 different Halloween costumes before finally deciding to go as the dead tapeworm in RFK Jr’s brain.

---

ES6 Proxies are not recursive by default. In the above example, the user object is wrapped in a Proxy, but the details property is not. Therefore, when the user.details.age property is updated, the Proxy is not triggered.

To fix this, we can make the Proxy recursive:

function logPropertyUpdates(target) {
  if (typeof target === "object" && target !== null) {
    return new Proxy(target, {
      get(target, property, receiver) {
        const value = Reflect.get(target, property, receiver);
        return logPropertyUpdates(value);
      },
      set(target, property, value, receiver) {
        console.log(`Property "${property}" changed to "${value}"`);
        return Reflect.set(target, property, value, receiver);
      },
    });
  }
  return target;
}

const user = logPropertyUpdates({
  name: "Lew",
  details: {
    age: 24,
    country: "USA",
  },
});

user.name = "Kareem";
user.details.age = 25;