This Week In React 105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...

Hi everyone!

Back from holidays Menorca is a really beautiful island, in particular if you like hiking close to beautiful beaches.

Way too much content to cover in 3 weeks I'm just putting the important links for theOthersection, but there are some very interesting things to read there!

Support the newsletter:

• Recommend it to your friends: it really helps!
• Sponsor This Week In React
• Write testimonials on Twitter
• Retweet the latest Twitter thread
• Reply to thisemail:feedback is welcome
• Follow onLinkedIn

If you like this newsletter, subscribe in priority there:

• ThisWeekInReact.com
• ReactHebdo.fr

React

React useEvent() RFC

Dan Abramov's RFC suggests to add a newuseEvent(fn)hook in React core, without any dependency array. The unstable function/closure passed as a parameter is then stabilized (it keeps the same identity over time). This helps avoid thestale closureproblem (when ESLint rules are not respected) while simplifying optimization viaReact.memo(), and avoidinguseEffectsfrom re-executing. Changes planned to ESLint rules: the stabilized function does not need to be passed into other dependency arrays, and an "onEvent" / "handleEvent" convention could be adopted.

I gave mypositive feedbackin thepull-request(lots of comments there, especially on the naming of that hook). For me, it's really a missing piece in the initial hooks design, and many apps alreadyuse a workaround based on useLayoutEffect.

useEvent, the missing React hookis a great 3 minutes video to understand the big picture.

Next.js Layouts RFC

Next.js will modernize its routing infrastructure. This will help leverage React 18 features, and other upcoming features.

They plan for incremental adoption: the./pagesfolder continues to work as before, and you can gradually move things to a new./appfolder, which also activates Server Components .

There will be support for nested routes/layouts based on alayout.jsnaming convention. Requests will be executed in parallel (without waterfall). This article is only the 1st part of a huge RFC: the 2nd part is coming.

Extras:

• Building a Design System from scratch: Maxime sharing all the details behind his personal Reactdesign system, based onStitches
• Building a Mini Next.js: Jonas shows how to replicate Next.js file-system routing and SSR withgetServerSideProps, using Vite and Fastify.
• Remix and "The Edge": Jim recentlyjoined the Remix team. This explains how Remix leverages the Edge (ie Deno and Cloudflare Workers ) to be both fast and dynamic.
• Storybook Performance: Vite vs Webpack: Storybook has pluggable builders, so which one to use? This benchmark shows that Vite does not always win against Webpack, on a large IBM Carbon 250 comps Storybook
• What the useEvent React hook is (and isn't): opinion of a Solid contributor
• Getting started with Markdoc in Next.js: Stripe just open-sourced their doc toolMarkdoc
• React key attribute: best practices for performant lists: good illustration on problems happening when you use index or random keys
• (P)react vs Web Components: a Xoogler's perspective
• Reading Source Code: React-Query
• You Don't Need A UI Framework
• What You Need to Do to Improve Performance in Next.js
• How to solve ReactuseEffectinfinite loops
• What I learnt at Reactathon 2022
• Using Next.js ISR with Serverless Cloud
• Remix Conf: starts today!
• Reactathon 2022 livestreams:day 1,day 2,day 3
• Advanced-Remix: workshop open-sourced by Kent
• Complex State Management in React with Jotai and XState
• TypeScript 4.8 + "as props": possible improvement?
• well-named function inside useEffect
• eslint-plugin-react v7.30: newjsx-no-leaked-renderrule very useful. Permits to avoid rendering a 0 with{count && <div>{count}</div>}(which makes React-Native crash )
• Remix 1.5: officiel Deno support
• Reagraph: WebGL Graph Visualizations
• Playright 1.22: possible to test React components

Sponsors

How to sponsor this newsletter

Axiom - Zero-Config Observability for Vercel

Axiom's Vercel integration provides Zero-Config Observability for your Vercel projects, covering request logging, function performance, web vitals, and product insights.

Pre-configured dashboards help you understand how your project is changing over time.

PS:I use it myself to monitor the newsletter signups

Retool - Build Internal Apps Remarkably Fast

Retoolis a new approach to building internal apps: we've unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.

React-Native

Announcing Reanimated 3

New version in RC. Supports the new Fabric architecture, but also the old one to help gradual adoption. Reanimated v2 code continues to work on v3, but the old Reanimated v1 API is removed. Bonus:demo Reanimated 3 + RNGH + Screens

Microsoft - React Native Developer Tools

Adam announces the launch of the React Native Developer Tools community project. This is a repo (rnx-kit) withmany useful toolsfor a React-Native project related to Metro, TypeScript, Jest... Microsoft already uses it on various products like Office, Xbox, and Teams.

Extras:

• Expo SDK 45: using latest React-Native 0.68.2 version. New Expo Go UI with better EAS Updates integration. Modules upgraded to JSI and Sweet API. New CLI in beta.
• Tamagui Beta: promising cross-platform tool now available in beta. Starter available using Expo, Next.js and Solito.
• React Native Accessibility - GAAD 2022 Update
• It's Severance, but in React Native: latest William Candillon video with Skia, Perlin Noise and shaders. As good as theTV show. Remotion intros/outros are back
• TheReact NativeShow - Coffee Talk #2 - Top Resources for Developers
• RNR 234 - React Native Tips and Tricks
• RNR 235 - Dissecting React Native 0.68
• RNR 236 - Reanimated 2 with Krzysztof Magiera
• 6 Expo 45 clones: Spotify, Uber, Netflix, Slack, Twitch, Disney+
• Tesla app using React-Native
• React-Native 0.69: faster & ~5% less RAM usage

Other

• JavaScript Containers
• A Community Group for Web-interoperable JavaScript runtimes
• Google I/O 2022 Recap
• Interaction to Next Paint (INP)
• State of CSS 2022
• TypeScript 4.7 RC+TypeScript 4.8 Iteration Plan
• Stripe: Migrating millions of lines of code to TypeScript
• Deno 1.22 Release Notes
• Lerna is dead --- Long Live Lerna
• Transferring Jest to the OpenJS Foundation
• Flutter 3