This Week In React #102: Lexical, Mitosis, Remix, Next.js, Redux, Storybook, TurboModules, Node 18, HTTP 103, CSS :has()...
Tags: react, reactnative, typescript, javascript
Published: 2022-04-20 07:46:13

---
series: This Week In React
---
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 the `fetch()` API.

🙏 **Support the newsletter:**

-   😘 **Recommend it to your friends**: it really helps!
-   💸 [**Sponsor This Week In React**](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   😍 [**Write testimonials on Twitter**](https://twitter.com/sebastienlorber/timelines/1448942785814466561?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   🧵 [**Retweet the latest Twitter thread**](https://slo.im/thread?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter)
-   📨 Reply to this [**email**](mailto:lorber.sebastien@gmail.com?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): feedback is welcome
-   👥 Follow on [**LinkedIn**](https://www.linkedin.com/company/this-week-in-react/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

**If you like this newsletter, subscribe in priority there**:

-   🇬🇧 [ThisWeekInReact.com](https://thisweekinreact.com/)
-   🇫🇷 [ReactHebdo.fr](https://reacthebdo.fr/)


[![](https://user-images.githubusercontent.com/749374/153181021-8fdb0ece-270a-4cf2-980b-4557d04316ad.png)](https://thisweekinreact.com)

---

## React

[**Lexical**](https://lexical.dev/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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 a [modern, lightweight alternative to Draft.js](https://news.ycombinator.com/item?id=31022152&utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) (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 target [other plateforms](https://news.ycombinator.com/item?id=31023832&utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) ([iOS support planned](https://twitter.com/trueadm/status/1514680423133196295?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter))

[**A Quick Guide to Mitosis**](https://www.builder.io/blog/mitosis-a-quick-guide?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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**](https://sergiodxa.com/articles/multiple-forms-per-route-in-remix?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#multiple-forms-per-route-in-remix)

Explains how to manage 2 forms associated with the same Remix route. It's only possible to have one `ActionFunction` per route, so the best solution seems to be to use the `action` attribute on the submit button.

[**Accessible React Forms**](https://www.carlrippon.com/accessible-react-forms/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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

[**Storybook Lazy Compilation for Webpack**](https://storybook.js.org/blog/storybook-lazy-compilation-for-webpack/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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 with [Ladle](https://www.ladle.dev/blog/introducing-ladle?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), an alternative to Storybook released recently that also tries to improve performances.

**Extras:**

-   📜 [Static Full-Text Search in Next.js with WebAssembly, Rust, and Xor Filters](https://hackernoon.com/static-full-text-search-in-nextjs-with-webassembly-rust-and-xor-filters-tldr?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): a part dedicated to integrating WebAssembly with Next.js (Webpack config).
-   📜 [Introducing React-admin V4](https://marmelab.com/blog/2022/04/13/react-admin-v4.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): already presented [last week](https://www.getrevue.co/profile/thisweekinreact/issues/this-week-in-react-101-astro-redwood-next-js-remix-react-admin-rust-reducers-webcomponents-gatsby-typescript-rome-1121624?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), now v4 is officially released.
-   📜 [Why you should always Cleanup Side Effects in React useEffect and How to Cleanup](https://dillionmegida.com/p/why-you-should-cleanup-when-component-unmounts/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [The Duality of CLS with Lazy Loading Components](https://wicki.io/posts/2022-03-cls-with-lazy-loading-components/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [Migrating your React app from Webpack to Vite](https://dev.to/wojtekmaj/migrating-your-react-app-from-webpack-to-vite-inp?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [React Higher-Order Components (HOCs)](https://www.robinwieruch.de/react-higher-order-components/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📜 [What's New in React 18](https://blog.appsignal.com/2022/04/13/whats-new-in-react-18.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📖 [Why Redux Toolkit is How To Use Redux Today](https://redux.js.org/introduction/why-rtk-is-redux-today?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): new doc nudging you to adopt Redux Toolkit.
-   🐦 React-Router v6.x: [preview 1](https://twitter.com/ryanflorence/status/1513957268898738179?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), [preview 2](https://twitter.com/ryanflorence/status/1513968694291939328?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🐦 [Remotion: StackBlitz support](https://twitter.com/remotion_dev/status/1515273796726497289?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🐦 [Module Federation Support for Next.js](https://twitter.com/ScriptedAlchemy/status/1514793313278128131?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🐦 [Lighthouse + Next.js guidance](https://twitter.com/hdjirdeh/status/1514440320192110597?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📦 [Next-Markdown](https://github.com/frouo/next-markdown?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): new lib to integrate Markdown content in Next.js. Supports MDX, Table of Contents, index...
-   📦 [Redux 4.2](https://github.com/reduxjs/redux/releases/tag/v4.2.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): `createStore` deprecated with a warning
-   📦 [React-Redux v8](https://twitter.com/acemarke/status/1515383796237012998?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): compat React 18, codebase in TypeScript.
-   📦 [Generouted](https://github.com/oedotme/generouted?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): 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](https://twitter.com/dai_shi/status/1515880958838571016?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): JS backward compatible. Breaking changes TS.
-   📦 [Proxy-Memoize 1.0](https://twitter.com/dai_shi/status/1514216846232530944?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): interesting alternative to Reselect to create memoized selectors, but can be used for other cases as well.
-   📦 [Create-React-App v5.0.1](https://twitter.com/iansu/status/1513935894859841536?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): improves React 18 compat
-   📦 [React-Hooks-Testing-Library v8.0](https://github.com/testing-library/react-hooks-testing-library/releases/tag/v8.0.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🎥 [Ryan Carniato - A First Look at Next.js](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=m-Gl_Cc8xOg)
-   💸 [Intellij 2022.1](https://www.jetbrains.com/idea/whatsnew/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): improves IDE Next.js support
-   💸 [Official React-Query Course](https://twitter.com/tannerlinsley/status/1514987976773701632?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

## React-Native

-   📜 [Create high-performance graphics with React Native Skia](https://blog.logrocket.com/create-high-performance-graphics-react-native-skia/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🐦 React-Native-Skia: [drop-in React-Native-Svg replacement](https://twitter.com/wcandillon/status/1515731236861493258?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)?
-   💡 [PR: Add TypeScript support in New Architecture/Codegen](https://github.com/facebook/react-native-website/pull/3036?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): it is possible to write [TurboModule spec](https://reactnative.dev/docs/next/new-architecture-library-intro?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#turbomodules) in TypeScript (to describe your native module API)
-   📦 [React-Native-Turbo-Starter](https://github.com/talknagish/react-native-turbo-starter?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): a boilerplate to create modern React-Native modules leveraging the new architecture.
-   📦 [React Native Turbo Secure Storage](https://github.com/ospfranco/turbo-secure-storage?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   📦 [expo-github-action/command](https://github.com/expo/expo-github-action/tree/main/command?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): can trigger an EAS build with a GitHub comment (experimental)
-   👥 [React-Native devs Twitter community](https://twitter.com/jamonholmgren/status/1515453608434708484?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   🎥 [Creating a RN Turbo Secure Storage module from scratch](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=U0shm20ClkU)
-   🎥 [React Native Turbomodule + TypeScript Codegen Tutorial](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=c_AQSztIS6Y)


## Other

[**CSS Parent Selector**](https://ishadeed.com/article/css-has-parent-selector/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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](https://twitter.com/shadeed9/status/1514875999418208263?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) for theming or [dark mode support](https://twitter.com/tomayac/status/1515376550048419848?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)). 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)**](https://twitter.com/sebastienlorber/status/1516087831134879747?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

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 this [Cloudflare article](https://blog.cloudflare.com/early-hints/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)) 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**](https://web.dev/building-a-dialog-component/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

With `<dialog>` added in Safari 15.4 and [growing support](https://caniuse.com/dialog?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), 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](https://nodejs.org/en/blog/announcements/v18-release-announce/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): freshly released! With experimental support for `fetch()`, Web Streams, a test runner...
-   [navigation-api](https://github.com/WICG/navigation-api?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): [intent to ship Blink/Chromium](https://twitter.com/intenttoship/status/1513914320056459274?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [The Front-End Developer's Guide to the Terminal](https://www.joshwcomeau.com/javascript/terminal-for-js-devs/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Innovating beyond libraries and frameworks](https://nilsnh.no/2022/04/09/innovating-beyond-libraries-and-frameworks/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Declarative design](https://adactio.com/journal/18982?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [WebAssembly 2.0 First Public Working Drafts](https://www.w3.org/blog/news/archives/9509?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [NodeJS packages don't deserve your trust](https://josephg.com/blog/node-sandbox/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Announcing Fastify v4 release candidate!](https://medium.com/@fastifyjs/announcing-fastify-v4-release-candidate-2b6be6edf196?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Shopify/Javy: JS to WebAssembly toolchain](https://github.com/Shopify/javy?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Deno Cheat Sheet](https://oscarotero.com/deno/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Netlify Edge Functions on Deno Deploy](https://deno.com/blog/netlify-edge-functions-on-deno-deploy?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Will Tauri Be an Electron Killer?](https://betterprogramming.pub/will-tauri-be-an-electron-killer-38fd6478004?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [How Jotai Specifies Package Entry Points](https://blog.axlight.com/posts/how-jotai-specifies-package-entry-points/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [The Ultimate Guide to Optimizing JavaScript for Quick Page Loads](https://www.builder.io/blog/the-ultimate-guide-to-optimizing-javascript-for-quick-page-loads?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Exploring the new CSS color functions: CSS Color Module Level 5](https://blog.logrocket.com/exploring-css-color-module-level-5/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [The Definitive Guide to Image Optimization](https://www.builder.io/blog/the-definitive-guide-to-image-optimization?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [JavaScript Function Composition: What's The Big Deal?](https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Node.js 18 Introduces Prefix-Only Core Modules](https://fusebit.io/blog/node-18-prefix-only-modules/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Dependabot alerts now surface if your code is calling a vulnerability](https://github.blog/2022-04-14-dependabot-alerts-now-surface-if-code-is-calling-vulnerability/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Git security vulnerability announced](https://github.blog/2022-04-12-git-security-vulnerability-announced/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [GitHub Discussions: Organization Discussions, polls, and more](https://github.blog/2022-04-12-whats-new-in-github-discussions-organization-discussions-polls-and-more/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Why is Builder.io creating Qwik and Partytown?](https://www.builder.io/blog/why-is-builderio-creating-qwik-and-partytown?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [Angular Developer Survey 2021 Results](https://blog.angular.io/developer-survey-2021-results-38e653cbb36b?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [DuckDuckGo for Mac: A Private, Fast, and Secure Browsing App](https://spreadprivacy.com/introducing-duckduckgo-for-mac/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)
-   [HTTPie: how we lost 54k GitHub star](https://httpie.io/blog/stardust?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)

---
  
  <img width="524" alt="CleanShot 2022-04-20 at 09 39 20@2x" src="https://user-images.githubusercontent.com/749374/164176177-8d55866a-db39-4098-b25c-f9c24f97bd86.png">