another footgun perpetrated by Big JavaScript™

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.

---

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 (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
      {isEditing ? <NoteEditor note={note} /> : null}
    </div>
  );
}

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 (
    <div>
      <h1>{note.title}</h1>
      {byline}
      <section>{note.body}</section>
    </div>
  );
}

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 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.

---

Have a job you want to fill?

---

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

---

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.

---

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];
}