<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-banner-rounded.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/eyes.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/rainbow-light.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/fb-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/li-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/tw-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/em-share-icon.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/microsoft-logo.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/github-copilot.jpg">
<link rel="preload" as="image" href="https://bytes.dev/images/content/spot-the-bug.png">
<link rel="preload" as="image" href="https://bytes.dev/images/content/cool-bits.png">
<link rel="preload" as="image" href="https://bytes.dev/images/bytes-icon.png">
<title>Bytes: TypeScript 6.0 is your final warning</title>
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono&family=Outfit:wght@400;500;700;900&family=Paytone+One" rel="stylesheet">
<style>@media (prefers-color-scheme: dark) {
.email-wrapper {
color: #F9F4DA !important;
background-color: #0F0D0E !important;
}
hr {
border-color: #262422 !important;
}
mark {
background-color: #231F20 !important;
color: #F9F4DA !important;
}
pre {
background-color: #231F20 !important;
border: 1px solid #231F20 !important;
color: #F9F4DA !important;
}
.bg-alt {
background-color: #231F20 !important;
}
.unsubscribe-link {
color: #504C48 !important;
}
.token.punctuation {
color: #f9f4da !important;
}
}
@media screen and (min-width: 600px) {
.mobile-break {
display: none;
}
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table class="email-wrapper" border="0" cellspacing="0" width="100%" style="background-color: #FFF; border-collapse: collapse; color: #231F20; font-family: Outfit, sans-serif; font-size: 16px; width: 100%;"><tbody><tr>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
<td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"><div style="max-width:600px;padding-top:80px">
<div style="text-align:center"><img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"></div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Today’s issue:</strong> The Spider-Man of package managers, WebAssembly heresies, and the curious case of the missing Zeit cofounder.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Welcome to <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/m2h7h6u35e9oo5fm/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDcz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061367">#473</a>.</p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">The Main Thing</h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/rainbow-light.jpg" alt="Girl in a club with a rainbow around her and light shooting out of her body" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;">TypeScript's codebase breaking free of JavaScript<!-- --> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">TypeScript 6.0 is your final warning</h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Much like my last job as a Chili’s bartender, Monday’s <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/dphehmue65kqqnsm/aHR0cHM6Ly9kZXZibG9ncy5taWNyb3NvZnQuY29tL3R5cGVzY3JpcHQvYW5ub3VuY2luZy10eXBlc2NyaXB0LTYtMC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061368">TypeScript 6.0 release</a> is more of a transition phase than a final destination. A bridge to a better place.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That’s because this is the last TypeScript version built on its existing JavaScript codebase, before it graduates to its fancy new Go compiler and language service that promises native speed and multi-threaded type checking.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">That means TypeScript 6.0 is basically a polite way of saying “please update your tsconfig before we blow everything up in TypeScript 7.0 in a few months.” <em>(SemVer is a social construct at Microsoft.)</em></p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Strict mode is now <code style="font-size: 14px;">true</code> by default, <code style="font-size: 14px;">module</code> defaults to <code style="font-size: 14px;">esnext</code>, <code style="font-size: 14px;">target</code> floats to the current-year ES spec (currently <code style="font-size: 14px;">es2025</code>), and <code style="font-size: 14px;">types</code> now defaults to an empty array instead of vacuuming up everything in <code style="font-size: 14px;">node_modules/@types</code>. That last one alone will break a lot of projects, but should also speed them by 20–50%.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Here’s what else landed:</strong></p>
<ul>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Temporal API types</strong> — From reading this newsletter, you already know the long-awaited Temporal proposal just hit stage 4, and TypeScript 6.0 ships built-in types so you can start using it today with <code style="font-size: 14px;">--target esnext</code>.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Map.getOrInsert</strong> — The ECMAScript “upsert” proposal also hit stage 4, adding <code style="font-size: 14px;">getOrInsert</code> and <code style="font-size: 14px;">getOrInsertComputed</code> to <code style="font-size: 14px;">Map</code> and <code style="font-size: 14px;">WeakMap</code>. This collapses the classic has/set/get pattern into one clean call.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><strong style="font-weight: 600;">Deprecation tsunami</strong> — Lots of spring cleaning, with <code style="font-size: 14px;">outFile</code>, <code style="font-size: 14px;">baseUrl</code>, <code style="font-size: 14px;">--moduleResolution node</code>, <code style="font-size: 14px;">target: es5</code>, and AMD/UMD/SystemJS module targets all gone or on death row.</p>
</li>
</ul>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><strong style="font-weight: 600;">Bottom Line:</strong> It’s officially the end of an era for TypeScript’s codebase. The new era should be faster and better in pretty much every way, but I’ll still make sure to pour out a Presidente Margarita to honor the OG.</p>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"><tbody><tr><td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;">
<a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/e0hph0u7v4ekkgh8/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDcz" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1843061369"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/7qh7h2u9lz8002fz/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NzM=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1843061370"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/owhkhwuw9on442sv/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9SG93JTIwdG8lMjBwcmVwJTIwZm9yJTIwVHlwZVNjcmlwdCUyN3MlMjBHbyUyMG1pZ3JhdGlvbiZ1cmw9aHR0cHMlM0ElMkYlMkZieXRlcy5kZXYlMkZhcmNoaXZlcyUyRjQ3Mw==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1843061371"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"></a><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/p8hehqu46xd99paq/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBSG93JTIwdG8lMjBwcmVwJTIwZm9yJTIwVHlwZVNjcmlwdCUyN3MlMjBHbyUyMG1pZ3JhdGlvbiUwQWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0NzMmc3ViamVjdD1Zb3UlMjBsaWtlJTIwY29ybmJyZWFkJTNG" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1843061373"><img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"></a>
</td></tr></tbody></table>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="150" src="https://bytes.dev/images/content/microsoft-logo.png" alt="Microsoft logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"><span>Our Friends <br class="mobile-break">(With Benefits)</span></h2>
</div>
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;">
<img src="https://bytes.dev/images/content/github-copilot.jpg" alt="Copilot CLI" width="600" style="border-radius: 5px; max-width: 100%;"><p style="font-family: Outfit, sans-serif; font-size: 15px; font-style: italic; line-height: 1; margin: 0; padding-bottom: 4px; padding-left: 24px; padding-right: 24px; padding-top: 10px; text-align: center;"> </p>
</div>
<h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/x0hph3ue23znnmf5/aHR0cHM6Ly9mYW5kZi5jby80c3pES094" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061374">GitHub Copilot: Accelerate Your Software Innovation</a></h3>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/x0hph3ue23znnmf5/aHR0cHM6Ly9mYW5kZi5jby80c3pES094" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061374">GitHub Copilot</a> is your agentic AI coding partner that works across your editor, the command line, and GitHub, bringing real project and codebase context into your workflow. Get real‑time code suggestions, stay in flow, and offload tasks like spec‑driven development, test generation, documentation, and app modernization.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Whether you’re shipping a new feature or migrating an existing app, GitHub Copilot helps you move faster with less overhead, so you can focus on solving real problems. <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/x0hph3ue23znnmf5/aHR0cHM6Ly9mYW5kZi5jby80c3pES094" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061374">Get started for free</a></p>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px">
<h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/6qhehoulrowppqco/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061375">Datadog</a>
</h4>
<p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"><em>Datadog’s free <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/6qhehoulrowppqco/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061375">Front-end Developer Kit</a> gives you instant access to three killer resources that help you understand your users and troubleshoot issues effectively.</em></p>
</div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">We usually try to keep these <span role="img" aria-label="soft ice cream">🍦</span> JavaScript, but here’s one for you React devs this week.</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token keyword" style="color: #f38ba3; font-size: 14px;">import</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span> useState <span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">from</span> <span class="token string" style="color: #f99157; font-size: 14px;">'react'</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">export</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">default</span> <span class="token keyword" style="color: #f38ba3; font-size: 14px;">function</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">Counter</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">const</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">[</span>number<span class="token punctuation" style="color: #231F20; font-size: 14px;">,</span> setNumber<span class="token punctuation" style="color: #231F20; font-size: 14px;">]</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token function" style="color: #9d7dce; font-size: 14px;">useState</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">0</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token keyword" style="color: #f38ba3; font-size: 14px;">return</span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span>h1<span class="token operator" style="color: #12b5e5; font-size: 14px;">></span><span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>number<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span>h1<span class="token operator" style="color: #12b5e5; font-size: 14px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span>button onClick<span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> <span class="token punctuation" style="color: #231F20; font-size: 14px;">{</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>number <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>number <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span>number <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">></span>Increment<span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span>button<span class="token operator" style="color: #12b5e5; font-size: 14px;">></span>
<span class="token operator" style="color: #12b5e5; font-size: 14px;"><</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">/</span><span class="token operator" style="color: #12b5e5; font-size: 14px;">></span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span>
<span class="token punctuation" style="color: #231F20; font-size: 14px;">}</span>
</code></pre>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Cool Bits</h2>
</div>
<ol>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Pierce Boggan wrote about <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/kkhmh2unwme8lgfl/aHR0cHM6Ly9jb2RlLnZpc3VhbHN0dWRpby5jb20vYmxvZ3MvMjAyNi8wMy8xMy9ob3ctVlMtQ29kZS1CdWlsZHMtd2l0aC1BSQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061376">how the VS Code team builds VS Code with AI</a>. Sadly, we didn’t get any details about how they trick their bosses into thinking that they actually use Copilot.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Andrew Nesbitt wrote about the <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/58hvh8ugx705mvs6/aHR0cHM6Ly9uZXNiaXR0LmlvLzIwMjYvMDMvMjUvdGhlLXRvcC0xMC1iaWdnZXN0LWNvbnNwaXJhY2llcy1pbi1vcGVuLXNvdXJjZS5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061377">top 10 biggest conspiracies in open source</a>, and he didn’t even mention how the original Zeit cofounder was just deployed to Iran.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Kyle Tryon wrote <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/25h2h9u39dg728c3/aHR0cHM6Ly9ibG9nLnNlbnRyeS5pby9qYXZhc2NyaXB0LWxvZ2dpbmctbGlicmFyeS1kZWZpbml0aXZlLWd1aWRlLz91dG1fY2FtcGFpZ249JnV0bV9jb250ZW50PW5ld3NsZXR0ZXItc2Vjb25kYXJ5LWJsb2ctanMtbG9nZ2luZy1sZWFybm1vcmUmdXRtX21lZGl1bT1wYWlkLWNvbW11bml0eSZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061378">the definitive guide to choosing a JavaScript logging library in 2026</a>, including why Sentry’s runtime-agnostic logger stands out as the best new entry. We might be a <em>little</em> biased, but we definitely agree. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/qvh8h8udwnv8rvul/aHR0cHM6Ly9zdWdhci1oaWdoLnZlcmNlbC5hcHAv" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061379">Sugar High</a> is a super lightweight syntax highlighter for JavaScript and JSX, which reminds me that it’s been almost 45 minutes since my last pack of Sour Patch Kids Watermelons.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Neciu Dan gave some unsolicited advice on <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/g3hnhwum9pne3oir/aHR0cHM6Ly9uZWNpdWRhbi5kZXYvbmFtZS15b3VyLWVmZmVjdHM=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061380">why you should start naming your useEffect functions</a>. The best advice is always unsolicited, as my dad would say.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Expo just shipped real <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/9qhzhdudw9xgplf9/aHR0cHM6Ly90cnkuZXhwby5kZXYvZXhwby11aS1ieXRlcw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061381">Jetpack Compose and SwiftUI in React Native</a>. So you get the same components, same behavior, and same platform polish as native developers - but all in React Native. [sponsored]</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">The Thesys engineering team wrote about how <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/3ohphdu3mzrq7dhr/aHR0cHM6Ly93d3cub3BlbnVpLmNvbS9ibG9nL3J1c3Qtd2FzbS1wYXJzZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061382">rewriting their Rust Wasm parser in TypeScript made it 3x faster</a>, and they were never heard from again.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/n2hohquvqrgn3nt6/aHR0cHM6Ly9naXRodWIuY29tL3BucG0vcG5wbS9yZWxlYXNlcy90YWcvdjExLjAuMC1iZXRhLjA=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061383">pnpm 11 beta</a> just dropped, but I gotta say that this preview wasn’t quite as exciting as the new sad-boi SpiderMan one.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"><a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/48hvh7umlg90rrsx/aHR0cHM6Ly96ZXJvLnJvY2ljb3JwLmRldi9kb2NzL3JlbGVhc2Utbm90ZXMvMS4w" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061384">Zero 1.0</a> is the first stable release of Rocicorp’s local-first sync engine for web apps.</p>
</li>
<li>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;">Addy Osmani wrote about <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/wnh2h6uq7g4rwqa7/aHR0cHM6Ly9hZGR5b3NtYW5pLmNvbS9ibG9nL2NvbXByZWhlbnNpb24tZGVidC8=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061385">Comprehension Debt</a>, which he calls “the hidden cost of AI generated code.” I always thought that term referred to my ability to only read at a 5th-grade level, but I’m proud to announce I finally finished the first <em>Diary of a Wimpy Kid</em> book.</p>
</li>
</ol>
<hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;">
<div style="text-align:center;margin-bottom:36px">
<img width="110" src="https://bytes.dev/images/content/spot-the-bug.png" alt="Spot the Bug logo" style="max-width: 100%;"><h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;">Spot the Bug: Solution</h2>
<div class="section-presenter" style="margin-bottom:50px;margin-top:15px"><h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;">Sponsored by <a href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/6qhehoulrowppqco/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZnJvbnRlbmQtZGV2ZWxvcGVyLWtpdC8_dXRtX2NhbXBhaWduPWRnLWNvcmVwbGF0Zm9ybS13dy1mcm9udGVuZC1kZXYta2l0LWJ5dGVzJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzZGV2" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1843061375">Datadog</a>
</h4></div>
</div>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">You might expect that clicking the button would increment our <code style="font-size: 14px;">number</code> state by 3, but that’s not how it works. In short, JavaScript creates a closure around the <code style="font-size: 14px;">number</code> variables so it’s as if we’re doing</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">0</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">0</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token number" style="color: #fcba28; font-size: 14px;">0</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">which of course will always set <code style="font-size: 14px;">number</code> to 1.</p>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">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 -</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">n</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> n <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">n</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> n <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
<span class="token function" style="color: #9d7dce; font-size: 14px;">setNumber</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">(</span><span class="token parameter" style="color: #f38ba3; font-size: 14px;">n</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=></span> n <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">)</span><span class="token punctuation" style="color: #231F20; font-size: 14px;">;</span>
</code></pre>
<p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">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 <code style="font-size: 14px;">number</code> of 3.</p>
<pre class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; overflow: auto; padding: 24px; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><code class="language-js" style="-moz-hyphens: none; -moz-tab-size: 2; -ms-hyphens: none; -o-tab-size: 2; -webkit-hyphens: none; color: #c0c5ce; direction: ltr; font-family: 'Fira Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace; font-size: 14px; hyphens: none; line-height: 1.5; tab-size: 2; text-align: left; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token number" style="color: #fcba28; font-size: 14px;">0</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span>
<span class="token number" style="color: #fcba28; font-size: 14px;">1</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">2</span>
<span class="token number" style="color: #fcba28; font-size: 14px;">2</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">+</span> <span class="token number" style="color: #fcba28; font-size: 14px;">1</span> <span class="token operator" style="color: #12b5e5; font-size: 14px;">=</span> <span class="token number" style="color: #fcba28; font-size: 14px;">3</span>
</code></pre>
<div style="text-align:center;padding-bottom:80px;padding-top:80px">
<div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"><div style="margin-top:-40px">
<img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"><h5 style="font-size:18px;font-weight:400;margin-bottom:24px">Want us to say nice things <br> about your company?</h5>
<div style="margin-bottom:16px"><a style="background-color: #FCBA28; border: 1px solid #231F20; border-radius: 100px; color: #231F20; font-size: 14px; font-weight: 600; padding: 8px 14px; text-decoration: none;" href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/reh8h9umdx7q0wb2/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1843061386">Sponsor Bytes</a></div>
<div style="margin-bottom:20px"><a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/08hwhgu2ezxmdzbl/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1843061387">or share it</a></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;">Built with ❤️ by<!-- --> <a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/8ghqh3uod93glkhk/aHR0cHM6Ly9maXJlc2hpcC5kZXY=" url-id="1843061388">Fireship</a></p>
</div></div>
<p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;">50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101</p>
<div style="font-family:Papyrus, cursive"><a class="unsubscribe-link" href="https://c5e21242.click.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv/vqh3hmuo0g4npmug/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1843061389">Unsubscribe from Bytes</a></div>
</div>
</div></td>
<td style="border-collapse: collapse !important; word-break: normal;"></td>
</tr></tbody></table>
<span style="display: none"><a href="https://c5e21242.unsubscribe.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv">Unsubscribe</a></span>
<!-- -->
<img src="https://c5e21242.open.convertkit-mail.com/wvueve6q00ighk70o77t7hnzwr88wu8hw5nv" alt="">
</body>
</html>