Skip to main content

πŸ“¨ #136: Next.js, Signals, Bling, Suspense, Server Components, useSyncExternalStore, Expo, Reanimated, Metro...

Β· 9 min read
SΓ©bastien Lorber
SΓ©bastien Lorber
Newsletter Editor - Docusaurus maintainer

Hi everyone!

This week, the debate around the signal model continues. We also have a nice release of Next.js, unveiling a new cache system to facilitate the performant usage of Server Components on a serverless Edge runtime.

A lot of activity also on the React-Native side, with Expo 48, Expo Router 1.0, Expo Image 1.0, Reanimated 3.0, and the arrival of symlinks support in Metro!

πŸ’‘ Check this newsletter on Twitter - visual format 🎨

To support me:

Don't miss the next email!

    πŸ’Έ Sponsor​

    Suncel

    Build reusable blocks. Publish content faster. Get better Core Web Vitals and SEO.

    Content editors : a game changer for companies that need to produce a lot of content and have a strong SEO strategy. Marketers and content editors can edit and publish pages without any complexity. Eliminate long delays and publish instantly. Pages and images are optimized thanks to Next.js in order to achieve perfect Core Web Vitals scores.

    Developers : plug and play with your existing Next.js app. Number of benefits to use Suncel CMS as developer :

    • Build your reusable blocks in React
    • SEO Meta and sitemap are generated automatically (thanks to our SEO module)
    • Create your own custom settings in React
    • Admin customizable in React
    • No routing system needed to fit the CMS

    Visit Suncel.io | 5mn demo video

    βš›οΈ React​

    Next.js 13.2

    Next.js 13.2

    A nice release with some new features that Vercel devs had already given us a preview of. The new Metadata API is useful for SEO, works well with SSR streaming, server components and the new app directory. The new Route Handlers seem to have a good usability: co-located, just export the HTTP verb. Particularly excited by the new features around MDX (Rust compiler, Server Components): that should make Next.js content sites much lighter and faster to use. If I understand correctly, Next.js starts using a TypeScript codegen step for typed links (in addition to the TypeScript plugin). Turbopack compatibility with Webpack loaders can make it easier to adopt the new bundler.

    The biggest surprise for me is the introduction of a cache API directly integrated to fetch(): allows a bit the same thing as ISR but with a finer granularity, at the component level, for each request. There is even a tagging system. Next.js remains portable: the cache can be hosted on your own infrastructure, or use a local LRU cache. Of course, this is optimized for deploying on Vercel. A dedicated article gives more details and explains the limits of the ISR model: Vercel Cache API: A progressive cache, integrated with Next.js. See also the thread of Sebastian MarkbΓ₯ge.

    The Evolution of Signals in JavaScript

    The Evolution of Signals in JavaScript

    This article by Ryan Carniato (SolidJS) traces the history of signals in the frontend, through KnockoutJS, MobX and many other solutions.

    Signals remained the trending topic of the week. I suggest you read for yourself the many discussions that took place on Twitter:

    • Andrew Clark clarifies his position and is not closed to introducing signals into React. The React Forget compiler could compile to signals.
    • MiΕ‘ko Hevery explains how signals avoid perf problems on the drilling props.
    • Evan You prefers an understandable mutable model to an immutable model that leaks.
    • Devon Govett reminds us why "unidirectional data flow" was adopted and points out some problems with signals.
    • Jordan Walke mentions that they considered using a reactive model when React was created. Rejected because it changed the semantics of the language.
    • Dan Abramov explains that the user expects to see the same interface for the same data. He explains the value of using "raw values" (not wrapped in any container).
    • My position: I largely share the same views as the React team and think we need to continue to innovate on the current model, despite Signals looking attractive in the short term. I hope that eventually JavaScript will support better the immutable model, and that the React Forget compiler is only a transitional step.

    Don't miss the next email!

      πŸ’Έ Sponsor​

      Build and Run Synthetic Monitoring That Scales

      Build and Run Synthetic Monitoring That Scales

      You build it; you own it! It's a simple mantra that has driven software development for years. But how do you monitor complex React applications the best way?

      • First: use Playwright to mimic user flows and guarantee that your app works.
      • Second: be confident that the used APIs are up and running.

      "Monitoring as Code" - is a new way to define, test & deploy your entire application monitoring directly from code.

      • Code your monitoring setup and keep in version control
      • Test your application in preview environments to avoid bugs and regressions
      • Deploy your tests and start monitoring production

      Bring your monitoring next to your code for free

      πŸ“± React-Native​

      Expo 48

      Expo 48

      Nice release. We find back the highlights of the beta:

      • React Native 0.71.3 - React 18.2.0
      • Yoga improvements (Flexbox) that come with React-Native
      • EAS builders under M1 by default
      • Hermes engine by default
      • All Expo modules support Fabric - experimental

      Some updates since the beta:

      Reanimated 3.0

      Reanimated 3.0

      Reanimated 3.0 has just been released in a stable version, with a new Shared Elements Transitions feature (demo). It is now possible to use shared values in inline styles. The library has been rewritten to improve performance, DX and prepare for the arrival of new features. It is compatible with Fabric and the Reanimated 2 API to facilitate the upgrade, but the Reanimated 1 API has been removed.

      πŸ§‘β€πŸ’» Jobs​

      πŸ§‘β€πŸ’Ό Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote

      Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.

      πŸ§‘β€πŸ’Ό Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly

      Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

      πŸ§‘β€πŸ’Ό G2i - 100% Remote React Native Jobs

      We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

      πŸ’‘ How to publish an offer?

      πŸ”€ Other​

      🀭 Fun​

      alt

      See ya! πŸ‘‹


      Don't miss the next email!