React Native is listening

Bytes officially turns three years old today! 🥳

We’ve all come a long way since June 22, 2020 — but I’m glad that this pandemic hobby has lasted longer than my short-lived passion project of baking bread creating stop-motion film reenactments of Broadway musicals out my old Bionicles collection. (Les Miséronicles will make you weep though.)

Today’s issue: Lightning CSS harnesses the power of the summer solstice, the best way to watch the Elon-Zuck cage match, and what do CDNs actually do?

Welcome to #198.

---

React Native is listening

The React Native Team listened to your feedback from last year’s community survey and prioritized it in yesterday’s React Native 0.72 release. Hooray for productive, non-spying listening!

A lot of that feedback focused on making improvements to Metro — React Native’s JavaScript bundler. And thankfully, v0.72 introduces three highly requested Metro features:

• Symlink support allows React Native to work transparently with monorepo setups and pnpm without needing janky workarounds. My brain originally read that as “System Link Support”, and I got really excited that we were about to have a LAN party — but this makes more sense.

• package.json exports support allows React Native projects to work with more npm packages out of the box, and it provides new capabilities for packages to define their API and target RN. Alex Hunt wrote a great article on how package exports work, and how they’ll improve the way that React Native projects work with the wider JS ecosystem.

• New metro.config.js setup in the React Native CLI means that standalone Metro CLI commands like metro get-dependencies will now work.

Symlink and package exports are still in beta, but these improvements helped introduce new architectural updates that should make Metro (and React Native generally) even faster and more reliable going forward.

Bottom Line: It’s nice to know that the React Native Team is hear for you.

---

Postman is everything you need to build APIs

Writing APIs from scratch can’t possibly be that hard, right?

Famous last words, my friend. Before you know it, you’re drowning in an ocean of janky code — and it only gets worse as your app scales in complexity. 🫠

Thankfully, Postman is here to throw you a life jacket:

• Their Public API Network is a great place to get inspiration for a new project. It’s a 100% free resource for discovering and testing thousands of public APIs.

• Once you know what you want to build, Postman’s API Tools help you and your team speed up development with their API client, design, documentation, and testing tools.

• Postman Workspaces are super helpful for organizing your API work and collaborating with teammates and other developers — so you never get lost in the sauce again.

Check it out and see why over 25 million (!!) developers use Postman.

---

We usually try to keep these 🍦 JavaScript, but here’s one for you React devs this week.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

---

1. Svelte 4 launched earlier today, but don’t worry, we’ll break it all down for you on Monday.

2. Apple just released their visionOS SDK. Hopefully one of you can use it to build a fully immersive way for us all to watch the Elon vs. Zuck cage match.

3. Participate in the latest Developer Nation survey, accessible to all developers, to share what changes you desire most about your work. Is it improved documentation, a genuine DevOps culture, or the chance to work with novel tech? Take the survey! [sponsored]

4. In other React Native news, the Expo team built CSS support into Expo and Metro via Lightning CSS. Vite recently did the same. It feels fitting that they announced this during the summer solstice.

5. The WURFL Query REST API is a public REST API that lets you access lists of mobile devices, along with their names and properties. This blog post breaks down how it works.

6. Zach Leatherman wrote about The Next Phase of Eleventy, now that a lack of sponsorship has forced him to work on it part time again. Hopefully, companies supporting OSS wasn’t just a zero-interest-rate phenomenon 😭.

7. Ben Schwarz wrote a deep dive article to answer a question that many of us have been too afraid to ask for years now: What is a CDN, really?

8. The internal engineering team at mega-VC firm, Andreesen Horowitz created ai-getting-started, a JavaScript starter stack for building AI side projects. And what a wild coincidence — it includes a bunch of tools and frameworks created by startups they’ve invested in. Don’t you love it when the best tool for the job just so happens to be the one that will personally make you lots of money if lots of people start using it?

---

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(number + 1);
        setNumber(number + 1);
        setNumber(number + 1);
      }}>Increment</button>
    </>
  )
}

This one comes straight from the new (Beta) React Docs. You might expect that clicking the button would increment our number state by 3, but that’s not how it works. In short, JavaScript creates a closure around the number variables so it’s as if we’re doing

setNumber(0 + 1);
setNumber(0 + 1);
setNumber(0 + 1);

which of course will always set number to 1.

Instead, if we want to update the same state multiple times before the next render, we can pass a function to our setter function like so -

setNumber(n => n + 1);
setNumber(n => n + 1);
setNumber(n => n + 1);

Now React will add all these functions to a queue, and during the next render, React goes through the queue passing the result from the previous item in the queue to the next, eventually leading to a number of 3.

0 + 1 = 1
1 + 1 = 2
2 + 1 = 3