This Week In React 102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, Node 18, HTTP 103, CSS :has()...

Hi everyone!

Lexical seems to be a modern alternative to Draft.js.

Redux invites us more than ever to adopt Redux Toolkit.

Many libraries provide support or better compatibility with React 18.

React-Native: the adoption of the new architecture is well underway, with several early adopters releasing TurboModule-related libs and content.

The web platform continues to improve, and Node 18 improves its compatibility with standards by adding thefetch()API.

Support the newsletter:

• Recommend it to your friends: it really helps!
• Sponsor This Week In React
• Write testimonials on Twitter
• Retweet the latest Twitter thread
• Reply to thisemail:feedback is welcome
• Follow onLinkedIn

If you like this newsletter, subscribe in priority there:

• ThisWeekInReact.com
• ReactHebdo.fr

React

Lexical

New open-sourced lib by Meta for creating extensible text editors (with a system of plugins to support mentions, hashtags, collaborative editing...). It seems to be amodern, lightweight alternative to Draft.js(no need to use ImmutableJS this time ). Doesn't specifically depend on React, but provides an official binding. Can be used by other frameworks and could even targetother plateforms(iOS support planned)

A Quick Guide to Mitosis

Mitosis is a tool that allows you to create a design system with a dialect close to React/JSX (inspired by Solid). Mitosis is able to compile these components to various frameworks (React, Angular, Svelte, React-Native...). This can be handy for large companies that use multiple frameworks over time. This official article is a good introduction.

Multiple forms per route in Remix

Explains how to manage 2 forms associated with the same Remix route. It's only possible to have oneActionFunctionper route, so the best solution seems to be to use theactionattribute on the submit button.

Accessible React Forms

A good overview of some accessibility principles in a React context: description ofaria-*props and their impact on screen readers, color, focus ring...

Storybook Lazy Compilation for Webpack

The upcoming Storybook 6.5 will include performance improvements to improve the local DX through lazy compiling stories: 3x faster startup, 2x faster rebuild. The impact seems significant for larger Storybooks. Compare withLadle, an alternative to Storybook released recently that also tries to improve performances.

Extras:

• Static Full-Text Search in Next.js with WebAssembly, Rust, and XorFilters: a part dedicated to integrating WebAssembly with Next.js (Webpack config).
• Introducing React-admin V4: already presentedlast week, now v4 is officially released.
• Why you should always Cleanup Side Effects in React useEffect and How to Cleanup
• The Duality of CLS with Lazy Loading Components
• Migrating your React app from Webpack to Vite
• React Higher-Order Components (HOCs)
• What's New in React 18
• Why Redux Toolkit is How To Use Redux Today: new doc nudging you to adopt Redux Toolkit.
• React-Router v6.x:preview 1,preview 2
• Remotion: StackBlitz support
• Module Federation Support for Next.js
• Lighthouse + Next.js guidance
• Next-Markdown: new lib to integrate Markdown content in Next.js. Supports MDX, Table of Contents, index...
• Redux 4.2:createStoredeprecated with a warning
• React-Redux v8: compat React 18, codebase in TypeScript.
• Generouted: file-based routing, integration between React-Location and Vite. Modern features to compete with meta-frameworks: supports code-splitting, data loaders, nested layouts...
• Zustand v4.0.0-rc.0: JS backward compatible. Breaking changes TS.
• Proxy-Memoize 1.0: interesting alternative to Reselect to create memoized selectors, but can be used for other cases as well.
• Create-React-App v5.0.1: improves React 18 compat
• React-Hooks-Testing-Library v8.0
• Ryan Carniato - A First Look at Next.js
• Intellij 2022.1: improves IDE Next.js support
• Official React-Query Course

React-Native

• Create high-performance graphics with React Native Skia
• React-Native-Skia:drop-in React-Native-Svg replacement?
• PR: Add TypeScript support in New Architecture/Codegen: it is possible to writeTurboModule specin TypeScript (to describe your native module API)
• React-Native-Turbo-Starter: a boilerplate to create modern React-Native modules leveraging the new architecture.
• React Native Turbo Secure Storage
• expo-github-action/command: can trigger an EAS build with a GitHub comment (experimental)
• React-Native devs Twitter community
• Creating a RN Turbo Secure Storage module from scratch
• React Native Turbomodule + TypeScript Codegen Tutorial

Other

CSS Parent Selector

CSS has a new :has() selector, often referred to as a "parent selector", which allows CSS rules to be applied to a parent element based on children. For example, you can change the parent layout of a card, but only if it contains an image element: this avoids having to apply a variant class on the parent. This article illustrates this new feature with many use cases. I found interesting the possibility of applying CSS variables on <html> according to the value of a <select> (useful demo for theming or dark mode support). Currently only available in Safari and Chrome Canary, but support could improve fast.

Be careful not to abuse it: in a component model like React, it is better to limit yourself to targeting local classes to avoid breaking the encapsulation model of your component.

New 103 HTTP Status Code (Early Hints)

A new status code is officially added in the HTML spec. It allows sending "early hints" to the browser to prefetch/preload resources before receiving the 200 response from the server. It seems useful particularly for CDNs (read thisCloudflare article) which will be able to send cached early hints (or even predicted through machine-learning ) while fetching fresh content from the origin server.

Building a dialog component

With<dialog>added in Safari 15.4 andgrowing support, it's time to take a look at this new element. Adam Argyle offers us a fairly complete article on the subject: based on the most modern web APIs, he implement a mega/mini modals with animation, accessibility, responsive, light dismiss, custom events...

Extras:

• Node.js 18: freshly released! With experimental support forfetch(), Web Streams, a test runner...
• navigation-api:intent to ship Blink/Chromium
• The Front-End Developer's Guide to the Terminal
• Innovating beyond libraries and frameworks
• Declarative design
• WebAssembly2.0 First Public Working Drafts
• NodeJS packages don't deserve your trust
• Announcing Fastify v4 release candidate!
• Shopify/Javy: JS to WebAssembly toolchain
• Deno Cheat Sheet
• Netlify Edge Functions on Deno Deploy
• Will Tauri Be an Electron Killer?
• How Jotai Specifies Package Entry Points
• The Ultimate Guide to Optimizing JavaScript for Quick Page Loads
• Exploring the new CSS color functions: CSS Color Module Level 5
• The Definitive Guide to Image Optimization
• JavaScript Function Composition: What's The Big Deal?
• Node.js 18 Introduces Prefix-Only Core Modules
• Dependabot alerts now surface if your code is calling a vulnerability
• Git security vulnerability announced
• GitHub Discussions: Organization Discussions, polls, and more
• Why is Builder.io creating Qwik and Partytown?
• Angular Developer Survey 2021 Results
• DuckDuckGo for Mac: A Private, Fast, and Secure Browsing App
• HTTPie: how we lost 54k GitHub star