# This Week In React #118: Gatsby, Beta Docs, Reactivity, Lazy Maps, Ezno, Whyframe, Reassure, Node.js, TypeScript, WASM... 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 `` 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)