# This Week In React #101: Astro, Redwood, Next.js, Remix, React-Admin, Rust reducers, WebComponents, Gatsby, TypeScript, Rome... Hi everyone! A nice diversity of React articles this week! I liked those with Rust/WASM and Web-Components. Last week was Launch Week for Astro and Redwood, there were some exciting announcements. It's calm on the React-Native side. TypeScript 4.7 is available in beta, another great release with ESM support in particular! We have more than **4000 subscribers** here! Thanks for reading me every week ;) Note: I'm still figuring out how to make this newsletter sustainable. If your company could [sponsor](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) the newsletter (product, job, conf ad) please let me know or put me in touch. I [build this newsletter transparently in public](https://www.indiehackers.com/product/french-react-newsletter?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), sharing my current income and after 2 years it covers like 50% of my hourly rate. Not too bad, but a little help will be appreciated 😉 I'm still not very good at selling ads on the English newsletter 😅 it seems to require more cold-outreach. 🙏 **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 [**Astro Server-Side Rendering**](https://astro.build/blog/experimental-server-side-rendering/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Astro is a modern meta-framework capable of using any UI lib (including React). It now supports server-side rendering, available experimentally in [v1.0 beta](https://astro.build/blog/astro-1-beta-release/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter). Like Remix, the framework offers a layer of [adapters](https://github.com/withastro/astro/tree/main/packages/integrations?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) for deployment to multiple targets. [**React-admin V4: Build Your Own Framework**](https://marmelab.com/blog/2022/04/11/react-admin-v4-build-your-own-framework.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) François takes as an example a simple admin interface in React, based on MUI and React-Hook-Form. The code is initially quite verbose, 90 lines. He gradually refactors this code by creating reusable abstractions, to end up with a declarative and expressive code of 20 lines. He explains that these abstractions are actually the v4 of React-Admin ([v4.0.0-RC.1](https://github.com/marmelab/react-admin/releases/tag/v4.0.0-rc.1?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) available). This new version is based on a more modern stack and is more modular: it exposes high-level components (based on MUI by default, can be swapped) but also low-level primitives to create your own framework. See also the full [series of v4 articles](https://marmelab.com/en/blog/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#react-admin). [**An Overlooked Factor For Performance Optimization In React**](https://www.zhenghao.io/posts/top-level-perf?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Interesting reflection on the need (or not) to memoize the value of a React context according to the position of the provider in the tree. Personally, I still prefer to always memoize for safety, as you never know if the provider will not be moved somewhere else. [**Writing Redux Reducers in Rust**](https://fiberplane.dev/blog/writing-redux-reducers-in-rust/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Feedback on the integration of existing Rust business code into a React app through WebAssembly and the challenges encountered: non-ideal binding, serialization WASM bridge cost... They need to access the same state on both sides (Rust and TypeScript). Solution: create the reducers in Rust, and return a state diff to TypeScript. [**How to Create and Export Web Components From a React Application**](https://spin.atomicobject.com/2022/04/11/export-web-components/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Shows how to use React to create a Web Component. It looks relatively simple, and can be useful in some specific contexts 🤔. Not to be confused with the use of Web Components from React ([will be officially supported later](https://twitter.com/reactjs/status/1508899112074231810?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)). [**React components composition: how to get it right**](https://www.developerway.com/posts/components-composition-how-to-get-it-right?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Gives some hints on when/how to split into smaller subcomponents. Also evokes an important Clean Code principle (without naming it): [Single Level of Abstraction](https://medium.com/trabe/coding-react-components-single-level-of-abstraction-e60f25676235?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter). **Extras:** - 🧵 [React 18 + TypeScript](https://twitter.com/reactjs/status/1512453230504124420?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): typings released with necessary breaking changes. In particular the [TypeScript type for `React.FC` does not include `children` anymore](https://twitter.com/dan_abramov/status/1512833611401150474?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter). Also check [Removal Of Implicit Children](https://solverfox.dev/writing/no-implicit-children/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), and this [codemod](https://github.com/eps1lon/types-react-codemod?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) to migrate. - 📜 [Test component interactions with Storybook](https://storybook.js.org/blog/test-component-interactions-with-storybook/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): complete guide to create and execute interaction tests in Storybook stories thanks to the `play()` function. - 📜 [How to easily reduce your NextJS bundle size by 30%?](https://www.flavienbonvin.com/reduce-next-js-bundle/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) feedback, quantified impact of 4 actions relatively easy to implement. Using dynamic imports provides the best ROI. - 📜 [React 18 Quick Guide & Core Concepts Explained](https://dev.to/shrutikapoor08/react-18-quick-guide-core-concepts-explained-519p?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): good React 18 major changes summary. - 📜 [Redwood Startup Fund](https://tom.preston-werner.com/2022/04/07/the-redwood-startup-fund.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): follow-up of last week's [Redwood 1.0 Launch Week](https://v1launchweek.redwoodjs.com/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter). $1M fund by Tom Preston-Werner for startups using React RedwoodJS framework (small "existential" $25k--$50k tickets) - 📜 [Bad Habits of Mid-Level React Developers](https://dev.to/srmagura/bad-habits-of-mid-level-react-developers-b41?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📜 [Improving Web Performance with React Hydration Strategies](https://medium.com/cdiscount-engineering/improving-web-performance-with-react-hydration-strategies-3117f71a1695?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 💡 [Gatsby RFC: New Bundler in Gatsby](https://github.com/gatsbyjs/gatsby/discussions/35357?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): may incrementally adopt esbuild according to current benchmarks? - 💡 [Gatsby RFC: Script component](https://github.com/gatsbyjs/gatsby/discussions/35404?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): similar component to the Next.js one, with a possible Partytown integration? - 💡 [Redux deprecate createStore?](https://twitter.com/acemarke/status/1513714595764051972?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 💡 [Remix deferred API?](https://twitter.com/ebey_jacob/status/1512921424972767236?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🐦 React + TypeScript: [no need to import React event handler types](https://twitter.com/sebastienlorber/status/1512420374201446405?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🐦 React 18 + `React.lazy()` + Suspense + SSR: [only works with new APIs SSR](https://twitter.com/reactjs/status/1511755578716028928?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), not `renderToString`. - 🎥 [RedwoodJS Intro](https://www.youtube.com/watch?t=1s&utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=m_3I9mufZfs) by Tom Preston Werner - 🎥 [React Jargon Explained: What is Concurrent React?](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=bZRqmobuJvM) - 📦 [React-Native-Storybook-Starter](https://twitter.com/Danny_H_W/status/1512985528249028610?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): with mobile + React-Native-Web support - 📦 [Capacitor-Remix-Templates](https://github.com/ionic-team/capacitor-remix-templates?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📦 [Remix + Crystallize eCommerce Starter](https://crystallize.com/blog/remix-run-ecommerce-starter?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🎙️ [StackOverflow #430: The new version of React](https://stackoverflow.blog/2022/04/05/episode-430-the-new-version-of-react-great-tools-for-learning-css-and-the-double-standard-for-female-engineers/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)... ## React-Native - 🐦 [Expo: Evan Bacon automating Android app deployment](https://twitter.com/Baconbrix/status/1511892021321121793?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): want to go further than Fastlane and allow deploying a new app without any manual step on the Play Store UI (first submission). - 🐦 React-Native-{Bootsplash,Localize,Permissions}: [looking for sponsors to support Fabric](https://twitter.com/zoontek/status/1512823843206967300?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📦 [React-Native-Bignumber](https://github.com/margelo/react-native-bignumber?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): performant Fabric/JSI big number lib - 📦 [React-Native-Purchase](https://github.com/RevenueCat/react-native-purchases?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): claims to work with all [Expo workflows](https://docs.revenuecat.com/docs/reactnative?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#expo-special-instructions) - 🎙️ [React Native Radio 231 - Using Flipper's Flamegraph Tool](https://reactnativeradio.com/episodes/rnr-231-using-flippers-flamegraph-tool?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) ## Other [**Announcing TypeScript 4.7 Beta**](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Another great TypeScript release! The long-awaited ES Modules support and [package.json "exports"](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#package-json-exports-imports-and-self-referencing) which allows to create several entry points for the same Node.js package. Many other improvements and new features, including ["moduleSuffixes"](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-beta/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#resolution-customization-with-modulesuffixes) useful for React-Native. **Extras:** - [Announcing Rome Formatter](https://rome.tools/blog/2022/04/05/rome-formatter-release?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): broken link in last edition 😅 Rome offers a code formatter written in Rust. Mostly compatible with Prettier, but 9-12x faster, and able to format invalid code! - [Node v12.22.12](https://nodejs.org/en/blog/release/v12.22.12/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): last v12 LTS - [JavaScript Testing Best Practices](https://twitter.com/nodepractices/status/1511633760114069507?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): updated and translated - [Prevent the introduction of known vulnerabilities into your code](https://github.blog/2022-04-06-prevent-introduction-known-vulnerabilities-into-your-code/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): new action GitHub to review PR dependency changes and prevent supply-chain attacks. Seems easy to setup. - [New to the web platform in March](https://web.dev/web-platform-03-2022/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): good overview - [Devs For Ukraine](https://www.devsforukraine.io/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): conf 25-26 April - [TypeScript / How the compiler compiles](https://www.huy.rocks/everyday/04-01-2022-typescript-how-the-compiler-compiles?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [TypeScript type-level parser](https://twitter.com/anuraghazru/status/1512092136841543682?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Make the TypeScript interface partially optional/required](https://pawelgrzybek.com/make-the-typescript-interface-partially-optional-required/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Principles of Object-oriented Programming in TypeScript](https://blog.appsignal.com/2022/04/06/principles-of-object-oriented-programming-in-typescript.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [TypeScript things I wish I knew earlier](https://alvar.dev/blog/typescript-things-i-wish-i-knew-earlier?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [ECMAScript proposal "Change Array by copy": four new non-destructive Array methods](https://2ality.com/2022/04/change-array-by-copy.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Safari Technology Preview 143](https://webkit.org/blog/12563/release-notes-for-safari-technology-preview-143/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Safari 15.5 Beta Release Notes](https://developer.apple.com/documentation/safari-release-notes/safari-15_5-release-notes?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [The "inert" attribute is finally coming to the web](https://www.stefanjudis.com/blog/the-inert-attribute-is-finally-coming-to-the-web/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [CSS :has( ) A Parent Selector Now](https://matthiasott.com/notes/css-has-a-parent-selector-now?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [ShadowRealms -- an ECMAScript proposal for a better `eval`](https://2ality.com/2022/04/shadow-realms.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [What's new in ECMAScript 2022](https://pawelgrzybek.com/whats-new-in-ecmascript-2022/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [AST Explorer SWC support](https://twitter.com/jantimon/status/1513451535916838914?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [How Tailwind CSS came to be feat](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=1x7HlvSfW6s) - [Nx 13.10](https://twitter.com/NxDevTools/status/1512430082349957126?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) + [Nx 15 Roadmap](https://github.com/nrwl/nx/discussions/9716?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Turborepo 1.2](https://twitter.com/turborepo/status/1512454415931879424?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Parcel CSS 1.8](https://twitter.com/devongovett/status/1512102628024532996?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [ESLint v8.13](https://eslint.org/blog/2022/04/eslint-v8.13.0-released?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [StackBlitz $7.9M Seed Round](https://blog.stackblitz.com/posts/seed-funding/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Prisma Adds Support for MongoDB](https://www.prisma.io/blog/mongodb-general-availability-pixnun6mffmu?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [4 ways we use GitHub Actions to build GitHub](https://github.blog/2022-04-05-4-ways-we-use-github-actions-to-build-github/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [The Next Google](https://dkb.io/post/the-next-google?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [With 3 months left before IE retirement, new enhancements arrive in Microsoft Edge for IE mode](https://blogs.windows.com/windowsexperience/2022/03/29/with-3-months-left-before-ie-retirement-new-enhancements-arrive-in-microsoft-edge-for-ie-mode/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) CleanShot 2022-04-13 at 10 24 54@2x