This Week In React #211: React Router, TanStack, Next.js, Vite, RSCs, Aria, Rslib, React-Scan, Screens, Edge-to-Edge, RN 0.77 RC, Legend List...

Search for a command to run...

No comments yet. Be the first to comment.
Hi everyone! Krzysztof and Tomasz from Software Mansion here π It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week π. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here π. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

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!
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
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.
π¦ 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
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.
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.
π 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
π¦ 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!
π Web Almanac 2024
π¦ 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
π¦ Better Auth 1.0 - Comprehensive authentication framework for TypeScript
See ya! π