This Week In React #91: Remix, Next.js, Server Components, Forms, React-Native, TypeScript, Monorepos...

Jan 25, 2022

React

We finally have an official comparison with Next.js!

First, you should know that the Remix team really appreciates the Vercel platform, despite the competition between Next.js and Remix. But they say Remix is better obviously 😏 and there are good arguments and waterfalls to prove it.

This comparison is based on a real-world e-commerce app with a Shopify API integration, on which they essentially analyze 2 pages: a landing page with fairly static content, and a very dynamic search page. All this deployed on Vercel and Fly.

A good highlight of the advantages of server rendering: sometimes it's better to render everything on the server side rather than doing a mix of the 2 (as Next.js seems to recommend): static shell, and search results fetched on the client side.

Next.js is more complex, with life-cycle functions that run everywhere (server, browser, etc.). Remix prefers to keep it simpler, just do dynamic rendering, but do it well. By relying on the browser's native functions, this also reduces the amount of JavaScript to be sent on the client side.

Very long article, not easy to summarize, read it to make up your own mind. I haven't fully understood Remix yet, and I still have some questions about error handling if the Shopify API goes down, security, architecture complexity with Redis cache, app redeployment with invalidation of the caches… In short, a lot of things that we like about the Jamstack and that we don't necessarily want to lose.

Overall it really makes me want to try Remix on a non-critical project: luckily I need to build a website for this newsletter 😏

How React server components work: an in-depth guide

Very interesting and quite technical article on how Server Components work. A lot of details that I haven't seen anywhere else so far. Explains in particular how a server-side React tree is serialized in JSON with "module references", and presents some examples of payloads for client/server communication.

Extras:

What is a react component, anyways?: interesting thoughts on what exactly is a React component. Not so easy to describe, even for the official docs. Suggest 4 definitions, one of them is "unite of update".
Mastering the art of forms in React: Kolby believes that using controlled inputs shouldn't be automatic, and recommends React-Hook-Form + Zod for advanced needs.
Sneak peek into React 18 useDeferredValue hook: permits to de-prioritize some rendering work in React, allowing urgent updates to be faster
Exploring React 18’s three new APIs: useId, useSyncExternalStore, useInsertionEffect
How Redux DevTools broke Jira for 14 hours: funny post-mortem, not so related to React
Vercel Platforms Starter Kit: Vercel published a template based on Next.js for those that want to create platforms (multi-tenant, one domain per tenant). Gives some examples like the Hashnode blogging platform.
Blitz pivot is confirmed: the meta-framework will be transformed into Blitz Toolkit, a framework-agnostic toolkit that should work nicely on top of others (Next.js first). For the “zero abstraction data layer”, a collaboration with tRPC may be possible.
Custom Elements + React: Dan Abramov asks again for community feedback
Storybook Addon Next
Remix Conf: 24-25th May
🐦 Daishi Kato explains how these libs work: Zustand, Jotai, Valtio
🐦 Props drilling: context is not the only option
🎥 Remix Singles: new series of videos about Remix
🧵 Amazon dev: “SSR React wasn’t fast enough for us.”: an Amazon employee explains how they optimized the site. Not a lot of details about React unfortunately.
Deep dive into the new Suspense Server-side Rendering
Type-safe routing in React with fp-ts-routing (part 1)

💸 Sponsors

Stream: powerful Chat & Feeds for React & React-Native

Stream is the maker of enterprise-grade APIs and SDKs that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.

With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.

Stream provides robust client-side SDKs for popular frameworks such as React, React-Native, Flutter, Android, Angular, Compose, Unreal and iOS. It also supports Expo managed workflow.

Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.

React-Native

Announcing React Native 0.67

It's not the release with the most exciting highlights 😅 This blog post mainly talks about the improvements of the release process, that should be more robust and regular.

This process is also mentioned in another post React Native - H2 2021 Recap: this is an important step for the rollout of the New Architecture. Another reminder that React-Native is not just iOS + Android 😏.

Note: we should have some updates from Microsoft about the MacOS and Windows platforms, as they are catching up with upstream releases.

From Native to React Native to Flutter:

Quite a long but very interesting article, which fairly discusses the various problems encountered with both React-Native and Flutter.

I think their conclusion would be different if they were building for other platforms than iOS + Android (web support for example), or if they had a regular need to mix native views with Flutter view. Too bad React-Native-Skia didn't exist earlier 😄, they might have liked it.

Extras:

Chain React cancelled this year
🎥 Unboxing Expo SDK 44
🎙️ RNR 224 - React Native Web on Next.js with Fernando Rojo
🐦 React-Native Fabric + Apple TV
🐦 iOS UI recreated with React-Native
🐦 Enter/Exit Layout animations with Reanimated
🐦 Skia + Raycasting
🐦 Flutter web: opinions from Jake Archibald & Jamie Kyle: confirms our choice to use React-Native for cross-platform 😄

Partners

Start React Native: learn everything about gestures and animations with William Candillon
React-Native Weekly: stay up-to-date React-Native core updates
TypeScript Weekly: the best TypeScript links every week, right in your inbox.
ES.next News: learn about the latest in JavaScript and cross-platform tools
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

Announcing TypeScript 4.6 Beta

A great release that keeps adding useful improvements, notably on the Control Flow Analysis that can be very useful for a React dev. The official blog post does not showcase this, but I tested and this will improve a bit on React props destructuring, but unfortunately not enough to work with {...props}: maybe for the next release?

Monorepo.tools

A well-presented page that gives you good reasons to adopt the monorepo, and compares some popular tools: Lerna, Nx, Turborepo, Bazel, Lage... Published by Nwrl (behind Nx), the comparison remains fair and quite objective.

Extras: