This Week In React #118: Gatsby, Beta Docs, Reactivity, Lazy Maps, Ezno, Whyframe, Reassure, Node.js, TypeScript, WASM...
Tags: react, reactnative
Published: 2022-10-05 08:03:35

---
series: This Week In React
canonical_url: https://thisweekinreact.com/newsletter/118
---

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](https://slo.im/thread) - visual format 🎨**

---

**To support me:**

- 😘 **Recommend the newsletter to your friends**: it really helps!
- 💸 [**Sponsor the newsletter**](https://thisweekinreact.com/sponsor) or [**sponsor me**](https://github.com/sponsors/slorber)
- 🧵 [**Retweet the latest Twitter thread**](https://slo.im/thread)
- 📨 Reply to this [**email**](mailto:sebastien@thisweekinreact.com): feedback is welcome

---

## ⚛️ React 

**[Gatsby v5 Alpha](https://www.gatsbyjs.com/blog/gatsby-v5-alpha-is-here-and-its-pretty-exciting/)**

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

- support for [partial hydration](https://www.gatsbyjs.com/blog/a-look-at-partial-hydration-in-gatsby-5/) 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](https://legendapp.com/open-source/legend-state/)**

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](https://kaleidawave.github.io/posts/introducing-ezno/)**

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](https://prepack.io/)). 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](https://julesblom.com/writing/lazy-component-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](https://whyframe.dev/)**

Allows frontend component rendering to be isolated in an iframe. Now supports [Webpack, Next.js and Docusaurus](https://twitter.com/bluwyoo/status/1576947013450539008). 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](https://twitter.com/dan_abramov/status/1575320847279071232) + [useId](https://twitter.com/dan_abramov/status/1577283961763467265) + ["All the commonly used APIs documented"](https://twitter.com/dan_abramov/status/1575367224541560833)
- 📜 [How to use Serverless Functions with SSR](https://paulie.dev/posts/2022/09/how-to-use-serverless-fucntions-with-ssr/): explains how to correctly split a function between the server/client part in Gatsby
- 📜 [Fastest Frontend Tooling in 2022](https://cpojer.net/posts/fastest-frontend-tooling-in-2022): Christoph Nakazawa justifies the choices behind his minimalist starter [vite-ts-react-tailwind-template](https://github.com/cpojer/vite-ts-react-tailwind-template)
- 📜 [Improving the accessibility of our Next.js site](https://vercel.com/blog/improving-the-accessibility-of-our-nextjs-site)
- 📜 [The Orton Effect - dreamy photo effect in CSS and React](https://mikebifulco.com/posts/orton-effect-css-react)
- 📜 [Mark Erikson - Guide to React Rendering Behavior - updated for React 18](https://twitter.com/acemarke/status/1577301648850014210)
- 🚧 [no-nested-components ESLint rule](https://github.com/facebook/react/pull/25360): 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"](https://twitter.com/dan_abramov/status/1575553047408902147)
- 🧵 [Andrew Clark - "We've looked very seriously at a WASM rewrite of React"](https://twitter.com/acdlite/status/1576302675766804480)
- [React Spectrum - React Aria - October 4 releases](https://twitter.com/devongovett/status/1577370727849680896)
- 📦 [Redwood v3](https://community.redwoodjs.com/t/redwood-3-0-0-is-now-available/3989) + [What's new in Redwood v3?](https://www.youtube.com/watch?v=o9LFWOxMlTs)
- 📦 [Supabase Pre-built React Auth UI](https://twitter.com/supabase/status/1577215238792916992)

---

## 📱 React-Native

**[Reassure - Continuous App Performance Monitoring Made Simple](https://www.callstack.com/blog/app-performance-monitoring)**

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](https://github.com/callstack/reassure/issues/39) is not yet available.

- 📒 [BAM Mobile Tech Radar 2022](https://www.bam.tech/en-tech-radar): a complete report on mobile development in 2022, with a big part on React-Native
- 🔗 [fabric-library-with-custom-cpp-example](https://github.com/callstack/fabric-library-with-custom-cpp-example/)
- 📦 React-Native [v0.70.2](https://twitter.com/Kelset/status/1577262972396744704) + [v0.69.6](https://twitter.com/titozzz/status/1574744371865346049)
- 📦 [Jest-Native 5.0](https://github.com/testing-library/jest-native/releases): native TypeScript support
- 🎥 [React-Native EU playlist](https://www.youtube.com/watch?v=7QeINTWLUkc&list=PLZ3MwD-soTTE-qcA0MrcvZBdmkHJSIjJX): videos are splitted are online
- 🎥 [Arc Slider with React-Native Skia, React-Native Gesture Handler and Reanimated 2](https://www.youtube.com/watch?v=fWLyKzEXaJI)
- 📜 [How to specify pre-processor flags to the JSI-based React Native libraries](https://dev.to/craftzdog/how-to-specify-pre-processor-flags-to-the-jsi-based-react-native-libraries-51m5)
- 📖 [Expo Router](https://expo.github.io/router/): the doc is available to familiarize yourself with this new file-system router
- 📖 [Expo App Icons and Splash Screen guides updated](https://twitter.com/amanhimself/status/1575589181237043200)
- 🎨 [Native iOS bottom sheet demo - iOS detents](https://twitter.com/FernandoTheRojo/status/1575247583634935808)
- 🎨 [React-Native WishList demo - alpha soon](https://twitter.com/margelo_io/status/1576887456024043520)
- 🎨 [Experimental support for debugging Reanimated’s worklet runtime (Hermes) in Flipper](https://twitter.com/swmansion/status/1577308811890610176)


---

## 🧑‍💻 Jobs

🧑‍💼 [**Product Engineer at Causal, Remote/London/NY, $150-250k**](https://jobs.lever.co/causal-app/4acaafbe-ef3d-45a6-bbe6-687c022d727c?lever-origin=applied&lever-source%5B%5D=thisweekinreact.com)

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**](https://twitter.com/gabe_g2i/status/1563204813881425926?s=20&t=ArRLC77BpRwXXCdx8fnUqw)

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](https://twitter.com/gabe_g2i) to learn more and don't forget to mention This Week in React.

💡 [How to publish an offer ?](https://thisweekinreact.com/sponsor)

---


## 🔀 Other
- [Ten Years of TypeScript](https://devblogs.microsoft.com/typescript/ten-years-of-typescript)
- [TotalTypeScript - Beginner's TypeScript](https://www.totaltypescript.com/tutorials/beginners-typescript)
- [Why I don't use Prettier](https://antfu.me/posts/why-not-prettier)
- [Gifs without the .gif - The most performant image and video options](https://css-tricks.com/gifs-without-the-gif-the-most-performant-image-and-video-options-right-now/)
- [Use cases for CSS comparison functions](https://ishadeed.com/article/use-cases-css-comparison-functions/)
- [Node.js 18 - `node --watch`](https://github.com/nodejs/node/pull/44366)
- [Node.js 19 RC.0](https://twitter.com/ruyadorno/status/1575628377372823552)
- [Astro 1.4](https://astro.build/blog/astro-140/)
- [Deno 1.26](https://deno.com/blog/v1.26)
- [Rome 0.10](https://twitter.com/rometools/status/1577296196502278150)
- [State of CSS 2022 - Survey open](https://stateofcss.com/en-us/)
- [State of GraphQL 2022 - Results](https://2022.stateofgraphql.com/en-US/)
- [Progressively enhance for a more resilient web](https://jjenzz.com/progressively-enhance-for-a-more-resilient-web)
- [New in Chrome 106](https://developer.chrome.com/blog/new-in-chrome-106/)
- [New to the web platform in September](https://web.dev/web-platform-09-2022/)
- [Minimize Heap Allocations in Node.js](https://blog.appsignal.com/2022/09/28/minimize-heap-allocations-in-nodejs.html)
- [Will Serving Real HTML Content Make A Website Faster?](https://blog.webpagetest.org/posts/will-html-content-make-site-faster/)
- [What’s Stopping WebAssembly from Widespread Adoption?](https://thenewstack.io/whats-stopping-webassembly-from-widespread-adoption/)
- [Blink - Intent to prototype - CSS Nesting](https://twitter.com/intenttoship/status/1576951638325186565)
- [Postgres-WASM](https://supabase.com/blog/postgres-wasm)
- [I turned JS into a compiled language (for fun and Wasm)](https://surma.dev/things/compile-js/)

---

## 🤭 Fun

[![Theo T3 best clickbait](https://thisweekinreact.com/emails/issues/118/meme.png)](https://twitter.com/t3dotgg/status/1576467328606253057)