React's tradition unlike any other

Today’s issue: A mountain of Express.js spam, romantic JavaScript dates, and PEMDAS.

Welcome to #264.

---

React’s tradition unlike any other

Hello friends.

Welcome back to a tradition unlike any other – the 3rd annual “What We’ve Been Working On” blog post by the React team.

The 2022 Edition brought us updates on Server Components, Asset Loading, and introduced us to React Forget – an optimization compiler for React.

The 2023 Edition brought us more updates on Server Components, Asset Loading, and React Forget.

And now, the 2024 Edition brings us even more updates on Server Components, Asset Loading, and React Compiler (which seems to be the new name for React Forget).

However, unlike years past, this year we’ve finally got some movement – the biggest being that React Compiler is no longer a research project since it’s now powering instagram.com in production.

And before we dive into the other parts of the announcement, let’s answer one question you might have been too embarrassed to ask before now: WTF is React Compiler?

The core idea of React is that you define your UI as a function of the current state. This means that React re-renders whenever your app’s state changes, but it also means that React can re-render too much, degrading performance.

You can prevent this with a magic combination of useMemo, React.memo, and useCallback. Unfortunately, you’re not a magician and manual memoization still has downsides:

• It makes your code less concise, less clear, and less composable, especially as your team/codebase scales.

• It requires you to imperatively tell React how to process your code, thus killing some of React’s declarative magic.

• There’s always that person on your team who is convinced in order to make React fast you need to memoize everything. This, turns out, makes React slower.

This is where React Compiler comes in. It’s a low-level compiler that understands the rules of React and JavaScript, and can use that knowledge to automatically memoize your components for you. No more useMemo, useCallback, or awkward conversations with Mr. Memoize Everything.

There’s still no talk about a release date, but the team seems optimistic it’ll get shipped soon.

Along with React Compiler, the other big updates include…

• “Actions”, which allow React to manage the life cycle of data submission (think <form />) to allow you to more easily send data from the client to the server.

• “Document Metadata” gives you built-in support for rendering metadata tags (<title>, <meta>, etc.) anywhere in your component tree – including in fully client-side code.

• React Server Components, Asset Loading, Document Metadata, and Actions have all landed in react@canary and their documentation has been added to react.dev

• The next version of React will be React 19 and it’ll include everything currently in @latest, plus more like support for Web Components.

Bottom Line: In our 2024 predictions we predicted that “React forget will not ship”. It’s looking like this prediction is consistent with our own tradition of being terrible at predictions.

---

Postman’s Biggest API Conference Ever

POST/CON 24 has been intentionally designed to be super hands-on so you can actively master new skills and advance in your role with events like:

• Full-day workshops covering collaborative API development, API prototyping, and designing scalable APIs from scratch

• Open labs led by industry leaders on how to better harness AI, deliver world-class developer experiences, write better documentation, and more

• Additional talks from experts and opportunities to learn skills that will immediately help you boost your team’s productivity

50% discount ends tomorrow, so hurry and grab your ticket!

---

In the code snippet below, what do a and b evaluate to?

let a = 0;
const b = [1, 2, 3, 4, 5].map((x) => (
  (a += x), x * x
));

console.log(a) // ?
console.log(b) // ?

---

1. Dave Rupert wrote about all the different states that can affect the UI layer in his article, UI = f(statesⁿ). If you get confused by that, just remember to Please Excuse My Dear Aunty Sally.

2. The Qwik Team wrote about What they’re cooking up for Qwik 2.0.

3. Tempo is a new JavaScript date library that provides a collection of utilities for working with the native Date object. Personally, I still feel like “JavaScript Dates” is a great title for a web dev dating show on MTV.

4. OneSchema built an embeddable CSV importer that’s easy to set up in your app and even easier for your customers to use. It’s incredibly performant at scale, comes with advanced data editing features, and saves teams 6 months (!!) of engineering time on average. [sponsored]

5. Andrey Sitnik wrote about How to Favicon in 2024, and why we should rethink the current icon generator madness.

6. Isograph just launched v0.1.0 of their opinionated framework for building React apps that are powered by GraphQL data.

7. Deno launched (a waitlist) for their new JavaScript registry, jsr. If you’re curious, former Deno team member, Kitson Kelly wrote about his first impressions of jsr last year.

8. Product for Engineers is PostHog’s newsletter dedicated to helping engineers improve their product skills. It comes with deep dives on top startups, their lessons and mistakes from building PostHog, advice for crafting great products, and unreasonably cute hedgehog illustrations. [sponsored]

9. Jad Joubran wrote on the Chrome blog about How the new Array.prototype.with() method works.

10. Sarah Gooding wrote about The mountain of spam PRs that landed in the Express.js project repo after a YouTube tutorial used it as an example for “how to contribute to open source.” But she failed to mention how all of these spammers immediately got hired at Google — since we all know that FAANG companies are legally obligated to offer you a six-figure job once you make your first open-source PR.

---

In the code snippet below, what do a and b evaluate to?

let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => (
  (sum += x), x * x
));

console.log(sum) // 15
console.log(squares) // [1, 4, 9, 16, 25]

This is a fun one. The weirdest part is probably the comma , operator.

If you’re not familiar, , evaluates each of its operands (from left to right) and returns the value of the last operand. This allows us to, in a single line, increase sum by x and return the square of x. When finished, we get the sum of the array as well as a new array of squares.