🔧 This Week In React #211 : React Router, Next.js, Rslib, React-Scan, Screens, Edge-to-Edge, RN 0.77 RC, Legend List, Rapier...

🕛 Zeit seit Veröffentlichung: 49 Tage, 14 Stunden 46 Minuten
📆 Veröffentlicht am: 29.11.2024 um 12:23 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

Hi everyone!

It's another great week for React with exciting releases, notably React Router 7 and Vite 6. TanStack nearly steals the show!

The React Native ecosystem is not left behind with 0.77 in RC, Legend List, Screens... and a quite exciting Wasm-based innovation.

💡 Subscribe to the official newsletter to receive an email every week!

💸 Sponsor

AG Charts: The best React Charts in the world.

AG Charts is a canvas-based charting library from AG Grid. Initially built to power AG Grids Integrated Charts, AG Charts now has over 1 million npm downloads/month:

• 🆓 Free: Access a range of chart types, including bar, line, scatter, area, and more – completely free, forever.
• 🚀 Fast: Using batch drawing and advanced change detection alongside the offscreen canvas API, AG Charts can easily render hundreds of thousands of data points out of the box
• 📊 Financial Charts: Build interactive financial charts featuring advanced annotations with just 3 lines of code.
• 🏢 Enterprise Features: Upgrade to Enterprise to unlock advanced capabilities such as animations, context menus, crosshairs and more. Try it for free, no trial license required.

Learn More: www.ag-grid.com/charts

⚛️ React

React Router 7.0

As planned, Remix features have been brought to React Router, and the full-stack framework features are now powered by a Vite plugin. There are also new features related to routing, type safety, and route pre-rendering. Remix v2 users are invited to upgrade to React Router v7: it should be easy after turning on the future flags. Now that this great milestone has been completed and the team can fully focus on the next wave of innovation, we can't wait to hear the next Michael Jackson Remix.

• 💸 PostHog - How we built mobile replay (and why it took so long)
• 👀 React Core PR - Add moveBefore Experiment: The React team is looking to support the upcoming DOM API Node.moveBefore() in the reconciler after Chromium announced its intent to ship it. Unlike insertBefore(), this new API can preserve the state of the moved DOM elements such as iframes and video players.
• 👀 Next.js PR - CSS inlining: New experimental.inlineCss option might improve your site’s First Contentful Paint score, in particular for sites using atomic CSS like Tailwind.
• 📜 The AutoScrollList Component: This interactive article implementing a chat UI shows how useRef + useEffect can be simplified by a simple ref callback. Also shares a little-known but important lesson: “Don't use memoization for correctness, use it only for perf!”
• 📜 Why TanStack Start is Ditching Adapters: TanStack Start is coming, and Tanner can fully focus on its innovative features. Instead of creating a long list of host-specific adapters, he saved time and delegated this annoying task to Vinxi, Nitro, and H3.
• 📜 Loading Data with TanStack Router: A 2-part series using TanStack Router with/without React-Query. Both can be used together. Prefetching queries in loaders can avoid waterfalls.
• 📜 Thoughts on What RSC Means for SPAs: Daishi outlines the possible benefits of RSCs for regular SPAs. This speaks directly to my next project: integrate RSCs into Docusaurus, a React static site generator.
• 📜 Existential React questions and a perfect Modal Dialog: Great article starting from a simple dialog component, incrementally adding more requirements until reaching the perfect abstraction.
• 📜 The anatomy of a React Island: A pragmatic approach to incrementally adopt React in existing codebases.
• 📜 The use cache Directive Deep Dive in Next.js: A well-presented article about the new Next.js 15 features, including an interactive demo.
• 📜 Feature-based React Architecture: Good component composition patterns can help decouple components by feature without introducing request waterfalls.
• 📜 Astro Patterns - React Love: 2 interactive examples using React Context with Astro.
• 📜 Currency handling in React
• 📦 Vite 6.0: An important release for React framework authors looking to support multiple module graphs (client, SSR, RSC) through the new Environment API.
• 📦 Ariakit 0.4.14 - Combobox / Select performance improvements: Apparently, using too many useSyncExternalStore hooks (in list items) can cause overhead, and “merging” them into a single one improved performance.
• 📦 React Aria - November 20 releases - Disclosure, ToggleButtonGroup, Menu improvements
• 📦 Preact 10.25 - Stricter element types, improve reconciliation for unkeyed elements
• 📦 Rslib 0.1 – Intuitive library development tool, including support for React libs
• 📦 Meteor.js 3.1 - Node 22, Express 5, MongoDB driver 6, core and DX improvements
• 🎥 Alem Tuzlak - React Router v7 Is Here - Should You Upgrade Now?
• 🎥 Dev Leonardo - TanStack Start: A Full-Stack React Framework but Client-First
• 🎥 Theo - JavaScript runs on literally everything now
• 🎙️ Syntax 850 - Manage State in JavaScript Like a Pro!

💸 Sponsor

Unleash Document Superpowers in Your React Apps!

Attention React enthusiasts: PSPDFKit is now Nutrient! 👋 We may have a new name, but our Web SDK is the same best in class choice you've come to rely on for viewing, annotating, and editing PDFs and other document types.

• 🏎️ Get started quickly with a free trial and extensive documentation
• ⏱️ Save time developing by leveraging the slick built-in UI and Baseline-UI, our new design system
• 🛠️ Leverage extensive APIs for processing and customization
• 🆘 Make use of our support and solution engineering team to get help from domain experts

We've got you covered on all platforms from mobile to backend.

Want to work on challenging problems and have impact on hundreds of applications? Check out our open positions such as Senior Frontend Developer.

📱 React-Native

Introducing React Native Screens 4.0.0

The library used by React Navigation and Expo Router was released a few weeks ago, and the promised release blog post is finally online, presenting the highlights visually through various videos:

• Sheets API: Android formSheet and iOS custom detents
• Screen pre-loading for the native stack to improve perceived performance
• Improved iOS animations

• 💸 Implementing Authentication and Authorization with Clerk and Expo
• 👀 React Scan PR - React Native support: The trending tool to detect re-renders should have React Native support by tomorrow.
• 📜 Edge-to-Edge display, now streamlined for Android: This immersive mode will be enforced by default starting Android 15+ and Mathieu is on a mission to migrate our ecosystem forward, in partnership with Expo.
• 📜 I learned React Native as a web developer, and I got everything wrong: Fernando's thoughts on the growing usa of native primitives.
• 📜 Upgrading to Expo SDK 52
• 📜 Environment variables in EAS: new changes to simplify setup
• 🧑‍🎓 React Native Mastery: Vadim just launched his new project-based React Native course (paid).
• 📦 React Native 0.77.0-rc.0: The init template uses Swift instead of Objective-C. Improved CSS support (display contents, mixBlendMode). Ongoing work to clarify the native public API surface.
• 📦 Legend List - Faster drop-in replacement for FlatList: A new signal-based list library is trending with great community feedback. Apparently, it’s also faster than FlashList.
• 📦 React Native Rapier: You may not need this Rust-based physics engine, but there’s an even more important story behind all this. It’s a playground for Callstack devs to compile back WASM code to native (demo), enabling efficient cross-platform usage of native languages like Rust.
• 📦 LiveStore - SQLite-based data layer for local-first apps: Upcoming event-sourcing-based local-first lib with first-class Expo integration.
• 📦 React Native Testing Library releases: v12 adds support for RN 0.77 and Expo 52. v13 (beta) drops deprecated features, supports both React 18/19, and enables Concurrent rendering by default. v14 (alpha) replaces react-test-renderer in favor of a new universal-test-renderer dependency.
• 📦 Bottom Tabs 0.7 - React Navigation v7, useBottomTabBarHeight
• 📦 Cali - AI agent for building React Native apps
• 📦 Nitro 0.17 - All about Promises
• 📦 Solito 4.3 - Support for React Navigtion 7
• 📦 React Native Share 12.0 - Expo config plugin
• 📦 Radon IDE 0.24 beta - stability improvements, Expo 52, multi-touch gestures, screen recording
• 🎥 Jack Herrington - React-Native Server Components! Change Your Native UI From Your Server!
• 🎥 Simon Grimm - The Future of React Native? (RSC)
• 🎙️ RNR 315 - What to do without App Center

🔀 Other

• 📊 Web Almanac 2024
• 📣 Deno v. Oracle: Canceling the JavaScript Trademark
• 📜 A Framework for Evaluating Browser Support
• 📦 Tailwind CSS 4.0 Beta - Much faster, unified toolchain, CSS-first config, modern CSS
• 📦 TypeScript 5.7 - 2024 lib types, check uninitialized vars, extension rewriting, faster startup
• 📦 Mock Service Worker - WebSockets support
• 📦 Deno 2.1 - Wasm Imports and other enhancements
• 📦 Better Auth 1.0 - Comprehensive authentication framework for TypeScript

🤭 Fun

See ya! 👋

...