📨 #128: SWR, Vite, Codux, Storybook, Next.js, Forget, Nylon, Paper, align-deps, INP, Zod, Tauri...
Hi everyone!
We are entering the Christmas season, and React bloggers are reducing the pace. On my side, I will skip 2 editions.
Still, we have some nice releases and articles to discover. I really liked the article about font layout shifts.
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
Don't miss the next email!
💸 Sponsor
React Bricks is a CMS with visual editing based on React components
It's flexible for Developers: create your own design system using React components, add Visual editing in your JSX and add sidebar controls to edit props like the background color. Choose Next.js, Gatsby or Remix and any CSS framework you like!
It's easy for Content editors who can directly edit in a visual way without breaking the design system: much easier than editing abstract entities using gray fields, as in a headless CMS. And you save time, as Content editors are autonomous!
It's enterprise-ready with Collaboration, Time-machine, Single Sign-on, GDPR-compliant datacenters, Global CDN for optimized images, E-commerce integration, Scheduled publishing and more.
Get started here: ReactBricks.com
⚛️ React
New major release for the Vercel data-fetching library. Various improvements listed, including:
- New
useSWRMutationhook - Simplified Optimistic UI
- Browser extensions: SWR DevTools
- An imperative preloading API
- Improved React 18 support
Vite is a frontend tool that keeps growing in popularity. This latest version now uses Rollup 3, which greatly simplifies the management of Vite's internal assets. There are now 2 React plugins with different tradeoffs:
- vite-plugin-react: esbuild + Babel
- vite-plugin-react-swc: replace Babel by SWC in dev, which seems to improve cold start and HMR
Codux - Visual IDE for React projects
Nadav is co-founder of Wix and presents us his new project, a visual IDE for React (and soon other frameworks). It's not about replacing your current IDE, but rather about completing it. Codux allows you to work on a component in isolation, including editing props and styles via a visual interface. The video Meet Codux should help you understand better. It's a bit like Storybook, but with the ability to edit, and a bidirectional synchronization with your code.
- 📖 Beta docs: team page updated + useTransition demo + useSyncExternalStore API ref
- 📖 New Supabase Docs, built with Next.js: Supabase's doc is migrating from Docusaurus to Next.js, due to the growing need to build something custom. Nevertheless, they give a very positive feedback on Docusaurus.
- 📖 React Router website repository public
- 📖 React-Spring - New doc site
- 📜 Integrate Next.js and Storybook automatically: introduce the automatic support of Next.js via the new Framework API that comes in Storybook 7 (now in beta). Storybook is able to understand your Next.js project better. No more need to add decorators/addons for navigation, Link and Image components. The support will continue to improve over time: Server Components, next/font...
- 📜 Optimizing Web Fonts in Next.js 13: probably the best illustrated article explaining font layout shifts. Explains at the end how Next.js optimizes this for us automatically. Worth reading!
- 📜 Migrating a large, open-source React application to Next.js and Vercel: Vercel is doing a POC of migrating the BBC's open-source site, just for fun 😄 They're highlighting the benefits gained just by being on a Next.js stack and call BBC to action if they want to pursue this migration.
- 📜 Avoid These Common Pitfalls Of React useState: 6 common useState anti-patterns presented with solutions + embedded interactive exercice playgrounds
- 📜 The Evolution of urql
- 📜 Publishing Docusaurus to dev.to with the dev.to API
- 📜 An Introduction To RedwoodJS
- 📜 Using Path Matching in React Router
- 📜 Testing API Calls in useEffect using React Testing Library and Jest
- 💬 Improve React Query hydration, Streaming SSR & Server Components
- 🐦 Xuan Huang - "Forget is in good hands as we now have a team behind it": Xuan also mentions that he left Meta
- 🎨 React-Three-Editor demo - Threejs Journey scene
- 🐦 "I fixed vanilla-extract/sprinkles using a vite plugin": new Vite plugin that could significantly reduce the CSS emitted by Vanilla-Extract / Sprinkles
- 🐦 Ryan Florence - "Next.js isn't really OSS"
- 📦 React-Nylon + Four: something is cooking. Soon, a lightweight Three.js / React-Three-Fiber alternative?
- 📦 Remix 1.8: the "React-Router-ing" is progressing
- 📦 Chakra UI Figma Kit
- 🎥 Modern Component Library with React & Storybook
- 🎥 MaterialUI + Qwikify demo
Don't miss the next email!
💸 Sponsor
Do you want to make an impact on the developer ecosystem?
Based on the latest State of the Developer Nation report, React is by far the most popular client-side library as it is used by 58% of web developers who use client-side web frameworks. What are your thoughts?
Take part in the most complete survey Developer Nation has ever created, shape the key trends among developers for 2023 and win amazing prizes! 🎁
Upon completion you will get free access to our Virtual Goody Bag. Don't forget to sign up to enter the weekly draws. Among the 250 prizes you can find a ThinkPad L15 Gen 3, an Intel NUC 10 Performance Mini PC, IoT kits, an iPad Air, gift cards, Udemy courses, tech accessories, and many more.
📱 React-Native
- 📜 React Native Paper 5.0 – What’s New?: add Material Design 3 "Material You" support, but also keeps the possibility to stay on Material Design 2. There are new components, and helpers to easily integrate the lib with React-Navigation.
- 📜 Microsoft - Announcing the evolution of dep-check: align-deps: new version of the dep-check tool from Microsoft that allows to ensure that its monorepo uses the right package versions. Renamed because of a conflict with depcheck. Can now be more easily used on a project other than React-Native.
- 📜 Introducing: Maestro Studio: to create end-2-end black box tests via an interface
- 🔗 Microsoft - React-Native Devblog: new blog dedicated to React-Native on the Microsoft website.
- 🎨 @expo-image demo: Software Mansion is working on an alternative to react-native-fast-image
- 🎨 React-Native-Skia-Gesture demo: gesture detector for Skia canvas elements
- 📦 android-performance-profiler: new API available
- 📦 expo-router@next - Shared Routes + Layout Clones (experimental)
- 🎙️ RNR 253 - We React to News: Kotlin's got a new daddy
- 🎥 File-based navigation for Expo and React Native
- 📖 Expo docs updates
- 🐦 "Apple is preparing to allow alternative app stores and side-loading on iOS" + "And allow non-Safari browser engines": this seems important for React-Native even if for the moment it seems limited to Europe.
🧑💻 Jobs
🧑💼 Product Engineer at Causal, Remote/London/NY, $150-250k
Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.
🧑💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly
Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!
🧑💼 G2i - 100% Remote React Native Jobs
We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.
🔀 Other
- Optimize Interaction to Next Paint: Google devs explain how to improve the performance of our apps interactions (the new INP metric). This is particularly interesting for our React SPAs.
- 2022 In Review: What’s New In Web Performance?:A nice overview of what's new in webperf in 2022. The 2023 predictions indicate work to better measure SPA performance, instead of just the initial page load metrics. TIL about the soft-navigations repo.
- Ecma International welcomes new members: welcoming Shopify and Vercel
- Zod 3.20: glad to see the coercion coming, very useful to convert some query-string params (example: ?pageSize=10) into numbers automatically.
- Vitest 0.27.7: Vite 4 support
- Tauri Mobile Alpha Release: if I understand correctly it is using a WebView - new competitor to Cordova/Capacitor? 🤔
- New npm features for secure publishing and safe consumption: finally a code explorer on the npm site!
- WebKit Features in Safari 16.2
- Bun 0.3.0
- Alma - a digital playground for generative graphics
- TypeScript: Should you use Types or Interfaces?
🤭 Fun
