This Week In React #95: onRecoverableError, Next.js, Remix, ReactNode, Fabric, Flipper, Expo, React-Runner, State Of JS...
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.
Nice release including one of the most highly anticipated feature: on-demand Incremental Static Regeneration (ISR). A new API
unstable_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.
An interesting release on the deployment part: new
serverBuildTarget option 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.
Widely known problem for a long time, the TypeScript type for
ReactNode is too loose and does not permit to catch some errors at compile time. Kevin suggests to create a
StrictReactNode type and provides an ESLint rule to forbid the usage of
ReactNode. Similar article.
📜 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: the
📜 Deep dive into React keys bugs: explains various problems related to the
keyprops and suggest solutions
📦 React-Runner: new modern alternative to React-Live to provide live editor + preview, based on Sucrase instead of Bublé. This is promising and could eventually be adopted by both the new React docs and Docusaurus.
🔗 Nextjs-blog-theme: Next.js + Tailwind blog template provided by Netlify/Bejamas
Content creators don’t like the grey forms of a headless CMS.
Visual tools like Wix or Webflow are either not flexible, complex to use or too flexible: a content creator should not decide on a margin, right?
React Bricks has the best of the 2 worlds: all the advantages of a Headless CMS and best in class Visual editing experience with no way to break the design system.
You create visually editable content blocks as React components using the react-bricks library. Content creators use these blocks to compose content with all the freedom they want and no more than they need.
Create your free account and start building now!
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:
Flipper is initially a desktop DevTool for React-Native, permitting you to inspect logs, network requests... Andrey introduces js-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.
📜 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 use Themis, 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.
📦 vision-camera-ocr: real-time OCR frame-processor!
🎨 Demo graph React-Native-Skia: more performant than SVG
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.
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
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 particular Swyx's conclusion. A livestream is taking place today.
Rebuilding Babel: The Tokenizer: great interactive article, perfect to learn what is a tokenizer
concurrency.cancel-in-progress: useful to optimize your CI
AbortSignal.timeout(): new API
new.target: TIL, permits to know if a function was called with
new, faster than
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