# This Week In React #106: Remix, Framer Motion, Storybook, Gatsby, Remotion, Metro, Lerna, TypeScript, Three.js, LocatorJS, Tailwind... Hi everyone! We have a few interesting news related to Remix this week! This was expected, after last week's Remix Conf. I'm going to [App.js](https://appjs.co/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) conf next week: say hi if you go too! 😉 🙏 **Support the newsletter:** - 😘 **Recommend it to your friends**: it really helps! - 💸 [**Sponsor This Week In React**](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) - 😍 [**Write testimonials on Twitter**](https://twitter.com/sebastienlorber/timelines/1448942785814466561?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) - 🧵 [**Retweet the latest Twitter thread**](https://slo.im/thread?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) - 📨 Reply to this [**email**](mailto:lorber.sebastien@gmail.com?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter): feedback is welcome - 👥 Follow on [**LinkedIn**](https://www.linkedin.com/company/this-week-in-react/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) **If you like this newsletter, subscribe in priority there**: - 🇬🇧 [ThisWeekInReact.com](https://thisweekinreact.com/) - 🇫🇷 [ReactHebdo.fr](https://reacthebdo.fr/) [![](https://user-images.githubusercontent.com/749374/153181021-8fdb0ece-270a-4cf2-980b-4557d04316ad.png)](https://thisweekinreact.com) --- ## React [**React Router v6.4.0-pre.2**](https://twitter.com/remix_run/status/1528752932916645888?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Already announced in [Remixing React Router](https://remix.run/blog/remixing-react-router?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): many Remix abstractions (`action`, `loader`...) will be added to React-Router. This is happening in v6.4, currently in pre-release. [Doc for the new Data APIs](https://beta.reactrouter.com/en/remixing/getting-started/data?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) is already available! [**Should you use Framer Motion or Motion One?**](https://motion.dev/blog/should-you-use-framer-motion-or-motion-one?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Matt is the author of many popular animation libraries. He explains in a nuanced way the difference between a declarative and an imperative model. Most React developers should use the declarative Framer Motion library. Motion One is a lightweight, low-level imperative library that wants to be the *"JQuery for Web Animations API"*. **Extras:** - 📜 [Making Videos with Code is Cool, but is it Productive?](https://www.seancdavis.com/posts/making-videos-with-code-is-cool-but-is-it-productive/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): feedback explaining that Remotion + Screenflow can be used in tandem. - 📜 [We rebuilt Cloudflare's developer documentation - here's what we learned](https://blog.cloudflare.com/new-dev-docs/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): from Gatsby/MDX to Hugo - 📜 [Working With Three.js: The Popular 3D JavaScript Library](https://betterprogramming.pub/working-with-three-js-the-popular-3d-javascript-library-bd2e9b03c95a?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) + [Working With 3D Model in Three.js](https://betterprogramming.pub/working-with-3d-model-in-three-js-e228621141af?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): nice intro tutorial to discover Three.js in CRA with React-Three-Fiber. - 📜 [How FedEx Influenced the React Logo](https://maykelloomans.com/notebook/how-fedex-influenced-the-react-logo?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📜 [High-Performance Personalization with Next.js Middleware](https://www.plasmic.app/blog/nextjs-personalization?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📜 [React start losing its way](https://towardsdev.com/react-start-losing-its-way-e765db4d2b07?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📜 [React project structure for scale: decomposition, layers and hierarchy](https://www.developerway.com/posts/react-project-structure?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📦 [Storybook 6.5](https://storybook.js.org/blog/storybook-6-5/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): great release: interaction testing, Webpack 5 lazy compilation, Vite builder, React 18, MDX 2, Figma plugin... - 📦 [LocatorJS](https://www.locatorjs.com/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): browser extensions to rapidly open a React component in your IDE by clicking on the UI. - 📦 [Remix-Three](https://github.com/nickjs/remix-three?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): integration package for Remix and React-Three-Fiber - 📦 [TanStack Table v8 beta](https://twitter.com/tannerlinsley/status/1530298053046857728?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): React-Table has been made framework-agnostic, and renamed accordingly. Adapters available for React, Solid, Svelte, Vue... - 📦 [Microsoft FluentUI React v9 RC](https://react.fluentui.dev/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): Microsoft design-system Storybook, used on Office - 📦 [Gatsby 4.5: Script component + GraphQL Type Generation](https://www.gatsbyjs.com/docs/reference/release-notes/v4.15/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 📦 [Jotai 1.7](https://twitter.com/dai_shi/status/1530548365658050562?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🎥 [Reactathon Conf 2022 playlist](https://www.youtube.com/playlist?list=PLRvKvw42Rc7O0eWo2m_guXdZsGTEQM_jj&utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🎥 [Remix Conf 2022](https://www.youtube.com/watch?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter&v=4_nxvVTNY9s) - 🧑‍🎓 [Up and Running with Remix](https://egghead.io/courses/up-and-running-with-remix-b82b6bb6?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): free course by Kent C. Dodds - 🐦 Remix feedback: [Jamie Kyle](https://twitter.com/buildsghost/status/1529211560412864513?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter), [Sarah Dayan](https://twitter.com/frontstuff_io/status/1530103495042506752?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🐦 [Remix VueJS Support?](https://twitter.com/ryanflorence/status/1529438363341639680?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - 🐦 [Dan Abramov optimizing the new React doc site](https://twitter.com/dan_abramov/status/1529677207869825024?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): interesting takeaways, in particular using Suspense to enable non-blocking hydration - 🐦 [Reco: avoid runtime CSS-in-JS lib](https://twitter.com/markdalgleish/status/1528948996706025472?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) --- ## 💸 Sponsors 💡 [How to sponsor this newsletter](https://gist.github.com/slorber/cb732fb5d0a002c4d73236a9baeba7bb?utm_campaign=thisweekinreact&utm_medium=email&utm_source=Revue%20newsletter) [**Meteor Celebrates 10 Years in the Javascript Ecosystem**](https://social.meteor.com/get-started?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) **Meteor** or also known as **MeteorJS** is still alive and well, and we're happy to share that we are also growing! Meteor is a mature and open-source framework for seamlessly building and deploying Web, Mobile, and Desktop applications in Javascript. Use popular frameworks like Vue, **React**, Svelte, or Blaze and tools right out of the box. Focus on building features instead of configuring disparate components yourself. Whether you're still studying to become a developer or a seasoned veteran, you'll find it convenient and easy to code with Meteor. Join the community of developers from all over the world that rely on Meteor. [Get started here](https://social.meteor.com/get-started?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter)! [**Axiom - Zero-Config Observability for Vercel**](https://www.axiom.co/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) 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](https://twitter.com/sebastienlorber/status/1528666563452317696?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) 😉 --- ## React-Native [**React and React Native finally feel the same**](https://legendapp.com/dev/react-and-native/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Jay explains the 3 main challenges of the web/mobile cross-platform today: styling, animation, navigation. He suggests to use Tailwind-React-Native with his new cross-platform animation library. [Legend Motion](https://legendapp.com/dev/motion/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) relies on the same API as Framer Motion (web-only). The doc briefly explains the [differences with Moti](https://legendapp.com/dev/motion/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#moti), another similar solution. **Extras:** - 📦 [Tailwind-React-Native](https://github.com/marklawlor/tailwindcss-react-native?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): looks nice to use Tailwind in a cross-platform way. Mobile: `className` + Babel plugin. Web: just forwarding the `className` to a React-Native-Web element. - 📦 [React-Native-Esbuild](https://github.com/oblador/react-native-esbuild?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): to very easily replace Metro with esbuild and compile much faster. A few limitations to consider: no Hermes nor Fast Refresh. - 🎙️ [RNR 237 - React Native on Desktop](https://reactnativeradio.com/episodes/rnr-237-react-native-on-desktop?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) --- ## Other [**Airbnb - Faster JavaScript Builds with Metro**](https://medium.com/airbnb-engineering/faster-javascript-builds-with-metro-cfc46d617a1f?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Build and hot-reload times have skyrocketed at Airbnb. They decided to replace Webpack with [Metro](https://facebook.github.io/metro/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) (the React-Native bundler 🤯) and saw a significant improvement. This article highlights some architectural differences between the 2 bundlers, and the challenges encountered during this migration. Note: [Stripe also uses Metro](https://twitter.com/cpojer/status/1529306449956208640?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) 🤔. [**How Lerna just got 10x faster!**](https://blog.nrwl.io/lerna-used-to-walk-now-it-can-fly-eab7a0fe7700?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) Nwrl (behind Nx) just took the leadership of the unmaintained monorepo tool Lerna. They have already released a [v5.0](https://twitter.com/NxDevTools/status/1529136719471079424?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) and started integrating Nx into Lerna 5.1-beta as a retrocompatible option. A simple Lerna config `useNx: true` and your build becomes immediately faster. **Extras:** - [The balance has shifted away from SPAs](https://nolanlawson.com/2022/05/21/the-balance-has-shifted-away-from-spas/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): the need to have a SPA decreases with the addition of new web APIs which make certain experiences now possible in MPAs - [XState Test v1 Alpha released](https://twitter.com/statelyai/status/1531250605313892352?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): use state machines to generate all possible paths when testing? 🤔 - [Parcel 2.6](https://twitter.com/devongovett/status/1529482596710744067?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): the [scoping of CSS vars](https://twitter.com/devongovett/status/1529482601781665794?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) looks like an interesting idea 🤔 - [TypeScript 4.7](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): with ES Modules support - [Babel 7.18.0](https://babeljs.io/blog/2022/05/19/7.18.0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter): with TS 4.7 support - [A new way to test types](https://effectivetypescript.com/2022/05/28/eslint-plugin-expect-type/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [How we converted our Node.js library to Deno (using Deno)](https://www.edgedb.com/blog/how-we-converted-our-node-js-library-to-deno-using-deno?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Byte sized TypeScript #1 - Filter type](https://dev.to/anuraghazra/byte-sized-typescript-1-filter-type-3ga5?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Advanced TypeScript: How we made our router typesafe](https://speakerdeck.com/zoontek/advanced-typescript-how-we-made-our-router-typesafe?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Playlist Advanced TypeScript Matt Pocock](https://twitter.com/mattpocockuk/status/1530922031738404868?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Monorepos in JavaScript & TypeScript](https://www.robinwieruch.de/javascript-monorepos/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Type-Trident: a curated list of advanced type level madness](https://github.com/anuraghazra/type-trident?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Tailwind - Headless UI v1.6](https://tailwindcss.com/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Processing Arrays non-destructively: for-of vs .reduce() vs .flatMap()](https://2ality.com/2022/05/processing-arrays-non-destructively.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter#mapping-with-for-of) - [Lesser-Known And Underused CSS Features In 2022](https://www.smashingmagazine.com/2022/05/lesser-known-underused-css-features-2022/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Dark Mode Toggles Should be a Browser Feature](https://www.bram.us/2022/05/25/dark-mode-toggles-should-be-a-browser-feature/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Electron 19.0.0](https://www.electronjs.org/blog/electron-19-0?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Chrome 103 Beta](https://blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [GitHub is now free for teams](https://github.blog/2020-04-14-github-is-now-free-for-teams/?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) - [Angular's Vision for the Future](https://blog.angular.io/angulars-vision-for-the-future-3cfca5e7b448?utm_campaign=This%20Week%20In%20React&utm_medium=email&utm_source=Revue%20newsletter) joke