This Week In React #129: useEffectEvent, Storybook, OpenNEXT, React Email, Remix, Next.js, Pointer-Events, Expo-MDX...
Tags: react, reactnative
Published: 2022-12-21 16:23:15

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

Hi everyone!

This week is pretty busy for an end of the year 🤪 I'll let you discover it all.

My [episode for the React Round Up podcast](https://topenddevs.) is online. It's about the latest React 18 features, MDX or even Docusaurus.

👋 Last edition of the year. The newsletter will be back on January 10th!

🎄 Happy holidays 🎅

---

💡 Subscribe to the [official newsletter](https://thisweekinreact.com?utm_source=dev_crosspost) to receive an email every week!

[![banner](https://thisweekinreact.com/img/TWIR_POST.png)](https://thisweekinreact.com?utm_source=dev_crosspost)

---

## 💸 Sponsor

[![React Bricks is a CMS with visual editing based on React components](https://thisweekinreact.com/emails/issues/128/reactbricks.png)](https://reactbricks.com/?utm_source=this_week_in_react)

**[React Bricks is a CMS with visual editing based on React components](https://reactbricks.com/?utm_source=this_week_in_react)**

**It's flexible for Developers**: create your own design system using React components, add Visual editing in your JSX and add sidebar controls to edit props like the background color. Choose Next.js, Gatsby or Remix and any CSS framework you like!

**It's easy for Content editors** who can directly edit in a visual way without breaking the design system: much easier than editing abstract entities using gray fields, as in a headless CMS. **And you save time**, as Content editors are autonomous!

**It's enterprise-ready** with Collaboration, Time-machine, Single Sign-on, GDPR-compliant datacenters, Global CDN for optimized images, E-commerce integration, Scheduled publishing and more.

Get started here: [ReactBricks.com](https://reactbricks.com/?utm_source=this_week_in_react)

---

## ⚛️ React


[![Storybook 7.0 beta](https://thisweekinreact.com/emails/issues/129/storybook7.png)](https://storybook.js.org/blog/7-0-beta/)

**[Storybook 7.0 beta](https://storybook.js.org/blog/7-0-beta/)**

Storybook officially announces the release of v7 in beta. The final version will be released in a few months. It's a very big update with a migration plan and even tools to help us upgrade. A subset of the major changes:

- Design and performance improvements
- Tests: interaction testing, Playwright, coverage reporting
- Documentation in MDX 2
- Component Story Format 3.0
- API frameworks: Vite, Next.js, SvelteKit

---

[![OpenNEXT - Open source Next.js serverless adapter](https://thisweekinreact.com/emails/issues/129/opennext.png)](https://github.com/serverless-stack/open-next)

**[OpenNEXT - Open source Next.js serverless adapter](https://github.com/serverless-stack/open-next)**

A project that aims to improve the portability of Next.js to serverless platforms, including **all** features (SSR, but also ISR, middleware, Image Optimization). For the moment, OpenNEXT only allows to deploy on AWS.

Ryan Florence said [Next.js is not really open-source](https://twitter.com/ryanflorence/status/1600526114010845184), and this led to interesting debates. Theo Browne's video sums the situation well: [Is NextJS A Trap? Vendor Lock In Rant](https://www.youtube.com/watch?v=mhdO8f_45CA). Vercel doesn't seem to do vendor lock-in, but at the same time it's normal their platform remains the best to deploy Next.js apps.

---

[![React Email](https://thisweekinreact.com/emails/issues/129/reactemail.png)](https://react.email/)

**[React Email](https://react.email/)**

New solution to create emails based on React and TypeScript. In practice, it is a renderer and a set of headless components compatible with popular email clients, as well as an interface to develop emails with a good DX. The [demo](https://demo.react.email/) reproduces some emails from Vercel, Airbnb, Stripe... It looks like a modern version of [React-MJML](https://github.com/wix-incubator/mjml-react), including a preview interface.

---

[![React Router 6.5](https://thisweekinreact.com/emails/issues/129/reactrouter6.5.png)](https://twitter.com/remix_run/status/1603887581770354688)

**[React Router 6.5](https://github.com/remix-run/react-router/releases/tag/react-router%406.5.0) + [Remix 1.9](https://github.com/remix-run/remix/releases/tag/remix%401.9.0)**

2 related releases that mark the [end of the React-Router-ing Remix project](https://twitter.com/ryanflorence/status/1604257159876730881) (moving the Remix code into React-Router), and the reintroduction of a useful feature: [optional route segments](https://twitter.com/remix_run/status/1603887581770354688).

---

- 📖 Beta docs: [useLayoutEffect](https://twitter.com/dan_abramov/status/1603772620641431553). All API ref pages are available. The beta site should be available soon.
- 👀 [useEvent => useEffectEvent](https://github.com/facebook/react/pull/25881): this anticipated React API is renamed and the scope reduced a bit. useEffectEvent is not made to optimize re-renders by stabilizing callbacks.
- 🎅 [GitHub Unwrapped 2022](https://www.githubunwrapped.com/): generates a video that summarizes your GitHub activity in 2022. The video is produced with React and [Remotion](https://remotion.dev/). Want to create your own unwrapped video? Fork the [github-unwrapped-2022](https://github.com/remotion-dev/github-unwrapped-2022) project!
- 🎨 [NodeToy 2.0 beta](https://nodetoy.co/): for creative devs, this new shader editor is React-Three-Fiber compatible, via [react-nodetoy](https://github.com/NodeToy/react-nodetoy).
- 📜 [Downgrade to MPA if users prefer reduced data in Remix](https://sergiodxa.com/articles/downgrade-to-mpa-if-users-prefer-reduced-data-in-remix): explains how to degrade Remix from SPA to MPA conditionally, depending on the `Save-Data: on` header. An interesting lever to use for the performance of apps/pages with short sessions.
- 📜 [SvelteKit Auth: Bringing NextAuth.js to all frameworks](https://vercel.com/blog/announcing-sveltekit-auth): it's NextAuth's turn to become agnostic. The project becomes Auth.js and now supports Next.js + SvelteKit.
- 📜 [Why does onClick={x()} causes "too many re-renders" error in React?](https://alexsidorenko.com/blog/onclick-too-many-re-renders/):well illustrated explanation of a mistake (or typo) we all made one day 😅
- 📜 [Svelte vs React: Which framework to learn in 2023?](https://scrimba.com/articles/svelte-vs-react/)
- 📜 [Next, Nest, Nuxt… Nust?](https://www.twilio.com/blog/comparing-nextjs-nestjs-nuxt-gatsby)
- 📜 [The Most Popular CSS-in-JS Libraries in 2022](https://stackdiary.com/css-in-js-libraries/)
- 📜 [Applying Design Patterns in React: Strategy Pattern](https://dev.to/itshugo/applying-design-patterns-in-react-strategy-pattern-enn)
- 📜 [Conditional wrapping in React](https://daily-dev-tips.com/posts/conditional-wrapping-in-react/)
- 🎥 [Reflections on a career managing React with Tom Occhino](https://www.youtube.com/watch?v=C1m5hQDjk20): super interesting interview, from the very beginning of React to Server Components. Tom Occhino has been Engineering Manager at Meta for many years.
- 🎥 [They Made An IDE For React?](https://www.youtube.com/watch?v=_599WJnZd4g): about Codux, the new React IDE from Wix.
- 🧑‍🎓 [Build a Realtime Chat App with Remix and Supabase](https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618): new free course on Egghead.
- 📦 [TailwindUI Protocol](https://twitter.com/adamwathan/status/1603433598660407296): a nice template to create documentation sites, based on Next.js and MDX
- 📦 [React-Hook-Form 7.41.0](https://twitter.com/HookForm/status/1603887632710176768)
- 📦 [Astro 1.7](https://twitter.com/astrodotbuild/status/1603868604667158529)
- 📦 [Redwood 3.7](https://github.com/redwoodjs/redwood/releases/tag/v3.7.0)
- 📦 [React Spectrum + React Aria - December 2022 Releases](https://twitter.com/devongovett/status/1603864523488006144)
- 📦 [Remix Flat Routes 0.5.1](https://twitter.com/kiliman/status/1603845269895921664)
- 📦 [@fastify/react beta](https://github.com/fastify/fastify-dx/releases/tag/react-v0.1.0)
- 🐦 ["Introducing hardware-accelerated animations in Framer Motion!"](https://twitter.com/mattgperry/status/1603010346763132933)

---

## 💸 Sponsor


[![Developer Nation Survey - Do you want to make an impact on the developer ecosystem?](https://thisweekinreact.com/emails/issues/128/dn-survey.png)](https://developereconomics.net/?member_id=thisweekinreact)

**[Do you want to make an impact on the developer ecosystem?](https://developereconomics.net/?member_id=thisweekinreact)**

Based on the latest State of the Developer Nation report, React is by far the most popular client-side library as it is used by 58% of web developers who use client-side web frameworks. What are your thoughts?

Take part in the most complete [survey](https://developereconomics.net/?member_id=thisweekinreact) Developer Nation has ever created, shape the key trends among developers for 2023 and win amazing prizes! 🎁

Upon completion you will get free access to our Virtual Goody Bag. Don't forget to sign up to enter the weekly draws. Among the 250 prizes you can find a ThinkPad L15 Gen 3, an Intel NUC 10 Performance Mini PC, IoT kits, an iPad Air, gift cards, Udemy courses, tech accessories, and many more.

[Start here](https://developereconomics.net/?member_id=thisweekinreact)!

---

## 📱 React-Native


[![Pointer Events in React Native](https://thisweekinreact.com/emails/issues/129/pointer.png)](https://reactnative.dev/blog/2022/12/13/pointer-events-in-react-native)

**[Pointer Events in React Native](https://reactnative.dev/blog/2022/12/13/pointer-events-in-react-native)**

The [Pointer Events](https://www.w3.org/TR/pointerevents3/) web API is being ported to React-Native. This is very good news for cross-platform. It should also facilitate the use of features like hover and right-click using React-Native JSX elements, which where not initially designed to support these features.

---

[![Expo-MDX](https://thisweekinreact.com/emails/issues/129/expo-mdx.png)](https://twitter.com/Baconbrix/status/1603053674548367360)

**[Expo-MDX](https://twitter.com/Baconbrix/status/1603053674548367360)**

Evan Bacon releases a package to facilitate the use of MDX on React-Native. Metro compiles MDX into React components, and a provider substitutes DOM elements (default target of MDX) with React-Native elements that you can style easily. We can expect some upcoming usage in Expo-Router, like the ability to create a new React-Navigation screen by creating a simple `.mdx` file? 👌

MDX support on React-Native is a topic that I particularly like. See also my talk [React Native EU 2020 - Cross-platform: ReactNative, Jamstack, And Beyond](https://www.youtube.com/watch?v=ScgFQojbAAc) or my article [Using Expo in Gatsby](https://sebastienlorber.com/using-expo-in-gatsby).

---

- 📜 The Current State of Debugging on React Native, [Part One: Expo](https://www.g2i.co/blog/the-current-state-of-debugging-on-react-native-part-1) + [Part Two: Bare RN](https://www.g2i.co/blog/the-current-state-of-debugging-on-react-native-part-two-bare-rn): A good up-to-date overview on React-Native app debugging setups, related to the recent changes that prevent to use a remote debugger. Profiling, network inspection... it still seems a bit complicated to get everything working properly.
- 📜 [No, React Native is not the future](https://blog.standardnotes.com/40921/no-react-native-is-not-the-future): story of an app that wanted to have only one codebase for web and mobile. In the end, they chose to use a WebView in a React-Native shell.
- 📜 [Apple Considering Dropping Requirement for iPhone Web Browsers to Use WebKit](https://www.macrumors.com/2022/12/14/apple-considering-non-webkit-iphone-browsers/): for now only in Europe. If generalized, this could impact the choice of the React-Native runtime and the WebViews.
- 📜 [Running your Maestro Flows on GitHub Actions](https://blog.mobile.dev/running-your-maestro-flows-on-github-actions-fe2e016b7338)
- 📦 [React-Native 0.71.0-RC.5](https://twitter.com/CipolleschiR/status/1604907381971976208): last release of 2022. Official release 0.71 expected early January.
- 📦 [Expo-Image alpha](https://twitter.com/tsapeta/status/1605240759342739456): the new Expo alternative to react-native-fast-image enters alpha
- 📦 [React-Native-Fiesta](https://github.com/mateoguzmana/react-native-fiesta): Skia animations to celebrate 🥳
- 🎨 [React-Native Skia - UI thread rendering demo](https://twitter.com/MateoGuzmanA/status/1604107348188057601)
- 🐦 ["React-Native 0.70 has broken the 40% market share"️](https://twitter.com/Kelset/status/1604794763965669377)
- 🐦 ["Did you know you can turn only some parts of the new architecture in React Native?"](https://twitter.com/Tr0zZe/status/1604854481979854848)
- 🧵 ["What makes Ignite v8 ("Maverick") so cool"](https://twitter.com/jamonholmgren/status/1603201805336588288)
- 📖 [Expo docs update](https://twitter.com/amanhimself/status/1603806595808653312)

---

## 🧑‍💻 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.

🧑‍💼 [**Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly**](https://www.callstack.com/senior-react-native-developer)

Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

🧑‍💼 [**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

- [Interop 2022: end of year update](https://web.dev/interop-2022-wrapup/)
- [StackOverflow Survey 2022 Results](https://survey.stackoverflow.co/2022/)
- [TypeScript Articles by Matt Pocock](https://www.totaltypescript.com/articles)
- [The Performance Inequality Gap, 2023](https://infrequently.org/2022/12/performance-baseline-2023/)
- [SvelteKit 1.0](https://svelte.dev/blog/announcing-sveltekit-1.0)
- [Deno 1.29](https://twitter.com/deno_land/status/1603509812079181824)
- [ESLint 8.30](https://eslint.org/blog/2022/12/eslint-v8.30.0-released/)
- [The Qase for Qwik: Love At First TTI](https://www.builder.io/blog/the-qase-for-qwik-love-at-first-tti)
- [Vercel Edge Functions - Generally Available](https://vercel.com/blog/edge-functions-generally-available)
- [Help choose the syntax for CSS Nesting](https://webkit.org/blog/13607/help-choose-from-options-for-css-nesting-syntax/)
- [Why I'm Optimistic About JavaScript's Future](https://leerob.substack.com/p/why-im-optimistic-about-javascripts)
- [Using inline JavaScript modules to prevent CSS blockage](https://calendar.perfplanet.com/2022/using-inline-javascript-modules-to-prevent-css-blockage/)
- [Release Notes for Safari Technology Preview 160](https://webkit.org/blog/13639/release-notes-for-safari-technology-preview-160/)
- [Chromium - Intent to Ship WebGPU](https://groups.google.com/a/chromium.org/g/blink-dev/c/VomzPhvJCxI/m/SUhU9Z0vAgAJ)
- [Discussing tRPC & GraphQL with Theo Browne & Max Stoiber](https://www.youtube.com/watch?v=2-407yO8nEU)
- [2022 a Golden Year as JavaScript Moves to the Edge](https://thenewstack.io/2022-a-golden-year-as-javascript-moves-to-the-edge/)
- [Web Share API is a W3C Proposed Recommendation](https://www.w3.org/blog/news/archives/9773)

---

## 🤭 Fun

[![alt](https://thisweekinreact.com/emails/issues/129/meme.png)](https://twitter.com/ryanflorence/status/1603247783254798336)

For even more fun, it's [all there](https://slo.im/fun)!

[![This Week In React - Fun Thread](https://thisweekinreact.com/emails/fun-banner.png)](https://slo.im/fun)