DEV Community

Cover image for This Week In React #105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...
Sebastien Lorber
Sebastien Lorber

Posted on • Updated on

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 the Other section, but there are some very interesting things to read there!

🙏 Support the newsletter:

If you like this newsletter, subscribe in priority there:


React

React useEvent() RFC

Dan Abramov's RFC suggests to add a new useEvent(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 the stale closure problem (when ESLint rules are not respected) while simplifying optimization via React.memo(), and avoiding useEffects from 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 my positive feedback in the pull-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 already use a workaround based on useLayoutEffect.

useEvent, the missing React hook is 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 ./pages folder continues to work as before, and you can gradually move things to a new ./app folder, which also activates Server Components 🤯.

There will be support for nested routes/layouts based on a layout.js naming 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:

💸 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.

PSI use it myself to monitor the newsletter signups 😉

Retool - Build Internal Apps Remarkably Fast

Retool is 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) with many useful tools for a React-Native project related to Metro, TypeScript, Jest... Microsoft already uses it on various products like Office, Xbox, and Teams.

Extras:

Other

CleanShot 2022-05-25 at 09 16 29@2x

Discussion (1)

Collapse
stormytalent profile image
StormyTalent

Perfect!