This Week In React #104: Zag, Next.js, Remix, Ultra, ClickToComponent, Tilg, Component Party, Expo, Skia, TypeScript...
Hi everyone!
Lots of links this week!
The newsletter is late due to Twitter technical issues on the Twitter thread. Hopefully I was able to publish it now. I'd really appreciate a retweet 🙏 the issues didn't help giving it a good start.
Great news for Next.js: a router upgrade has just been announced!
React-Native is also in the spotlight this week, with 0.69 in RC, Expo SDK 45 and React-Native-Skia 👌
⚠️ There will be no edition for the next 2 weeks. Next one will be May 24th.
🙏 Support the newsletter:
- 😘 Recommend it to your friends: it really helps!
- 💸 Sponsor This Week In React
- 😍 Write testimonials on Twitter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
- 👥 Follow on LinkedIn
If you like this newsletter, subscribe in priority there:
React
New very practical lib, which allows to easily open the source file of a React component, with a simple Option + Click on the interface. Supports CRA, Next.js, Vite... Only works with VS Code, but other IDEs could be supported, like Intellij.
Zag is a collection of primitive components based on state machines. This makes it possible to decouple the logic from the framework, and to offer a binding for React, Vue, Solid... This new solution will allow the React Chakra UI lib to be adapted more easily to other frameworks, while sharing a lot more behavior code.
Why I don't miss React: a story about using the platform
Jack has worked at Google on Chrome DevTools for 2 years. Since then, he no longer uses React, and shares his feedback on his transition to standardized web APIs that do not require dependencies: forms, custom elements...
Kristofer migrated his personal site from Next.js to Remix, for fun. He gives his feedback, and shares the impact on the Lighthouse score. He lists the main changes he had to make: Chakra integration, Link component, routing, data fetching, metadata...
How HashiCorp developers iterate faster with ISR
Feedback on the use of Incremental Static Regeneration from Next.js to reduce build times for documentation sites at HashiCorp. The new "on-demand ISR" mode makes it possible to invalidate the Next.js cache and therefore to give immediate feedback when an update is published.
Extras:
- 💡 Next.js Router Upgrade: Next.js is going to get nested routes, and a new design to work with Server Components and React 18 features
- 🧑🎨 The 3D design too Spline can now export to React-Three-Fiber: this can enable you to make your scenes interactive and add physics
- 🔗 Component Party: site to easily compare the syntax of React with other frameworks (Vue, Svelte, Solid...) on different use-cases
- 🏢 Convex: new serverless real-time database with a React binding. They just raised $27m and integrates well with Netlify or Vercel
- 🎥 The Story of Concurrent React: 10 minutes on the story bind Concurrent React, from 2016 to today. Great research work
- 📦 Ultra 1.0: the modern React meta-framework for Deno just annonced its v1
- 📦 React 18.1: mostly bugfixes
- 📦 useTilg: convenient React hook for debugging
- 📦 zustand v4.0.0-rc.1
- 📦 Gatsby 4.13
- 🐦 Using useReducer to manage one-way boolean state
- 📜 Building a Terminal Wordle Game with React Ink
- 📜 Managing React Monorepos with Nx
React-Native
Expo SDK 45 beta is now available
The new SDK Expo goes into beta for a week. Some cool new stuff:
- React-Native 0.68.1: Expo upgrades to the latest version, but without enabling the Fabric renderer yet
- redesign of Expo Go, with better integration of EAS Update and the ability to see/open branches
- several libs migrated to JSI and/or Expo Sweet Module API
- a brand new expo CLI (beta), that will be versioned and installed locally rather than globally
- Expo wrapper libs are deprecated: original native libs can be used via config plugins
React Native Skia - For Us, For You, and For Fun
Skia is Google's 2D engine, and you most certainly use it: Chrome, Flutter, Android... Shopify supports the development of React-Native-Skia to provide graphics/2D primitives missing from React-Native, and not be limited when implementing a complex design. The lib offers an expressive declarative API, but also an imperative low-level Flutter-compatible API, which could help with web support via React-Native-Web and CanvasKit.
Extras:
- 📦 React-Native 0.69-rc.0: first version based on React 18, with the possibility of using concurrent features if you enable the new architecture!
- 📦 React-Native-Graph: new graph library with animations, based on React-Native-Skia
- 🎥 Charts with React-Native-Skia: latest video from William Candillon, related to the lib above 😉
- 🐦 React-Native-WishList preview: Marc Rousavy is working on a new powerful virtualized list lib, which should fix the perf shortcomings of the existing ones
- 🎥 RN.live: Jamon Holmgren's livestream channel
- 🎙️ RNR 233 - React 18 and the Future of React Native
- 📜 Using RevenueCat with Expo's Managed Workflow: shows how easy it is to integrate a native lib into Expo
- 📜 Twitter going all in on Jetpack Compose: It still fascinates me so much to know that Twitter uses React-Native on the web, but not React-Native on mobile 😄
- 📜 Apple Gets Ready to Eliminate Almost 30% of Apps in the App Store: take care, your old app could be unpublished 😅
- 📜 What is the performance of your users device?
- 📜 A performant way to use PouchDB@7 on React Native in 2022
Other
New work-in-progress tool that translates your TypeScript errors into human language, easy to understand, with additional explanations (source). It can even integrate with your IDE (VS Code extension).
Keeping TypeScript Type Guards safe and up to date
Brings up a problem that I never 😅: if you have a type-guard based on an object attribute, and you add a 2nd attribute, your type-guard becomes stale but TypeScript still compiles.
Extras:
- Web Scraping via Javascript Runtime Heap Snapshots: original scraping technique, which consists of extracting JS objects directly in memory
- Node 16.15: experimental
fetchsupport backported - Lerna is now an officially dead project. The project is officially unmaintained, but there are alternatives like Nx and Turborepo
- Nx 14 freshly released
- Zaplib post-mortem: feedback that demonstrates once again that Rust and Wasm is not always faster than JavaScript
- WebAssembly vs Javascript: "don't use WebAssembly primarily for performance"
- Detecting UI components with TypeScript Compiler API
- Misusing TypeScript Assertion Functions for Fun and Profit
- SemVer for TS in Practice
- Narrowing Types in TypeScript
- google/wireit: upgrades your npm scripts to make them smarter and more efficient
- Four Eras of JavaScript Frameworks
