DEV Community

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

Posted on • Edited on

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

#react #reactnative #javascript #typescript

Hi everyone!

Lots of things happened during my ski holiday 😅

We cover React 18, React-Native 0.68, and 2 weeks of full of news.

Short intro, no more space in the email 😄 we'll party another time to celebrate the 100th edition 🤪

🙏 Support the newsletter:

If you like this newsletter, subscribe in priority there:

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:

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:

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:

image

Top comments (0)

Read next

iprogrammer_solutionspvt profile image

Progressive Web Applications: Your Ultimate Guide to Modern Web Development

iProgrammer Solutions Pvt. Ltd. -

04anilr profile image

What is DOM (Document Object Modle) in JavaScript

Anil -

dartbot profile image

Build a Dartboard with Web Components & HTML Canvas🎯

Stephen Marsh -

shafayeat profile image

Advanced and Creative TypeScript Techniques for Professionals

Shafayet Hossain -