Hi everyone!

Good news: the new React beta docs will be available soon! A link on the old doc invites to visit the new beta site. Gatsby v5 released alpha.

The current trend: bringing reactivity to React.

Some nice React-Native content too. We are watching closely the progress of Expo Router, WishList and web support in Reassure.

TypeScript celebrates its 10th anniversary. A --watch mode is coming in Node.js. Interesting content about WebAssembly.

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter or sponsor me
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

⚛️ React

Gatsby v5 Alpha

The v5 of Gatsby is in alpha with 2 main new features:

• support for partial hydration based on React Server Components and a "client export" directive at the top of client components
• the Gatsby Slices API, which allows to significantly improve build times when a shared component (layout/navbar/footer) should be re-rendered

Making React fast by default and truly reactive

Interactive article that illustrates the problems of re-rendering in React which is not optimized by default. Shows how the Legend-State library, based on observables, allows to bring reactivity to React (a bit like SolidJS). The code is then optimized by default and avoids unnecessary re-renders.

Ezno - Experimental compiler

A new experimental type-checking compiler for JavaScript, compatible with TypeScript annotations and JSX. Relies on dependent typing to do advanced static analysis and pre-evaluations at compile-time (reminds prepack). The goal seems to be to be able to compile an app that looks like React in a reactive form, and skip the VDOM. Quite technical to read.

(Lazy) Components Maps

Presents a useful technique to know to leverage code-splitting when you do conditional rendering. Especially useful on large enums/union-types, such as an <Icon name="my-icon-name"/> component.

Whyframe

Allows frontend component rendering to be isolated in an iframe. Now supports Webpack, Next.js and Docusaurus. This seems handy for component library documentation sites, ensuring the global CSS of the site does not affect the rendering of the component displayed.

• 📖 Beta React docs: useEffect + useId + "All the commonly used APIs documented"
• 📜 How to use Serverless Functions with SSR: explains how to correctly split a function between the server/client part in Gatsby
• 📜 Fastest Frontend Tooling in 2022: Christoph Nakazawa justifies the choices behind his minimalist starter vite-ts-react-tailwind-template
• 📜 Improving the accessibility of our Next.js site
• 📜 The Orton Effect - dreamy photo effect in CSS and React
• 📜 Mark Erikson - Guide to React Rendering Behavior - updated for React 18
• 🚧 no-nested-components ESLint rule: a new rule could come soon and avoid declaring components on the fly
• 🧵 Dan Abramov - "skipping re-renders (eg with memo) is a performance optimization only"
• 🧵 Andrew Clark - "We've looked very seriously at a WASM rewrite of React"
• React Spectrum - React Aria - October 4 releases
• 📦 Redwood v3 + What's new in Redwood v3?
• 📦 Supabase Pre-built React Auth UI

📱 React-Native

Reassure - Continuous App Performance Monitoring Made Simple

Callstack estimates 80% of performance problems on React-Native come from JS, and in particular from React misuse. They created Reassure, a new performance regression testing library. It integrates well with your CI to prevent the performance of your apps from degrading over time. The web support is not yet available.

• 📒 BAM Mobile Tech Radar 2022: a complete report on mobile development in 2022, with a big part on React-Native
• 🔗 fabric-library-with-custom-cpp-example
• 📦 React-Native v0.70.2 + v0.69.6
• 📦 Jest-Native 5.0: native TypeScript support
• 🎥 React-Native EU playlist: videos are splitted are online
• 🎥 Arc Slider with React-Native Skia, React-Native Gesture Handler and Reanimated 2
• 📜 How to specify pre-processor flags to the JSI-based React Native libraries
• 📖 Expo Router: the doc is available to familiarize yourself with this new file-system router
• 📖 Expo App Icons and Splash Screen guides updated
• 🎨 Native iOS bottom sheet demo - iOS detents
• 🎨 React-Native WishList demo - alpha soon
• 🎨 Experimental support for debugging Reanimated’s worklet runtime (Hermes) in Flipper

🧑‍💻 Jobs

🧑‍💼 Product Engineer at Causal, Remote/London/NY, $150-250k

Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer ?

🔀 Other

• Ten Years of TypeScript
• TotalTypeScript - Beginner's TypeScript
• Why I don't use Prettier
• Gifs without the .gif - The most performant image and video options
• Use cases for CSS comparison functions
• Node.js 18 - node --watch
• Node.js 19 RC.0
• Astro 1.4
• Deno 1.26
• Rome 0.10
• State of CSS 2022 - Survey open
• State of GraphQL 2022 - Results
• Progressively enhance for a more resilient web
• New in Chrome 106
• New to the web platform in September
• Minimize Heap Allocations in Node.js
• Will Serving Real HTML Content Make A Website Faster?
• What’s Stopping WebAssembly from Widespread Adoption?
• Blink - Intent to prototype - CSS Nesting
• Postgres-WASM
• I turned JS into a compiled language (for fun and Wasm)

🤭 Fun