This Week In React 95: onRecoverableError, Next.js, Remix, ReactNode, Fabric, Flipper, Expo, React-Runner, State Of JS...

Hi everyone!

I found this week particularly interesting! Impossible to read and comment on everything.

We really feel that things are moving on the React 18 side, with a new RC1 coming soon, and support in Next.js progressing. Nice releases for both Next.js and Remix.

On the React-Native side, we also see Fabric pointing the tip of its nose in the next release 0.68. It will take some additional work for the ecosystem to be ready, but we already have some great demos. Flipper could become a more universal tool?

Support the newsletter:

• Recommend it to your friends: it really helps!
• Sponsorise This Week In React
• Write testimonials on Twitter
• Retweet the latest Twitter thread
• Reply to thisemail:feedback is welcome

React

React 18: onRecoverableError

A React 18 RC1 should be released this week, announced by Andrew Clark:"Small update on React 18: we're planning another RC for next week that includes improvements to error reporting"

It ships with a new API onRecoverableError. The idea is to be able to log/report (via reportError) the "recoverable errors" that might happen in React, notably during the hydration process when there are some mismatches between SSR and CSR.

Next.js 12.1

Nice release including one of the most highly anticipated feature: on-demand Incremental Static Regeneration (ISR). A new APIunstable_revalidate("/static-page-url")should significantly help for CMS integration: as you can now get an immediate update on CMS publish.

On SWC side: 6 new Babel plugins ported to Rust (including Styled-Components and Relay), SWC minify in release-candidate and a better zero-config integration with Jest

There's also some notable progress on React 18 and Server Components support, but it's still in alpha.

See also theintroduction video from Leeor theon-demand ISR demo from Delba.

Remix 1.2

An interesting release on the deployment part: newserverBuildTargetoption to configure the build (directory, module format), possibility to build the server in a single output file, and a new experimental adapter to deploy on Deno.

The React.ReactNode type is a black hole

Widely known problem for a long time, the TypeScript type forReactNodeis too loose and does not permit to catch some errors at compile time. Kevin suggests to create aStrictReactNodetype and provides an ESLint rule to forbid the usage ofReactNode.Similar article.

Extras:

• Putting test files in the pages folder in a Next.js app: useful Next.js trick if you want to co-locate stories and tests alongside Next.js pages: thepageExtensionsconfig
• Deep dive into React keys bugs: explains various problems related to thekeyprops and suggest solutions
• React-Runner: new modern alternative toReact-Liveto provide live editor + preview, based on Sucrase instead of Bubl. This is promising and could eventually be adopted by both thenew React docsandDocusaurus.
• Tunnel-Rat: new Poimandres lib based on Zustand, to create a "React tunnel" and teleport JSX from one tree to another. See alsoReact-Teleporter.
• Nextjs-blog-theme: Next.js + Tailwind blog template provided by Netlify/Bejamas
• Mark Erikson:"when/why should I use Context, Hooks, Thunks, Sagas, React Query, RTK Query?"
• Migrating to React Query 4
• React Server Components, Vizualized

React-Native

Introducing Fabric to react-native-screens

With React-Native 0.68, we can easily activate the new Fabric renderer! But it will only work if all your libs are compatible.

Software Mansion announces its commitment to making its libs compatible with Fabric (starting with React-Native-Screens).

They encourage us to do the same and give us some leads (process and PRs). The idea: create libs that work as well with both the new and the old architecture at the same time, to allow an incremental migration, but without duplicating too much code.

This is very exciting, and the community provides some feedback:

• significant impact on memory consumption
• demo animated header 60 FPS

Note thatReact-Navigation already works under Fabric with react-native-screens!

Flipper is coming to your web and Node.js apps

Flipperis initially a desktop DevTool for React-Native, permitting you to inspect logs, network requests... Andrey introducesjs-flipper: a package that permits to integrate Flipper with web or Node.js apps (React example). He shares various use-cases at Meta: mobile, web, Node.js, Desktop, Oculus Quest... there are also app-specific business use-cases such as a plugin providing a "log as user X" feature.

Flipper seems to be an ideal platform to build a universal DevTool, provided the ecosystem follows, so Andrey invites us all to create plugins.

Extras:

• Security of React Native libraries: the bad, the worse and the ugly: a fairly advanced security audit that criticizes a lot of crypto libs in React-Native. The company suggest to useThemis, a cross-platform crypto library (React-Native API in beta) that encourages crypto good practices without being a crypto expert.
• Expo 101: Building mobile apps in weeks, not years: nice overview of the whole modern Expo ecosystem based on AES. They provide a tool for each stage of our mobile projects.
• Better Credentials Management with Expo Application Services
• Build a React Native QR Code Scanner using Vision Camera
• vision-camera-ocr: real-time OCR frame-processor!
• react-native-safe-area-context v4 RC: Fabric support, backward compatible.Looking for early adopter feedback
• react-native-url-router+overview
• Demo graph React-Native-Skia: more performant than SVG

Other

State Of JS 2021

Unsurprisingly, React remains very popular this year, but it is surpassed by Svelte and Solid in terms of satisfaction. Next.js and Remix both at 91% satisfaction. Read in particularSwyx's conclusion. Alivestreamis taking place today.

Remember this survey is notwithoutbias, but it remains interesting to explore trends. Sacha Grief is of goodwill to improve andaddresses the criticisms on Dev.

Extras:

• Rebuilding Babel: The Tokenizer: great interactive article, perfect to learn what is a tokenizer
• Express 5.0: first beta after a long time in the meantime it's modern contender Fastify tops the State of JS and releasedv4.0.0-alpha.1
• GitHub Actions: concurrency.cancel-in-progress: useful to optimize your CI
• Node.js: AbortSignal.timeout()`: new API
• new.target: TIL, permits to know if a function was called withnew, faster thaninstanceof
• CSS Container Queries: enabled by default in WebKit
• New Google Cloud Functions: 60min execution time!
• Cross-Browser support with Cross-Origin isolation: explains why StackBlitz WebContainers only work in Chromium
• Create your Chrome Extension using Flutter web: this use-case is interesting: an extension doesn't need SEO
• TypeScript - Implement Rust-style Result: reminds the Either FP type
• Netlify Graph: new Netlify service after acquiring OneGraph: a unified GraphQL API targeting lots of other third-party APIs
• Node.js Trademarks Transferred to OpenJS Foundation: that would be nice ifOracle also transferred its JavaScript trademarks
• Don't trust JS library size, min+gzip
• Yarn 3.2: Libc, Yarn Explain, Next Major, ...
• Testing Vite with minimal config using Vitest
• SolidJS sponsored by Vercel
• The Story of Asynchronous JavaScript
• "TIL you can write overloads for arrow functions in TypeScript"
• You Can throw() Anything In JavaScript - And Other async/await Considerations
• Exploring model-based testing for UIs
• A Complete Guide to CSS CascadeLayers
• Resumable JavaScript with Qwik
• Deno 1.19
• An Introduction to Deno: Is It Better than Node.js?
• Survivorship Bias in Web Performance
• Hasura: Announcing our $100M Series C funding
• Rome:"A sneak peak of our formatter: being able to format partial broken code!"
• Injecting backdoors to NPM packages
• How toFavicon in2022:Six files that fit most needs
• tooling.one: collection of useful dev tools
• Four reasons why WebdriverIO is better than Cypress
• Measuring user flow performance with Lighthouse and WebdriverIO
• "In @ChromeDevTools holding SHIFT while moving mouse over resources in network panel shows you which asset caused to load another asset."
• XState -> Mermaid converted?