This Week In React #82: React 18 beta, Remix, React-Location, Expo, Rust, Next.js, TypeScript...

Nov 16, 2021

React

React 18 first beta has been released! And we can expect a final 18 release in around 3 months! The beta is considered stable enough to be tested in production (already the case for Facebook/Meta).

The version is considered feature-complete: the last APIs and hooks have landed to ensure a smooth migration path for the ecosystem, particularly for lib authors. A list of libs already compatible with React 18 has been published.

We could see it coming, Kent C. Dodds annonces that he is now the Director of Developer Experience at Remix. Free EpicRemix are planned.

He sumarizes: "Remix enables me to build amazing user experiences and still be happy with the code I had to write to get there."

What I retain is that Remix nudges you to adopt UX good practices, makes them intuitive with well-thought abstractions: progressive enhancement, async loadings, error boundaries, avoid overfetching without the need for GraphQL...

What stood out to me the most: the progressive enhancement on forms, which can work without JavaScript, including validation!

Remix uses esbuild (fully, no Webpack loader) to compile your app really fast. An adapter layer ensures cloud hosting portability without any lock-in.

A recurring question: "what is the difference with X". At the moment there are not many resources on the subject, but they are planning to do some comparative demos.

The "TanStack" has a new React routing library, with a nice list of features: async route loaders, prefetching, parallelization, caching, code splitting, nested layouts ... Tanner Linsey's 🧵 thread is a good summary .

For me, this lib meets a real need: React-Router is a simpler lib, and advanced features seem to be added in Remix. This library simplifies access to advanced features in a context where you do not want to use a meta-framework (Next.js, Remix, Redwood ...), as is the case for many corporate SPAs relying on Create-React-App or Webpack.

Extras:

📦 suspend-react: very small lib to handle async loads in your React code with Suspense. I could recommend this one and deprecate my own solution react-async-hook in some time, as Suspense matures
React Server Components Roadmap for Next.js: integration is in alpha. We'll need to wait a bit more before using this in production
Next.js + SWC: support for Styled-Components, Jest and legacy decorators (MobX...) has already been ported to Rust
Get started with Storybook and Next.js: some subtilities to consider if you want Storybook to display optimized images using next/image
useEffect sometimes fires before paint: it seems the execution of useEffect a after browser paint is not a strong guarantee after setState is called in useLayoutEffect
How I Would Use a UI Library: Kyle Shevlin highlights a practice I couldn't agree more: don't use a third-party UI lib directly in your codebase, but create your own abstraction, facade or design system on top, even if it initially does nothing
The React org is working to open source "stylex": the atomic CSS-in-JS lib remains awaited. Currently collaborating with Nicolas Gallagher (React-Native-Web) to pick the best of React-Native StyleSheet
You can use React Query for slow computation, not just API
MDX 2.0.0-RC2

Partners

React-Native Weekly: stay up-to-date React-Native core updates
ES.next News: learn about the latest in JavaScript and cross-platform tools
Tailwind Weekly: all things Tailwind CSS, new issue every Saturday
Start React Native: learn everything about gestures and animations with William Candillon
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

React-Native

Expo annonced the availability of its managed service for all. This cloud service allows you to build your Expo app for production with native code, create a custom dev client, manage certificates or even submit to the app store ... All this very simply, and without even needing to own a Mac!

We can see more clearly about the company's monetization strategy. There is a generous free plan, and offers for companies with a fixed price (no seat system). The service is optional and there is no lock-in, but they make it attractive enough that it seems really worthy to use it.

Also read 🧵 Evan Bacon and 🧵 James Ide threads.

Extras:

Hermes 0.10: preparing for React-Native 0.67 (still RC3)
React-Native-MacOS 0.64: late compared to upstream but Microsoft plans to catch up (Windows is up to date 😄).
React-Three-Fiber v8 in beta with React-Native support!
🎥 React Native Gesture Handler and Reanimated Tutorial: last video of William Candillon
🎥 Should you freeze your React Native screens: explains why to use React-Freeze
📦 intercom-react-native: finally an official package
🧵 "Here's how I improved performance by 33000%": Marc Rousavy simply migrated a function from JS to JSI & C++

Other

Lee Robinson explains that Rust is used more and more in our frontend tools, and justifies the introduction of SWC in Next.js which could one day be written entirely in Rust, and distributed as a binary. It gives a good general presentation of the needs and of the current ecosystem, including the mention of Go, Zig or WebAssembly.

Rust is faster than JavaScript. It is a system language that allows better memory management (simpler than C ++, without the Garbage Collector of JavaScript).

There is something that I only recently understood (via this conversation): Rust is very well integrated with Node.js (better than Go) via Node-API and the lib napi-rs which allows JavaScript to communicate with a Rust program via shared memory, without copying or serializing the data. It reminds a lot of JSI and C ++ on React-Native! And also SharedArrayBuffer!

Vercel recruits the creator of Svelte who can now work full time on it. Vercel recalls that its platform is open to other innovative frameworks apart from Next.js.

Zach Leatherman (Eleventy / Netlify) comments ""it’s exciting to see accumulating evidence that things are moving more and more into a post-React world". Personally, I don't agree, because React-Native and cross-platform should be considered. React may not end up being the absolute best choice for targeting the web, but it will remain good enough.

Extras: