This Week In React

Share this post

This Week In React #100: React 18, React-Native 0.68, Redwood 1.0, Remix, Next.js, R3f v8, TC39, Node.js Test Runner, Hydration, Rome...

substack.thisweekinreact.com

This Week In React #100: React 18, React-Native 0.68, Redwood 1.0, Remix, Next.js, R3f v8, TC39, Node.js Test Runner, Hydration, Rome...

Sébastien Lorber
Apr 5, 2022
Share this post

This Week In React #100: React 18, React-Native 0.68, Redwood 1.0, Remix, Next.js, R3f v8, TC39, Node.js Test Runner, Hydration, Rome...

substack.thisweekinreact.com

React

React v18.0

React 18 freshly released! This new version offers many improvements and APIs that we have already talked about: automatic batching, SSR streaming, Suspense, selective hydration, new hooks (useId, useDeferredValue, useTransition...)

This highly anticipated release also features Concurrent React. Rendering is no longer necessarily synchronous and atomic: it can be interrupted, paused and resumed... This allows to cut up the work in small slices with different priorities, and keep the interface responsive.

These concurrent features can be used today, but are mainly intended to be encapsulated inside a library or a framework (integrations planned in Remix, Next.js...).

This new renderer can produce breaking, and will only activate when using the new concurrent features of React 18, which allows for smooth incremental adoption. Upgrading React to v18 should therefore not be too complicated. If your app has problems in dev, it is advised to disable StrictMode.

Bottom Line: React 18 lays a new foundation, and most innovations are yet to come. Dan Abramov even calls this release an MVP whose goal seems to essentially facilitate the gradual adoption of Concurrent React. Some like Paul Henschel (React-Three-Fiber) or James Ide (Expo) already predict the some huge performance impacts.

I think we are entering a new era. Some web frameworks such as Svelte or Solid are becoming popular due to their simplicity and performances. Unlike React, they are truly responsive and virtual DOM free.

React's virtual DOM comes has a cost, but I think Concurrent React can hardly be implemented without this abstraction. With React 18+, we will finally know if this cost is worth being paid. It will be interesting to compare the UX, DX and performances of React against Svelte or Solid in the years to come.

RedwoodJS v1.0

It's Launch Week for Redwood, with v1.0 just released, and another big announcement scheduled for Thursday. This React meta-framework inspired by Ruby on Rails has stronger opinions than its competitors, and can help you ship a product faster with its opinionated integration with Prisma, GraphQL, Storybook, TypeScript, Jest... Its creator, Tom Preston-Werner (also creator of GitHub, Jekyll...) is financing the framework himself with $1M over the next year in a sustainable way (no VC)

Remixing React Router

The Remix and React-Router repos will merge under the name Remix, and many features present in Remix will be made available in React-Router: data loading, mutations, interrupts, revalidation, race-conditions... These abstractions are thought to work best with Suspense and the "render-as-you-fetch" pattern.

Extras:

  • 📜 Remix: The Yang to React's Yin

  • 📜 Improving Web Page Performance at DoorDash Through Server-Side Rendering with Next.JS: great feedback of a complex migration at scale

  • 📜 Hooks Considered Harmful

  • 📜 When Does React Render Your Component?

  • 📜 SSR Date Formatting in Remix using the User's Locale

  • 📜 How Does Shallow Comparison Work In React?

  • 📜 Trying out Ladle - A Storybook Alternative

  • 📜 Why React 18 Broke Your App

  • 🐦 React core team: Brian Vaughn leaves, Mengdi Chen enters

  • 🐦 useId() + React keys? ❌

  • 🐦 useDeferredValue mental model: "like debounce but React decides when to bounce"

  • 🐦 JSX && conditionals: pitfalls to know! There are ESLint plugins for that (1, 2)

  • 🐦 Next.js + Partytown "worker"

  • 🐦 React + Qwik

  • 🎥 The Story of Next.js

  • 📦 React-Three-Fiber: v8.0 (with React-Native support!) + Babel plugin

  • 📦 React Router v6.3.0: compatibility v5

  • 📦 React Testing Library v13

  • 📦 React-Query v4.0.0-beta.1

  • 📦 Chicane v1.0

  • 📦 Gatsby v4.11

💸 Sponsors

BeJSconf: JavaScript Conference In Brussels & Online

BeJSconf is happening in Belgium next May 13th, hosting members of TC39 and core team members of the trendiest JS libraries and frameworks, who’ve got you awesome talks and hands-on practices to let you get deep insights into the insides of JavaScript.

Talks on XState, Components or Multicore JS… are only a few! More importantly, non-tech topics such as leadership, DevRel, DX and such will be on the menu.

BeJSconf is also a way to celebrate and have fun; all with relishing some good Belgian fries and beer during the planned after-event party. 

React-Native

React Native v0.68

Very important release, since it is the first version of React-Native offering to easily activate the new architecture (Fabric and TurboModules) through a flag.

The next version of Expo (SDK 45) should be based on v0.68, but the new architecture won't be available immediately in Expo Go (but could probably be enabled in custom dev clients)

Extras:

  • 🐦 TypeScript moduleSuffixes: improves integration between TypeScript and React-Native extensions (Comp.ios.tsx)

  • 🐦 React Native for Web 0.18 preview

  • 📜 Deep dive into React Native JSI

  • 📜 Ionic vs. React Native: Performance Comparison

  • 📜 How do you cache FlatList.renderItem?

  • 🎥 React-Native-Skia: Neumorphism + Gen-Z mode

  • 🎙️ React Native Radio 230 - We React to News

  • 🎙️ React Native Show 12 - Mobile Payments in React Native

  • 📦 Nx Expo Support

  • 📦 OneSignal Expo Plugin

  • 📦 React-Native-Google-SignIn Expo Plugin

💸 Jobs

💡 Sponsor the newsletter to publish a job offer

Showtime - Remote - Top 1% (based on location)

Showtime is a decentralized social network ✨ You can think of it as the "Instagram for NFTs" where you can discover and support your favorite artists, create and showcase your digital art collection and soon be rewarded for the value you create. They plan to help artists reward their fans by letting them earn NFTs (instead of having to buy them).

They are using Expo with Expo Application Services. They are iterating as fast as the web3 ecosystem is moving by using React Native and Next.js together thanks to React Native for Web. They built a high-quality universal design system that works on iOS, Android and Web: Universal UI. They are planning to open-source the frontend monorepo very soon.

They just launched the beta on iOS and Android. Send a message to Axel on Twitter or an email at axeldelafosse@gmail.com to learn more.

PS: I used to work with Henry, one of the engineers at Showtime!

Partners

  • Start React Native: learn everything about gestures and animations with William Candillon

  • Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!

  • TypeScript Weekly: the best TypeScript links every week, right in your inbox

  • ES.next News: learn about the latest in JavaScript and cross-platform tools

  • Tailwind Weekly: all things Tailwind CSS, new issue every Saturday

  • G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis

  • Infinite Red: US React-Native experts making your idea a reality

  • Software Mansion: the co-creators of React Native and the technological core of many tech companies

Other

Updates from the 89th TC39 meeting

Huge TC39 update! My highlights:

  • Decorators stage 3, on track to finally land!

  • Change Array by Copy in stage 3: immutable methods on JS arrays! Also an important step step for Records & Tuples to progress.

  • Type annotations stage 1 🤯

  • Intl.MessageFormat in stage 1: could reduce bundle size of apps using React-Intl.

Extras:

  • A Built-in Test Runner Is Coming to Node and Why You Should Care: new out-of-the-box test runner in Node.js 18! 🤯

  • Release Notes for Safari Technology Preview 142: CSS Container Queries!

  • From Static to Interactive: Why Resumability is the Best Alternative to Hydration: interesting model used by Qwik

  • Announcing Rome Formatter

  • How to Write TypeScript Like a Haskeller

  • Conquering JavaScript Hydration

  • How return await can slow down your code

  • Optimising Core Web Vitals on SPAs

  • Cache and Prizes - Serious Platforms Don't Play Favourites

  • TypeScript Optional variance annotations

  • TS Pattern v4.0

  • Boxed: Functional utility types and functions for TypeScript

  • Types as comments: Strong types, weakly held

  • The Ultimate TypeScript Thread

  • WebContainers are out of beta in Chromium

  • Parcel v2.4.0

  • Vite 2.9

  • Understanding CSS Layout Algorithms

  • Picture perfect images with the modern <img> element

  • Those HTML Attributes You Never Use

  • Dum: npm script runner in Rust

  • Storybook Figma plugin beta

  • What’s new in Node.js core? March 2022 edition

  • Astro 1.0 Beta Release

  • 14 Linting Rules To Help You Write Asynchronous Code in JavaScript

  • Node.js community update

  • GraphQL Yoga 2.0

  • Electron v18.0

Twitter avatar for @mpocock1
Matt Pocock @mpocock1
Every damn time https://t.co/3qDG8QrWHO
Image
8:49 PM ∙ Jan 18, 2023
Share this post

This Week In React #100: React 18, React-Native 0.68, Redwood 1.0, Remix, Next.js, R3f v8, TC39, Node.js Test Runner, Hydration, Rome...

substack.thisweekinreact.com
Previous
Next
Comments
TopNewCommunity

No posts

Ready for more?

© 2023 Sébastien Lorber
Privacy ∙ Terms ∙ Collection notice
Start WritingGet the app
Substack is the home for great writing