Hi everyone!
We're covering 2 weeks of news, including 2 great releases: Astro 3.0 and VisionCamera 3.0. There have also been a lot of interesting articles, so I've had to filter a bit!
Bun 1.0 coming out tonight. I'm curious to see what they have planned. Having tested it on unit tests as a replacement for Jest, it's really very fast.
The React-Native EU conference kicks off today. I spotted some ๐ฆ very interesting talks, particularly the one on Static Hermes.
For those who want to visit Italy, go to ReactJS Day in Verona on 27 October 27. The conference is offering -10% on tickets and 2 online/remote tickets to our readers, which I'm giving away to the first 2 people who reply to this email and claim them.
I often forget to mention it here, but I "build in public". You can check out my latest monthly Indie Hackers report and ๐ฆ more Twitter details.
๐ก Subscribe to the official newsletter to receive an email every week!
FrontendMasters โ Complete React.js Learning Path to Senior React Developer
Learn React.js from the ground up to advanced topics like performance, testing, and code quality. Start by building a real-world app in the Complete Introduction to React. Continue with Intermediate React, integrating the most popular tools from the ecosystem. Then learn performance, TypeScript, and even Next.js, the fullstack React framework!
โ๏ธ React
Astro 3.0
This new version of Astro innovates in particular through the use of the new View Transition API, and the ability to navigate fluidly and animatedly from one page to another, while preserving the state of the components displayed. This reduces the need for a SPA in many use cases.
Other notable improvements include:
Image Optimization stable
Faster Rendering Performance: Astro components render 30-75% faster.
SSR Enhancements for Serverless: New ways to connect to your hosting platform.
HMR Enhancements for JSX: Fast Refresh support for React and Preact.
Optimized Build Output: Cleaner and more performant HTML.
Making Sense of React Server Components
Josh Comeau is back with a great introduction to React Server Components, taken from his course that should become available next week. The many animated diagrams make it easy to understand this new React paradigm.
๐ธ Zero To Shipped - Master Fast-Paced Fullstack Development and Finally ship that product
๐ฆ Remix v2 pre-release: if you have already enabled future flags v2, you should be able to upgrade easily and remove these flags.
๐ฆ Dan Abramov joins Bluesky: Dan has left Meta and joined this Twitter competitor based on a cross-platform Expo app. I think this is great news, we may have gained a great evangelist to promote cross-platform and Expo.
๐ฆ WIP testing docs for Next.js App Router
๐งโ๐ Next.js App Router - Forms and Mutations docs: new doc page explaining the use of Server Actions and the React useFormStatus and useOptimistic hooks.
๐ฌ Next.js Tim Neutkens' Deep Dive - Caching and Revalidating
๐ Parents & Owners in React: Data Flow: original interactive and visual article, explaining the problem of props drilling and how to avoid it with slotted components. Explains the concepts of parent tree and owner tree. The props drilling problem becomes clearly visible in the diagrams.
๐ Challenging Established Norms: Making Component Fetching the Exception: an interesting thought that encourages you to run your queries at route level to avoid waterfalls, and use composition to avoid props drilling.
๐ Rust Server Components: proposes to partially reproduce RSC, MDX and Suspense using Rust, HTMX and a few other libs. "the Rust equivalent of T3 Stack". Nice to read, even though I don't do Rust. Not convinced that the end result solves all the problems RSCs do.
๐ Chakra, Panda and Ark - What's the plan?: Segun answers a number of questions about his libraries. Chakra v3 arrives in Q4, but will still use Emotion. The addition of "use client" makes it easier to use in RSCs. Adoption of the Radix asChild pattern.
๐ How to Pass a Component as a Prop in React: Matt shares some TypeScript + React typing tips. The type to implement "as" prop is quite scary ๐ฌ.
๐ Handling type-safe toast notifications with zod in Remix applications: explains how to use the Remix flash session to give feedback after an action.
๐ Optimizing Next.js cold starts for Vercel
๐ Strongly Typing React Props with TypeScript
๐ You Might Not Need A useEffectAsync Hook
๐ Web Developers, CSS-in-JS is Ruining Your Product
๐ Build your own headless UI components
๐ Building a toast component
๐ฆ next-flat-routes
๐ฆ Puck - Self-hosted drag and drop editor for React
๐ฆ react-prod-sourcemaps
๐ฆ Reshaped 2.2 - Now available on NPM
๐ฅ ReactJS Day (Verona ๐ฎ๐น, Octobre 27, 2023) is offering us -10% on conference tickets with code "media_TWIR"
A Non-Cloud Alternative to Google Forms that has it all
If you are looking to set up a robust form management system fully integrated in your IT infrastructure that allows you to retain full control over the data flow, and you donโt want to spend months and thousands of dollars to get it up and running, then SurveyJS is the way to go!
SurveyJS is a product suite of four open-source JavaScript libraries that allow you to create and edit multiple dynamic JSON-based forms in a drag-and-drop form builder, render them in your React app and store sensitive survey data within your in-house infrastructure. You can then render your custom surveys and forms as editable PDF files in a browser and visualize survey results with interactive charts and tables. Learn more now.
๐ฑ React-Native
VisionCamera 3.0
The new version of VisionCamera has just been released. Highlights:
Full Android Camera2 rewrite
Custom GPU OpenGL Video Pipeline
New Camera Features
New Frame Processor Engine (react-native-worklets-core)
New Frame Processor Plugin API
Marc took the decision to finally remove the integration with Skia to keep the code size and complexity reasonable on VisionCamera.
In Pose Detection using VisionCamera V3, TFLite and Skia, he explains what is possible with such integration. The results are very impressive.
๐ Things to look forward to in React Native: offers a good overview of what we can expect from React-Native in the years to come. Web Conformance, Static Hermes, Node-API, React Server Components...
๐ React Native Performance Measuring and Monitoring Tools
๐งต All gestures from React Native Gesture Handler explained with real-world examples
๐ Expo - Understand your users and grow your app with EAS Insights
๐ฆ expo-ahap - Apple Haptic and Audio Pattern
๐ฆ react-native-z-view
๐ฆ Universal Medusa - E-commerce starter using Expo, Solito, Next.js, Nativewind, Medusa
๐ Awesome Universal React - Universal frameworks, libraries, design systems, apps and resources
๐ฅ Experimental Blur Gradient in React Native
๐ฅ iPhone wallpapers, but in React Native Skia
๐ฅ React Native EU 2023 (Wrocลaw ๐ต๐ฑ, September 7โ8) is offering us -15% on conference tickets with code "thisweekinreact15".
๐ Other
๐คญ Fun
See ya! ๐
