This Week In React #105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...
This Week In React #105: useEvent, Next.js Layouts, Remix, Storybook, Reanimated 3, Expo 45, Tamagui, TypeScript, Markdoc...
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:
📜 Building a Design System from scratch: Maxime sharing all the details behind his personal React design system , based on Stitches
📜 Building a Mini Next.js: Jonas shows how to replicate Next.js file-system routing and SSR with
getServerSideProps, using Vite and Fastify.📜 Remix and “The Edge”: Jim recently joined 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 tool Markdoc
📜 React key attribute: best practices for performant lists: good illustration on problems happening when you use index or random keys
👥 Remix Conf: starts today!
🧑🎓 Advanced-Remix: workshop open-sourced by Kent
🐦 TypeScript 4.8 + "as props": possible improvement?
📦 eslint-plugin-react v7.30: new jsx-no-leaked-render rule 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 enables you to monitor the health and performance of your Vercel deployments by ingesting all your request, function, and web vitals data.
Use Axiom's pre-built dashboard for an overview across all your Vercel logs and vitals, drill down to specific projects and deployments, and get insight on how functions are performing with a single click.
PS: I 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:
📜 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.
🎥 It's Severance, but in React Native: latest William Candillon video with Skia, Perlin Noise and shaders. As good as the TV show. Remotion intros/outros are back👌
🎙️ The React Native Show - Coffee Talk #2 - Top Resources for Developers
📦 6 Expo 45 clones: Spotify, Uber, Netflix, Slack, Twitch, Disney+
Partners
Start React Native: learn everything about gestures and animations with William Candillon
Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
TypeScript Weekly: the best TypeScript links every week, right in your inbox
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
G2i: pre-vetted remote React & React-Native developers you can trust on contract or full-time basis
Infinite Red: US React-Native experts making your idea a reality
Software Mansion: the co-creators of React Native and the technological core of many tech companies
Other
