Email: Bytes: The compiler is coming for us all

Subject:
Bytes: The compiler is coming for us all
Received:
7/25/2025, 4:18:04 PM
From:
"Tyler from ui.dev" <tyler@ui.dev>
To:
desert.legend.57@rss.andrealin.it
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Bytes: The compiler is coming for us all&lt;/title&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
&lt;meta name="color-scheme" content="light dark"&gt;
&lt;meta name="supported-color-schemes" content="light dark"&gt;
&lt;link href="https://fonts.googleapis.com/css2?family=Fira+Mono&amp;family=Outfit:wght@400;500;700;900&amp;family=Paytone+One" rel="stylesheet"&gt;
&lt;style&gt;@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;
  }
}&lt;/style&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;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%;"&gt;&lt;tbody&gt;&lt;tr&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;td width="600px" style="border-collapse: collapse !important; width: 600px; word-break: normal;"&gt;&lt;div style="max-width:600px;padding-top:80px"&gt;
&lt;div style="text-align:center"&gt;&lt;img width="600" style="max-width: 100%; padding-bottom: 40px;" src="https://bytes.dev/images/bytes-banner-rounded.png" alt="Bytes"&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Today’s issue:&lt;/strong&gt; The inner workings of the TanStack machine, &lt;em&gt;Linter Idol&lt;/em&gt;, and developing a co-dependent relationship with my package manager.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Welcome to &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/3ohphdu3do0rdqar/aHR0cHM6Ly9ieXRlcy5kZXYvYXJjaGl2ZXMvNDEx" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229719"&gt;#411&lt;/a&gt;.&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="80" src="https://bytes.dev/images/content/eyes.png" alt="Eyeballs logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;The Main Thing&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/dooneese.jpg" alt="Dooneese from SNL saluting with her baby doll hand" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;useMemo saying thanks for the good times&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;The compiler is coming for us all&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The React team just released some &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/n2hohquvo8mgo3i6/aHR0cHM6Ly9yZWFjdC5kZXYvbGVhcm4vcmVhY3QtY29tcGlsZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229720"&gt;fresh new docs&lt;/a&gt; on React Compiler, which means we should be getting a stable release soon &lt;span role="img" aria-label="eyes"&gt;👀&lt;/span&gt;.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;But since React developers have been conditioned to fear change, many of us still have lingering questions like, &lt;em&gt;Why do we need this? How will this affect performance? Is this somehow Vercel’s fault?&lt;/em&gt;&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Let’s take a closer look.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Why does React need a compiler?&lt;/strong&gt; React’s default model is to re-render every time a state change occurs, but sometimes, you want to opt out of this behavior to improve performance. That’s traditionally required you to add manual memoization via &lt;code style="font-size: 14px;"&gt;useMemo&lt;/code&gt;, &lt;code style="font-size: 14px;"&gt;useCallback&lt;/code&gt;, and &lt;code style="font-size: 14px;"&gt;React.memo&lt;/code&gt; – which worked, but often felt tedious, brittle, and annoying to maintain.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;According to the new docs, React Compiler “frees you from this mental burden” by automatically adding more precise, fine-grained memoization than what you’d ever do manually.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Historically, I’ve tried to “free myself from my mental burdens” by seeking counsel from the online shaman I hired on Fiverr – but let’s see how React Compiler does it.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Here’s a manually memoized example of how we do things today:&lt;/p&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;import&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; useMemo&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; useCallback&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; memo &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;from&lt;/span&gt; &lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;'react'&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; ExpensiveComponent &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;memo&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;function&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;ExpensiveComponent&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; data&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; onClick &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; processedData &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;useMemo&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;return&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;expensiveProcessing&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;data&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;[&lt;/span&gt;data&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; handleClick &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;useCallback&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;item&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;onClick&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;[&lt;/span&gt;onClick&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;]&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;return&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
    &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;div&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;processedData&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;map&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;item&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
        &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;Item key&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; onClick&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;handleClick&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;/&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
    &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;/&lt;/span&gt;div&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;And here’s how you’d write the same code, knowing that React Compiler will memoize everything for you:&lt;/p&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;&lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;function&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;ExpensiveComponent&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; data&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; onClick &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; processedData &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;expensiveProcessing&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;data&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;const&lt;/span&gt; &lt;span class="token function-variable function" style="color: #9d7dce; font-size: 14px;"&gt;handleClick&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;item&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;
    &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;onClick&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;

  &lt;span class="token keyword" style="color: #f38ba3; font-size: 14px;"&gt;return&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
    &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;div&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;processedData&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;map&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;item&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;
        &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;Item key&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;id&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; onClick&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;handleClick&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;item&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;/&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
      &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
    &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&lt;&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;/&lt;/span&gt;div&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;&gt;&lt;/span&gt;
  &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;;&lt;/span&gt;
&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;That’s obviously a lot cleaner, but the tradeoff is that it forces you to trust in the React magic more than ever. The good news is that React Compiler has already produced some significant &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/48hvh7um25v92mcx/aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g_ZmVhdHVyZT15b3V0dS5iZSZ0PTMyMjMmdj1seUVLaHY4LTNuMA==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229721"&gt;performance gains and DX wins&lt;/a&gt; for various Meta apps – and I assume those developers were already half-decent at manual memoization.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Bottom Line:&lt;/strong&gt; The great compiling is finally upon us. And as AI coding tools continue cementing React as the Framework of Record&lt;span role="img" aria-label="trade mark"&gt;™️&lt;/span&gt;, now’s probably a good time to bake in a little more magic under the hood.&lt;/p&gt;
&lt;table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse; margin-top: 40px; text-align: center;"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td style="border-collapse: collapse !important; padding-top: 12px; word-break: normal;"&gt;
&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/wnh2h6uqo5n4oxs7/aHR0cHM6Ly9mYWNlYm9vay5jb20vc2hhcmVyL3NoYXJlci5waHA_dT1odHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDEx" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1768229722"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/fb-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/reh8h9um52475xa2/aHR0cHM6Ly93d3cubGlua2VkaW4uY29tL3NoYXJpbmcvc2hhcmUtb2Zmc2l0ZS8_dXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1768229723"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/li-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/08hwhgu27ovx7qal/aHR0cHM6Ly90d2l0dGVyLmNvbS9pbnRlbnQvdHdlZXQvP3RleHQ9VGhlJTIwbmV3JTIwUmVhY3QlMjBDb21waWxlciUyMGRvY3MlMjBqdXN0JTIwZHJvcHBlZCUyMGFuZCUyMHRoZSUyMGdyZWF0JTIwY29tcGlsaW5nJTIwaXMlMjBhbG1vc3QlMjB1cG9uJTIwdXMmdXJsPWh0dHBzJTNBJTJGJTJGYnl0ZXMuZGV2JTJGYXJjaGl2ZXMlMkY0MTE=" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1768229724"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/tw-share-icon.png"&gt;&lt;/a&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/8ghqh3uo50z35wak/bWFpbHRvOj9ib2R5PVRob3VnaHQlMjB5b3UlMjdkJTIwbG92ZSUyMHRoaXMlMjB3ZWVrJTI3cyUyMEJ5dGVzJTBBLS0tJTBBVGhlJTIwbmV3JTIwUmVhY3QlMjBDb21waWxlciUyMGRvY3MlMjBqdXN0JTIwZHJvcHBlZCUyMGFuZCUyMHRoZSUyMGdyZWF0JTIwY29tcGlsaW5nJTIwaXMlMjBhbG1vc3QlMjB1cG9uJTIwdXMlMEFodHRwcyUzQSUyRiUyRmJ5dGVzLmRldiUyRmFyY2hpdmVzJTJGNDExJnN1YmplY3Q9WW91JTIwbGlrZSUyMGNvcm5icmVhZCUzRg==" rel="noopener" style="color: #12b5e5; font-weight: 600; padding-left: 5px; text-decoration: none;" target="_blank" url-id="1768229725"&gt;&lt;img alt="" style="display: inline-block; max-width: 100%; width: 32px;" width="25" src="https://bytes.dev/images/em-share-icon.png"&gt;&lt;/a&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="150" src="https://bytes.dev/images/content/qa-wolf-logo.png" alt="QA Wolf logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;&lt;span&gt;Our Friends &lt;br class="mobile-break"&gt;(With Benefits)&lt;/span&gt;&lt;/h2&gt;
&lt;/div&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; max-width: 100%; padding: 24px; padding-bottom: 12px;"&gt;
&lt;img src="https://bytes.dev/images/content/awkward-faces.jpg" alt="4 people making upset faces" width="600" style="border-radius: 5px; max-width: 100%;"&gt;&lt;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;"&gt;Your whole team waiting on a ridiculously long QA cycle before they can ship&lt;!-- --&gt; &lt;/p&gt;
&lt;/div&gt;
&lt;h3 style="font-size: 24px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/vqh3hmuokxl4klbg/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNzI0LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19UcnlPdXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNXaXRoU2NpZW5jZV9fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTA3MjRfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWhlYWRsaW5lLVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzV2l0aFNjaWVuY2U=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229726"&gt;Speed up your team’s release cycles &lt;em&gt;*with science*&lt;/em&gt;&lt;/a&gt;&lt;/h3&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;99% of engineering teams’ problems could be solved by one thing: shipping higher quality code, faster.&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;That’s exactly what &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/l2heh6ulk0e4k2s6/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNzI0LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19UcnlPdXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNXaXRoU2NpZW5jZV9fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTA3MjRfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWJvZHktUUFXb2xm" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229727"&gt;QA Wolf&lt;/a&gt; did for Thirty Madison, who increased their app’s test cases by 10x while simultaneously saving developers 20% more time from slow QA cycles (&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/m2h7h6u3ngv9nzam/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9jYXNlLXN0dWRpZXMvdGhpcnR5LW1hZGlzb24_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9DdXRRQUN5Y2xlc18yMDI1MDcyNC1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9Q3V0UUFDeWNsZXNfVHJ5T3V0QVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzV2l0aFNjaWVuY2VfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNzI0X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVdhdGNoVGhlQ2FzZVN0dWR5" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229728"&gt;watch the case study&lt;/a&gt;).&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;strong style="font-weight: 600;"&gt;Here’s how it works:&lt;/strong&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;They create, maintain, and run automated Playwright tests to cover your entire app&lt;/li&gt;
&lt;li&gt;They provide &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/dphehmue74vk7gam/aHR0cHM6Ly93d3cucWF3b2xmLmNvbS9ob3ctaXQtd29ya3M_dXRtX2NhbXBhaWduPUFDUV9BbGxfRGVtb19Db252ZXJzaW9uc19fTmV3c2xldHRlckF1ZGllbmNlXy1fTmV3c2xldHRlcl9DdXRRQUN5Y2xlc18yMDI1MDcyNC1Ob25lX0V4cGVyaW1lbnQtRkFMU0UmdXRtX2NvbnRlbnQ9Q3V0UUFDeWNsZXNfVHJ5T3V0QVBlcnNvbmFsaXplZERlbW9fTm9uZV9IZWFkbGluZSUzQVNwZWVkVXBZb3VyVGVhbXNSZWxlYXNlQ3ljbGVzV2l0aFNjaWVuY2VfX19fTmV3c2xldHRlci1QcmltYXJ5UGxhY2VtZW50XzIwMjUwNzI0X3YxXyZ1dG1fbWVkaXVtPW5ld3NsZXR0ZXImdXRtX3NvdXJjZT1ieXRlcyZ1dG1fdGVybT1ib2R5LVVubGltaXRlZFBhcmFsbGVsUnVucw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229729"&gt;unlimited parallel test runs&lt;/a&gt; on their infrastructure, so you get pass/fail results in under 3 min&lt;/li&gt;
&lt;li&gt;You get zero flakes, because every failed test is reviewed by their team of human QA engineers&lt;/li&gt;
&lt;/ul&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/e0hph0u7np6en3u8/aHR0cHM6Ly93d3cucWF3b2xmLmNvbT91dG1fY2FtcGFpZ249QUNRX0FsbF9EZW1vX0NvbnZlcnNpb25zX19OZXdzbGV0dGVyQXVkaWVuY2VfLV9OZXdzbGV0dGVyX0N1dFFBQ3ljbGVzXzIwMjUwNzI0LU5vbmVfRXhwZXJpbWVudC1GQUxTRSZ1dG1fY29udGVudD1DdXRRQUN5Y2xlc19UcnlPdXRBUGVyc29uYWxpemVkRGVtb19Ob25lX0hlYWRsaW5lJTNBU3BlZWRVcFlvdXJUZWFtc1JlbGVhc2VDeWNsZXNXaXRoU2NpZW5jZV9fX19OZXdzbGV0dGVyLVByaW1hcnlQbGFjZW1lbnRfMjAyNTA3MjRfdjFfJnV0bV9tZWRpdW09bmV3c2xldHRlciZ1dG1fc291cmNlPWJ5dGVzJnV0bV90ZXJtPWN0YS1UcnlPdXRBUGVyc29uYWxpemVkRGVtbw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229730"&gt;Try out a personalized demo for your team&lt;/a&gt; – and see how they save 9 hours/week &lt;em&gt;*per engineer*&lt;/em&gt; for their customers.&lt;/p&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Pop Quiz&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;
&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/7qh7h2u94kq84rtz/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZGV2b3BzLWtpdC8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWRldm9wcy1raXQtYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229731"&gt;Datadog&lt;/a&gt;
&lt;/h4&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 16px; line-height: 1.5; margin-top: 5px; padding-left: 24px; padding-right: 24px;"&gt;&lt;em&gt;Their free &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/7qh7h2u94kq84rtz/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZGV2b3BzLWtpdC8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWRldm9wcy1raXQtYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229731"&gt;DevOps Kit&lt;/a&gt; gives you access to ebooks, technical talks, and solutions briefs packed with helpful techniques to adopt a data-driven DevOps culture at your org.&lt;/em&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;What does this evaluate to?&lt;/p&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;Array&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;from&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;length&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;26&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;x&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; i&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;i &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;+&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;10&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;toString&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;36&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;join&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;", "&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="110" src="https://bytes.dev/images/content/cool-bits.png" alt="Cool Bits logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Cool Bits&lt;/h2&gt;
&lt;/div&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;TanStack DB now has Svelte support and a new section in its docs about &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/owhkhwuw8kpn8qtv/aHR0cHM6Ly90YW5zdGFjay5jb20vZGIvbGF0ZXN0L2RvY3MvbGl2ZS1xdWVyaWVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229732"&gt;Live Queries&lt;/a&gt;. And it’s all possible because Tanner technically doesn’t &lt;em&gt;require&lt;/em&gt; sleep – his body can just achieve full REM cycles when he’s silently writing code inside a dimly lit room while listening to Enya.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Brian Morrison wrote about &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/z2hgh7ued4n7dmip/aHR0cHM6Ly9nby5jbGVyay5jb20vM1dvdlM5bg==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229733"&gt;How to add multi-tenancy to an app built with Clerk, Lovable, and Supabase&lt;/a&gt; – so you can turn your vibe-coded fever dream into a proper B2B platform that’s ready for the big leagues. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Last month, Em Sharnoff wrote an article called, &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/p8hehqu473md7eiq/aHR0cHM6Ly9zaGFybm9mZi5pby9ibG9nL3doeS1ydXN0LWNvbXBpbGVyLXNsb3c=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229734"&gt;Why is the Rust compiler so slow?&lt;/a&gt; Just know that reading it will probably get you put on some sort of Rust Mafia watchlist. No one’s seen Em in weeks.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/x0hph3ue7roz7gt5/aHR0cHM6Ly9ibG9nLnN3bWFuc2lvbi5jb20vcmVhbmltYXRlZC00LXN0YWJsZS1yZWxlYXNlLXRoZS1mdXR1cmUtb2YtcmVhY3QtbmF0aXZlLWFuaW1hdGlvbnMtYmE2ODIxMGMzNzEz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229735"&gt;Reanimated 4&lt;/a&gt; is a huge release for the popular React Native animation library that introduces a new declarative API for CSS-based animations and transitions.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/6qhehoul2kzwpvso/aHR0cHM6Ly9vcHRpbWVpc3QuY29tLz91dG1fY2FtcGFpZ249bGF1bmNoJnV0bV9pZD03MTYmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGU=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229736"&gt;Optimeist automatically optimizes your AWS Lambdas&lt;/a&gt; to reduce costs. It instantly detects your Lambdas and auto-tunes their memory, timeout, and configs based on real usage – kind of like the React Compiler, but for your AWS bill. [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/7qh7h2u94kq806iz/aHR0cHM6Ly9idW4uc2gvYmxvZy9idW4tdjEuMi4xOQ==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229738"&gt;Bun v1.2.19&lt;/a&gt; comes with a new &lt;code style="font-size: 14px;"&gt;bun why&lt;/code&gt; command that explains why a package was installed. There’s something therapeutic about being able to complain to my package manager.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Sergio Xalambrí wrote about &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/p8hehqu473md9lhq/aHR0cHM6Ly9zZXJnaW9keGEuY29tL3R1dG9yaWFscy91c2UtYWN0aW9uLXJvdXRlcy1pbi1yZWFjdC1yb3V0ZXI=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229741"&gt;using Action Routes in React Router&lt;/a&gt;.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/6qhehoul2kzwppto/aHR0cHM6Ly9naXRodWIuY29tL3R5cGVzY3JpcHQtZXNsaW50L3RzZ29saW50" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229743"&gt;tsgolint&lt;/a&gt; is an experimental JS/TS linter that’s written in Go, instead of the usual Rust – so that’s fun. Someone needs to create some sort of early-2000s reality TV competition show that pits all these next-gen linters against each other.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/kkhmh2un9dre8ltl/aHR0cHM6Ly9jYXJib25xYS5jb20vP3V0bV9jYW1wYWlnbj1jb29sX2JpdHMmdXRtX2NvbnRlbnQ9anVsMjQmdXRtX21lZGl1bT1lbWFpbCZ1dG1fc291cmNlPWJ5dGVz" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229744"&gt;CarbonQA&lt;/a&gt; provides high-quality QA services for dev teams, so you’ll never have to test your own app ever again. They work in your tools, talk with your team on Slack, and let your engineers spend more of their time on &lt;em&gt;actual engineering.&lt;/em&gt; [sponsored]&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Michael Shilman wrote about &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/58hvh8ug9vq05gu6/aHR0cHM6Ly9zdG9yeWJvb2suanMub3JnL2Jsb2cvc3Rvcnlib29rLWJsb2F0LWZpeGVkLw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229745"&gt;How they cut Storybook’s bundle size in half&lt;/a&gt; – proving that Ozempic really does work for everything.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;&lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/25h2h9u3ov6g74a3/aHR0cHM6Ly9yZWFjdC1zcGVjdHJ1bS5hZG9iZS5jb20vcmVsZWFzZXMvMjAyNS0wNy0yMi5odG1s" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229746"&gt;A new React Aria release&lt;/a&gt; adds support for async loading and infinite scrolling, better form integration, and lots more.&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5;"&gt;Jökull Sólberg wrote a quick post on &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/qvh8h8ud67zv8nul/aHR0cHM6Ly93d3cuc29sYmVyZy5pcy9mYXN0LXR5cGUtYXdhcmUtbGludGluZw==" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229747"&gt;Biome vs. Oxlint’s approaches to building faster, type-aware linting&lt;/a&gt;. Vote now for your favorite next-gen linter by calling our toll-free hotline at &lt;code style="font-size: 14px;"&gt;1-866-LINTERS&lt;/code&gt;, and you’ll be entered to win a lifetime supply of free smoothies at an Orange Julius location near you.&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;hr style="border: 0; border-bottom: 5px solid; border-color: #f5f5f5; margin-bottom: 100px; margin-top: 100px;"&gt;
&lt;div style="text-align:center;margin-bottom:36px"&gt;
&lt;img width="140" src="https://bytes.dev/images/content/pop-quiz.png" alt="Pop Quiz logo" style="max-width: 100%;"&gt;&lt;h2 style="font-family: Paytone One, sans-serif; font-size: 28px; margin-top: 10px; text-transform: uppercase;"&gt;Pop Quiz: Answer&lt;/h2&gt;
&lt;div class="section-presenter" style="margin-bottom:50px;margin-top:15px"&gt;&lt;h4 style="font-size: 19px; margin-bottom: 0; padding-left: 24px; padding-right: 24px;"&gt;Sponsored by &lt;a href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/7qh7h2u94kq84rtz/aHR0cHM6Ly93d3cuZGF0YWRvZ2hxLmNvbS9yZXNvdXJjZXMvZGV2b3BzLWtpdC8_dXRtX2NhbXBhaWduPWRnLWluZnJhLXd3LWRldm9wcy1raXQtYnl0ZXMmdXRtX21lZGl1bT1uZXdzbGV0dGVyJnV0bV9zb3VyY2U9Ynl0ZXNkZXY=" style="color: #12b5e5; font-weight: 600; text-decoration: underline;" url-id="1768229731"&gt;Datadog&lt;/a&gt;
&lt;/h4&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;What does this evaluate to?&lt;/p&gt;
&lt;pre class="language-js" style="background-color: #f9f9f9; border: 1px solid #f9f9f9; border-radius: 8px; color: #231F20; overflow: auto; padding: 24px;"&gt;&lt;code class="language-js" style="font-size: 14px;"&gt;Array&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;from&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;{&lt;/span&gt; &lt;span class="token literal-property property" style="color: #12b5e5; font-size: 14px;"&gt;length&lt;/span&gt;&lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;:&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;26&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;}&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token parameter" style="color: #f38ba3; font-size: 14px;"&gt;x&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;,&lt;/span&gt; i&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt; &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;=&gt;&lt;/span&gt; &lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;i &lt;span class="token operator" style="color: #12b5e5; font-size: 14px;"&gt;+&lt;/span&gt; &lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;10&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;toString&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token number" style="color: #fcba28; font-size: 14px;"&gt;36&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;.&lt;/span&gt;&lt;span class="token function" style="color: #9d7dce; font-size: 14px;"&gt;join&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;(&lt;/span&gt;&lt;span class="token string" style="color: #f99157; font-size: 14px;"&gt;", "&lt;/span&gt;&lt;span class="token punctuation" style="color: #231F20; font-size: 14px;"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;The English alphabet as a string – &lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;&lt;code style="font-size: 14px;"&gt;a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z&lt;/code&gt;&lt;/p&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 17px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Wow, neat.&lt;/p&gt;
&lt;div style="text-align:center;padding-bottom:80px;padding-top:80px"&gt;
&lt;div class="bg-alt" style="background-color: #f5f5f5; border-radius: 16px; margin-bottom: 40px; padding: 24px;"&gt;&lt;div style="margin-top:-40px"&gt;
&lt;img src="https://bytes.dev/images/bytes-icon.png" alt="Bytes" width="55px" style="max-width: 100%; width: 55px;"&gt;&lt;h5 style="font-size:18px;font-weight:400;margin-bottom:24px"&gt;Want us to say nice things &lt;br&gt; about your company?&lt;/h5&gt;
&lt;div style="margin-bottom:16px"&gt;&lt;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://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/9qhzhdud2q0xg4f9/aHR0cHM6Ly9ieXRlcy5kZXYvYWR2ZXJ0aXNl" url-id="1768229749"&gt;Sponsor Bytes&lt;/a&gt;&lt;/div&gt;
&lt;div style="margin-bottom:20px"&gt;&lt;a style="color: #FCBA28; font-size: 14px; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/3ohphdu3do0rq0ir/aHR0cHM6Ly9ieXRlcy5kZXYvc2hhcmU=" url-id="1768229750"&gt;or share it&lt;/a&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; padding-left: 24px; padding-right: 24px;"&gt;Built with ❤️ by&lt;!-- --&gt; &lt;a style="color: #ed203d; font-weight: 600; text-decoration: underline;" href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/n2hohquvo8mgnqi6/aHR0cHM6Ly91aS5kZXY=" url-id="1768229751"&gt;ui.dev&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;&lt;/div&gt;
&lt;p style="font-family: Outfit, sans-serif; font-size: 14px; line-height: 1.5; opacity: 0.5; padding-left: 24px; padding-right: 24px;"&gt;50 W Broadway Ste 333 PMB 51647 Salt Lake City, Utah 84101&lt;/p&gt;
&lt;div style="font-family:Papyrus, cursive"&gt;&lt;a class="unsubscribe-link" href="https://click.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3/48hvh7um25v908hx/aHR0cHM6Ly9ieXRlcy5kZXYvdW5zdWJzY3JpYmU=" style="color: #9B9890;" url-id="1768229752"&gt;Unsubscribe from Bytes&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;&lt;/td&gt;
&lt;td style="border-collapse: collapse !important; word-break: normal;"&gt;&lt;/td&gt;
&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;

&lt;span style="display: none"&gt;&lt;a href="https://unsubscribe.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3"&gt;Unsubscribe&lt;/a&gt;&lt;/span&gt;
&lt;!-- --&gt;
&lt;img src="https://open.convertkit-mail4.com/75udrd6o33f8h60zn5dazhwzgmo66tnh02g3" alt=""&gt;
&lt;/body&gt;
&lt;/html&gt;
Email Content
