another footgun perpetrated by Big JavaScript™

Issue #128.October 17, 2022.2 Minute read.

Hi friends

This issue we recap the lord’s annual decree, get philosophical about jam, and take a cheap shot at Gen Z fueled by our own millennial sorrow.

Welcome to #128.

Eyeballs logo

The Main Thing

Shrek pondering

What are you doing in my swamp?

just use use

I know, you’re sick of hearing about React. I can assure you, we’re sick of writing about it. It’s just that the sleeping giant has, once again, awakened from its hibernation to give us the annual decree. This time, we get an update on the long awaited Suspense for Data Fetching.

If this is your first time hearing about Suspense for Data Fetching, you probably hate skinny jeans, love TikTok, and are too scared to ask for extra spread at the In-N-Out drive-thru. The rest of us first heard about it in 2018, the same year my first son was born – this morning I taught him how to ride a bike.

How we got here: In practice, as of today, Suspense is just a React component that lets you declaratively specify the loading UI for any part of the component tree if it’s not yet ready to be displayed. Why this RFC is getting so much attention is because it gets us one step closer to the overall goal of Suspense. The goal my son has been waiting his whole life for, to make reading data over the network as easy as using props or state.

Here’s how it works. First, figure out where you’re using the component*. If it’s on the server, you can just use standard async/await syntax to access promise-based APIs**.

async function Note({id, isEditing}) {
  const note = await db.posts.get(id);
  return (
      {isEditing ? <NoteEditor note={note} /> : null}

If you’re using the component on the client, then you use the use hook***.

function Note({id, shouldIncludeAuthor}) {
  const note = use(fetchNote(id));

  let byline = null;
  if (shouldIncludeAuthor) {
    const author = use(fetchNoteAuthor(note.authorId));
    byline = <h2>{author.displayName}</h2>;

  return (

The Bottom Line: Verdict is still out on if this is the answer to all our problems, or just another footgun perpetrated by Big JavaScript™. We’ll see how it shakes out, hopefully before my son learns to drive.

* 🥲

** A limitation of async Server Components is that they can’t use hooks.

*** Unlike other hooks, use can be used conditionally or inside blocks or loops.


Directus Logo

Our Friends
(With Benefits)

Cursed Mime

Time to hand-roll some back-end APIs

Directus can help you

You know what’s cool? Building things your users love. You know what isn’t cool? Building backend APIs so that butthead from marketing can pretend he’s a data scientist.

That’s why we love Directus – it sits on top of your SQL database and comes with a bunch of features, one of them being that it dynamically generates REST and GraphQL APIs for you and your team.

Even better, it also spins up a no-code app so that anyone (even Mr. Butthead) can easily access company data, build internal dashboards, make data visualizations, and stop pinging you on Slack every 2 hours to ask for help 🥹.

Directus is a legit open-source product (18k GitHub stars, 20m downloads) that’s completely free to self host, and their new cloud platform looks really cool too: global CDN, end-to-end project provisioning, and lots more.

Try it for free, and never get lost in the Forbidden Forest your company’s SQL database again.

The Job Board Logo

The Job Board

Frontend Architect or Senior Full Stack Engineer

Motion is looking for experienced Typescript engineers to build the next generation of productivity tools. You will inform key frontend architectural decisions that help Motion scale the next 2 order of magnitudes, create delightful user-facing features, and improve application performance. We are an ambitious team of 15 people distributed remotely across North America.

Senior or Staff Front-end Engineer
100% Remote
React is looking for 2 experienced individuals that have a solid understanding of React and want to help design, implement and launch major user-facing features. Close is a 100% globally distributed team of 65 high-performing, happy people that are dedicated to building a product our customers love.

Have a job you want to fill?
Spot the Bug logo

Spot the Bug

Sponsored by

Their low-code, embedded analytics solution is super easy to embed inside your SaaS app, so that you can finally give your customers the analytics experience they deserve.

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];

Cool Bits logo

Cool Bits

  1. Simeon Riggs wrote about Prioritizing content over components. And as a seasoned writer of this newsletter, I know a thing or two about “prioritizing my content” over less important things (like most of my in-person relationships, or my health, for example).

  2. CarbonQA provides QA services geared for dev teams. They’ll boost your team’s morale sky-high by… breaking your code repeatedly. But the good news is that you’ll never have to waste time on testing again. They work in your tools, talk with your team on Slack, and let your devs be devs. [sponsored]

  3. Lerna was just reborn with last week’s v6 release, and it looked like a phoenix rising from the ashes… just with less Jessica Chastain and more json.

  4. Laurie Voss and Salma Alam-Naylor wrote an in-depth article to try and help us answer an age-old question: What exactly is Jamstack?. At this point the jamstackers might want to get together with the web componites and go to rebrand camp.

  5. Vercel just released a new OG Image Generation library for generating dynamic social card images at the Edge. Pair this with Dall-E 2 and a bottle of Fireball, and you’ve got yourself a fun icebreaker game to play with the marketing team at your next company retreat.

  6. Helix is a “post-modern” text editor that’s inspired by Kakoune and Neovim. Personally, I think it’s giving off more surrealist vibes, but that might just be because of all the Dalí-style nightmares I’ve been having about luchadores lately.

  7. Steve Sanderson gave an incredible keynote on the history of the web called, Why web tech is like it is. I heard that his alternative title was, “Why are you the way that you are? Honestly, every time I try to do something fun or exciting you make it… not that way. I hate so much about the things you choose to be.” But the conference organizers said that wouldn’t fit on the slide.

Spot the Bug logo

Spot the Bug: Solution

Sponsored by

function addTriple(inputs: number[]): number {
  return inputs[0] + inputs[1] + inputs[2];

TypeScript will warn us if we pass anything but an array of numbers to that function, but if the array has less than 3 items in it, the third item will be undefined and our function will return NaN. TypeScript can’t know how many items are in the array, so it can’t warn us.

There are many solutions to this. One would have us change our type signature to be a tuple type instead of an array. TypeScript can then warn us if our array doesn’t have enough options.

function addTriple(inputs: [number, number, number]): number {
  return inputs[0] + inputs[1] + inputs[2];

Another option is to enable the noUncheckedIndexedAccess TypeScript compiler option, which will force us to check that each item isn’t undefined.

function addTriple(inputs: number[]): number {
  if (
    inputs[0] === undefined ||
    inputs[1] === undefined ||
    inputs[2] === undefined
  ) {
    throw new Error("Invalid input");

  return inputs[0] + inputs[1] + inputs[2];