This Week In React #104: Zag, Next.js, Remix, Ultra, ClickToComponent, Tilg, Component Party, Expo, Skia, TypeScript...
React
Click To Component
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
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...
Moving from Next to Remix
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
💸 Sponsors
💡 How to sponsor this newsletter
Build Internal Apps Remarkably Fast with Retool
Retool is a new approach to building internal apps: we’ve unified the ease of visual programming with the power and flexibility of real code. Drag and drop a form together, and have it POST back to your API in minutes. Deploy instantly with access controls and audit logs.
App.js Conf 2022 - June 8-10 in Kraków
After two long years, App.js Conf is coming back as an in-person event! Meet the creators of React Native & Expo, learn from the best and simply have fun with other devs from all around the world! Our line-up is full of mobile development professionals ready to share their knowledge. See our amazing speakers here!
In addition to the two-day conference, we also prepared full-day practical workshops! There are still some tickets left for two of our workshops:
Modern intro to app development with React and Expo by Lydia Hallie & Evan Bacon;
Setting up a professional development process with Expo and EAS hosted by the Expo team themselves!
You can now book the workshop tickets with a 20% exclusive discount for This Week in React subscribers! Use the code ThisWeekinReact20 or follow this link to book your spot.
PS: I'm going there this year 😉
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
📜 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 😅
Partners
Start React Native: learn everything about gestures and animations with William Candillon
Adventures in Nodeland: Matteo writes about his journey as a Node.js TSC member and maintainer of 500+ modules on npm, including Fastify and Pino!
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
TypeScript Error Translator
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
fetch
support backportedLerna 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"
google/wireit: upgrades your npm scripts to make them smarter and more efficient