# 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 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 `` according to the value of a `