React 19 Beta Bonanza

Issue #284.April 29, 2024.2 Minute read.
Bytes

Today’s issue: TypeScript tries to steal the limelight, Bun launches a crash reporter, and GitHub Copilot finally starts catching up to GeoCities.

Welcome to #284.


Eyeballs logo

The Main Thing

Pepe from the Muppets blow-drying his hair

Me getting ready for the big moment (deleting forwardRef from my code)

React 19 Beta Bonanza

The React team is a lot like my anal fissure, I’ll go years without hearing from it, then it’ll randomly derail my entire weekend with a big announcement.

And last week’s React 19 beta release was definitely a big one.

It comes with all the React Server Components features that were previously restricted to the Canary channel and meta-frameworks that rhyme with “Shrext.js” – but it also introduces a surprising amount of meaningful, non-RSC features.

And since we’ve written a lot about server components in the past 3.5 years, let’s dive a little deeper into what we can expect from the other React 19 goodies.

Feature #1 – Actions: This refers to a collection of functions that use async transitions to allow React to manage the life cycle of a data submission.

Actions can help handle pending states, errors, forms, and optimistic updates automatically, thanks to features like:

  • A new useOptimistic hook that manages optimistic updates, so you can show users instant feedback while requests are submitting

  • <form> Actions that help you manage forms automatically by allowing you to pass functions to the action and formAction props

  • A pending state that starts at the beginning of a request and automatically resets when the final state update is committed

Feature #2 – use: A new React API for reading the value of a resource in render, like a promise or context. This lets you do stuff like pass the value of a promise, and suspend that component until the promise has resolved. And unlike hooks, use can be called conditionally.

Feature #3 – ref as a prop: You can now access ref as a prop for function components, which means new function components won’t need forwardRef anymore.

Bottom Line: The React 19 era is finally upon us, and it’s here to make all your wildest data submission dreams come true.

        

Knock logo

Our Friends
(With Benefits)

A guy wearing homemade eclipse glasses made out of eclipse gum wrappers

Safety first

The most powerful notification system you’ll *never* build

There are two things you should never build from scratch: solar eclipse glasses and app notifications.

Sadly, we’re too late to save some of you from burned-out retinas – but Knock can save your team from sinking weeks of engineering time into a janky notification system.

It gives you a single, unified API for all your notifications code that’s highly flexible and built to scale with you – plus everything else you need to ship notifications in a few hours or less:

  • A powerful workflow engine that gives your team a single place to create, maintain, and deliver all notifications (email, SMS, push, and Slack)

  • Drop-in React components for in-app notification features like inboxes and feeds

  • Batching, throttling and preferences that just work out of the box

If you’re interested in checking it out, they have a generous free tier to help you get started.


Pop Quiz logo

Pop Quiz

Sponsored by Socket

Their developer-first security platform scans the actual code of your dependencies to detect and block supply chain attacks from sketchy open source packages.

What color is the <p> tag’s text?

<p class="hello">Hello</p>

<style>
  body { color: red; }
  p { color: green; }
  .hello { color: unset; }
</style>

Cool Bits logo

Cool Bits

  1. Not to be outdone, the TypeScript 5.5 beta was released on the same day as the React 19 beta. Classic TypeScript, always trying to steal someone else’s thunder.

  2. Sarah Shader wrote a deep dive on how Databases are Spreadsheets, which will help you build a better mental model of how DBs actually work. [sponsored]

  3. Ollie Williams wrote about the slow death of CSS vendor prefixes.

  4. Effect is a TypeScript library designed to help developers easily create programs that are “complex, synchronous, and asynchronous” – which, coincidentally, are the three words I would use to describe my inner dialogue.

  5. Tiger Abrodi wrote about React’s evolution from Hooks to Concurrent React.

  6. Are you drowning in technical debt? SonarQube from Sonar has helped thousands of development teams and Fortune 500 enterprises find and fix issues before they reach production, making it easier than ever to proactively prevent new tech debt from accumulating. [sponsored]

  7. Bun just released a new crash reporter called bun.report, which was the name of the zine I published in college about the most effective glute workouts.

  8. Eric Simons wrote a great breakdown on What Vite is and why it’s so popular.

  9. hardfist wrote this Deep Dive into Rspack & Webpack Tree Shaking.

  10. GitHub just launched a Copilot-native developer environment called Copilot Workspace that lets you brainstorm, plan, build, test, and run code in natural language. Personally, I was using to GeoCities to do all of that back in 1999, but this seems cool too.


Pop Quiz logo

Pop Quiz: Answer

Sponsored by Socket

What color is the <p> tag’s text?

<p class="hello">Hello</p>

<style>
  body { color: red; }
  p { color: green; }
  .hello { color: unset; }
</style>

The answer is red since unset “unsets” the style of the p tag, so it inherits from its parent – body.