Hi everyone!

It was Jamstack Conf this week, and we had some nice announcements for the occasion, like Tanstack Router, Gatsby 5 or the results of their annual survey.

Expo released its superb SDK 47. The 1st release-candidate React-Native 0.71 leads to some Android build issues 😅.

Next.js and React-Native now both use TypeScript by default on new apps.

Last chance to buy the Three.js Journey course with the promo code TWIR (-30%, expires tomorrow). It has just been upgraded with 24 hours of React-Three-Fiber modules. I take this opportunity to highlight Maxime Heckel's blog who took the course last year and is now able to do some pretty cool 3D! He has just published an impressive article on particles.

💡 Check this newsletter on Twitter - visual format 🎨

💸 Sponsor

How come professionals in every other industry have specialized tools, but web developers are still stuck using the browser that their grandma is using for shopping on Amazon?

If you're opening localhost:3000 in any other browser except Sizzy, you're wasting hours of your precious time.

Before Sizzy: web development is stressing you out, responsive design is hard, you have an overwhelming amount of opened tabs and apps.

After Sizzy: all the tools you need are in one place, responsive design is a breeze, no more context switching.

You can download it here and try it for free for 14 days!

⚛️ React

TanStack Router

Tanner unveils his new project: a 100% typesafe, framework-agnostic router. An impressive list of features, including:

• URL State Management
• Built-in Caching
• Search Param Schema/Validation
• Auto Prefetching
• Loaders/Actions
• Async Elements + Code-Splitting

At first glance, it looks like there is some inspiration from Remix or React-Router, but the API is quite different and not based on JSX, which probably help to make the solution agnostic and typesafe. For now there is only the React adapter, and the doc is incomplete, but it looks quite promising!

🔗 Useful links:

• 🐦 Tanner Linsley launches his project on Twitter with a great trailer!
• 🐦 Ryan Florence could use some inspiration from his work to improve Remix type-safety.

Gatsby 5: The Fastest Gatsby Yet

Gatsby 5.0 has just been officially released. It includes the Gatsby Slice API which allows to improve the build time when modifying a layout element (header, footer...), and the support in beta of the Server Components which allow partial hydration. There are also new Head/Script components, GraphiQL v2, and more.

Gatsby also presented Valhalla, a new service on their cloud that proposes to use Gatsby source plugins to create a content hub and a unified GraphQL API decoupled, from Gatsby. It is possible to use Valhalla with Next.js.

Static site generators are not very popular at the moment, despite still being suitable for many sites, I think it's good that at least one big player continues to innovate in the field. The Slice API looks like a good idea. I wish Valhalla could run locally, but I think it's a cloud service only.

🔗 Useful links:

• 📜 Gatsby 5.0 - Release Notes
• 📜 Valhalla Content Hub Explained
• 📜 Gatsby 5 Upgrade. Say No to YOLO
• 📜 Partial Hydration (Beta) Explained
• 📜 The Gatsby Slice API: High Precision Incremental Builds
• 🎥 Valhalla Content Hub video

React Router-ing Remix

Many Remix data APIs have been added in React-Router 6.4, and much more. Now it's Remix's turn to officially rely on these new React-Router APIs. The upgrade will be done in 4 incremental and backwards compatible steps delivered in Remix v1.x with feature flags. The vision is to make Remix v2 a compiler for React-Router 6.4.

🔗 Useful links:

• 🗺 Remix on Router v6.4
• 💬 Remix RFC - v2 meta API
• 💬 Remix RFC - Flat Routes
• 🎙️ Remix + Shopify - Twitter Space

• 👀 React Core PR - Support Promise as a renderable node
• 📊 Jamstack Community Survey 2022: React is widely used at 71%, Next.js accounts for 1 in 2 projects, Remix is growing nicely, and Docusaurus is doing well too 😜
• 📜 React Router 6 Deferred Fetch: pretty cool article that shows how to use the defer API, and highlights some subtleties to understand for error handling and avoiding waterfalls.
• 📜 Reduce cumulative layout shift in Docusaurus with fontaine: the same technique used by @next/font can be used in other contexts (not limited to Docusaurus) to improve the CLS score
• 📜 Playing with Astro: Sharing State Between React and Vue Components: shows how React and Vue can cohabit on an Astro app, and share a state via nanostores.
• 📜 Remix Simplifies Things: Brad explains why he likes Remix. He can write less JavaScript/React, and more HTML. Using Tailwind seems easier than the links API with regular stylesheets.
• 📜 Why I Ditched Django for NextJS: Bill was a "Python guy" working on Google Compute Engine. Finally, he recommends using Next.js (or at least JS/TS) and avoiding Python/Ruby for web projects.
• 📜 How to Integrate Storybook with Hydrogen: the integration is not so simple and requires to configure Vite correctly.
• 📜 What's New in Next.js 13: a good overview of Next.js v13 new features
• 📜 What does CSR, SSR, SSG and ISR means and why should you care?: now a good overview of Next.js rendering features before Next.js v13
• 📜 Implementing 3D Graphics In React: intro to React-Three-Fiber
• 📜 The magical world of Particles with React Three Fiber and Shaders: advanced article on creating particle scenes with React-Three-Fiber and Frame Buffer Objects
• 🎨 Taxonomy - An open source application using everything new in Next.js 13
• 🐦 TanStack Query for Angular: React-Query is progressively ported to other frameworks
• 🐦 scheduler.yield() - Upcoming Web API, useful for React?
• 🐦 Next-Auth - getServerSession() in Server Components
• 🧵 Meet the new create-next-app: uses TypeScript by default
• 🧵 You might not need Context in Server Components in Next.js 13: Sebastian gives different alternatives to the React context for use in Server Components
• 🎥 NextJS 13 Warning: Easy Mistake = Infinite Loops
• 📦 React-Three-Next - updated to Next.js v13
• 📦 Redux ToolKit 1.9
• 📦 derive-zustand
• 📦 Generouted 1.6 - file-based routes for Vite
• 📦 udomsay - A stricter, signals driven, JSX based library

💸 Sponsor

Jamf - Easily Secure and Manage Your Apple Devices

Jamf Now is a mobile device management (MDM) solution for Apple devices. This solution makes device management tasks easy such as configuring Wi-Fi and email settings, deploying apps, securing sensitive company data, and enforcing passcodes. The Jamf Fundamentals plan contains additional security features including Malware Prevention to prevent malicious threats from running on your devices. Sign up and manage up to 3 devices for free and add more for just $2 per device, per month. For more power, upgrade to Jamf Fundamentals to manage 3 devices for free and add more for $4 a month per device.

📱 React-Native

Expo SDK 47

The new SDK 47 has just been officially released, with a more detailed article on what's new.

• React Native 0.70.5 and React 18.1.0
• Expo Modules API 1.0 allows to create very easily native Fabric modules in Swift/Kotlin
• Hermes available on Expo Go iOS, simplified debugging experience. Hermes will be the default engine in the next SDK
• Fabric support in several Expo modules
• Expo Router in beta: file-system routing for React-Navigation
• Various EAS improvements: end-to-end security, M1 workers...

In short, a very nice release! With Expo Modules, it seems easier to adopt the new architecture compared to official tools like react-native-codegen which doesn't support Swift yet.

• 📦 React-Native 0.71 RC.0: includes TypeScript types, uses TypeScript by default for new apps, Flex gap support... A release that also broke Android builds (now fixed)
• 👥 Open Native: Native Modules, for all: an interesting initiative that proposes to de-duplicate the effort of creating native modules between different ecosystems (React-Native, Flutter, Capacitor, NativeScript...) via agnostic native modules and adapters.
• 📜 Migrating a React Native Library to the New Architecture: Oscar migrated React-Native Slider to Fabric, lists the challenges he encountered, and explains the 4 main steps to migrate an existing library, or create a new one.
• 📜 Introducing End-to-end Security to EAS Update with Code Signing
• 📜 Flutter vs. React Native: Which is the right cross-platform framework for you?
• 💬 RFC: Metro package exports support + Node.js - define "react-native" community condition
• 💬 RFC: Vision for Layout Conformance/Parity
• 🎉 React-Native - Use TypeScript by default for new applications
• 🎙️ RNR 251 - Examining React Native 0.70
• 🎥 React-Native and Bluetooth Low Energy ( BLE ) - Send and Receive Data
• 🎥 Animated FlatList in React Native
• 📦 Storybook-Solito

🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 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

• Announcing Rome v10: first stable release of the Rome toolchain, which proposes to replace ESLint/Prettier by a faster and easier to use Rust alternative. What attracts me the most is not the speed but especially the part about Error Recovery and error messages.
• Introducing the CodeSandbox GitHub App: offers an integration to facilitate contributions and review of pull-requests. This is reminiscent of the recently launched StackBlitz Codeflow, but with a rather different technology.
• Jest over Vitest: Brad decided to stay on Jest for now, after an attempt to migrate to Vitest that didn't really improve the execution speed and presented some challenges.
• Vitest 0.25:allows you to write tests for its TypeScript types
• TypeScript PR - Convert TypeScript to modules: in TypeScript 5.0, tsc will be 10-25% faster
• Xata - Serverless Data Platform for modern web builders
• Tina CMS 1.0
• Safari Technology Preview 157
• ESLint - consistent-type-imports
• Client-side Routing without the JavaScript
• Performance: Rust and its relationship with Node.js
• What is a realm in JavaScript?
• Tailwind CSS turns 5 years old
• New to the web platform in October
• Protobuf-ES: The Protocol Buffers TypeScript/JavaScript runtime we all deserve
• ESLint v8.27
• Node.js - drop fetch experimental warning
• Node.js - Nov 3 2022 Security Releases
• Playwright now has new getBy APIs

🤭 Fun

For even more fun, this new Twitter thread lists all my finds. Many of them have never been published in the newsletter, as I only include one per week.