This Week in React #258: TanStack DB, Valdi UI, and Ecosystem Updates

Web Development

Explore This Week in React #258: TanStack DB 0.5, Next.js experimental features, Snapchat's Valdi UI framework beta, and key updates across the React, React Native, and JavaScript ecosystems.

Welcome to This Week in React #258, your comprehensive digest of the latest developments in the React ecosystem. This edition covers exciting updates including TanStack, Next.js, ImGui, next-intl, React-Email, React Router, and a deep dive into Valdi, IntersectionObserver, Nitro, Radon, Lynx, WebGPU, and Audio APIs. We also touch upon TC39, Node, Web Animations, TypeScript, and pnpm.

This week brought a steady stream of community blog posts, new releases, and intriguing signals. While there's a lot to explore, we're sure you'll find something valuable to read.

As always, thanks for your continued support on your favorite platforms:

  • πŸ¦‹ Bluesky
  • βœ–οΈ X / Twitter
  • πŸ‘” LinkedIn
  • πŸ‘½ Reddit

Don't miss out on future updates! Subscribe now!

"If every newsletter was as informative, the world would be a better place!" Mike Grabowski CTO and Founder - Callstack

AG Charts: The Premier React Charting Library.

AG Charts is a high-performance, canvas-based charting library developed by AG Grid. Initially designed to power AG Grid’s Integrated Charts, it now boasts over 1 million npm downloads monthly.

Key Features:

  • πŸ†“ Free & Comprehensive: Access a wide array of chart types (bar, line, scatter, area, and more) β€” completely free, forever.
  • πŸš€ Lightning Fast: Optimized canvas rendering ensures smooth performance with large datasets, handling over 1 million data points.
  • 🦾 Highly Accessible: Built-in support for screen readers and keyboard navigation ensures inclusivity.
  • πŸ”„ Seamless AG Grid Integration: Enjoy a shared API with AG Grid for effortless integration.

πŸ‘‰ Get Started for Free

βš›οΈ React Highlights

TanStack DB 0.5: Introducing Query-Driven Sync

TanStack DB has released version 0.5, implementing a new query-driven sync concept with a syncMode: β€˜eager’ | β€˜on-demand’ | β€˜progressive’ option. This aligns the library more closely with GraphQL clients like Apollo/Relay, where components declare data dependencies, and the client manages data loading and maintenance. It can be integrated with existing backend APIs by mapping query predicates to API calls.

  • πŸ’Έ Sponsored Tutorial: Build a React frontend for your backend with Lovable and Strapi in this step-by-step guide.
  • πŸ“£ Ecosystem Adoption: Both Bun and Vercel have announced support for TanStack Start, leveraging the Nitro Vite plugin.
  • πŸ‘€ Next.js Experimental Feature: A new config.experimental.transitionIndicator option in a Next.js PR aims to trigger the browser's native spinner during pending React transitions. Currently an early-stage feature, primarily for Chromium, but very promising.
  • πŸ—“ React Advanced Conference: Mark your calendars for React Advanced in Toronto, Canada on March 24 & 26. Don't miss the stellar lineup including Wes Bos, Hosh Cameau, Henri Helvetica, and other top React experts. Get a 10% discount using code "TWIR".

Insightful Articles & Blog Posts:

  • React 19 Error Boundary Behaves Differently: An explanation of a subtle but significant change in React 19's Error Boundary behavior, now adopting a fail-fast approach instead of aggregating errors.
  • Dead Framework Theory: A thought-provoking piece arguing that new frameworks face an uphill battle in a React-dominated landscape, further reinforced by LLMs defaulting to React code.
  • StyleX: A Styling Library for CSS at Scale: An overview of Meta’s CSS-in-JS library by a StyleX maintainer, highlighting its capabilities for large-scale applications.
  • The Illusion of Language: What Directives Really Are: This article draws parallels between directives and C++ pragmas/macros, offering historical insights into their nature.
  • Vercel: The Anti-Vendor-Lock-In Cloud: Vercel's argument for framework-defined infrastructure promoting more portable code and reducing vendor lock-in, with Next.js adapters formalizing the framework-platform contract.
  • Everything you need to know about act() in React tests: A comprehensive guide to the act() test helper, crucial for ensuring React's pending updates are applied before assertions.
  • Don't Blindly Use useTransition Everywhere: An interactive post dissecting a common useTransition example from React docs, suggesting improvements for better UX.
  • Error Handling in React with react-error-boundary: Explore a declarative error boundary component and the useErrorBoundary() hook for imperative error triggering.

New Libraries & Releases:

  • πŸ’Έ Sponsored Tool: CodeRabbit promises to cut code review time and bugs in half.
  • πŸ“¦ ImGui React Runtime: An experimental custom runtime and React renderer for Dear ImGui (C++ GUI library) from a Hermes maintainer, showcasing Static Hermes' potential for mixed-type JS and zero-cost FFI bindings.
  • πŸ“¦ Next-Intl 4.5: Introduces useExtracted(), aiming to bring "Tailwind-like" properties (colocation, local reasoning) to i18n and enhance AI support.
  • πŸ“¦ React Email 5.0: Features support for dark mode, Tailwind 4, new components, and compatibility with React 19.2 and Next.js 16.
  • πŸ“¦ React Router 7.9.5: Update includes an unstable instrumentation API and experimental concurrent prerendering capabilities.
  • πŸ“¦ Ink 6.5: This CLI renderer now supports a new incremental rendering mode to update only changed lines.

Videos & Podcasts:

Don't miss out on future updates! Subscribe now!

"If you are not signed-up, you are missing out." William Candillon React Native Animations Expert - YouTuber

Debug Smarter with Real-Time Logs in VS Code

Eliminate the need to switch between your terminal and browser dev tools. Console Ninja integrates your runtime logs, errors, and variable values directly into your VS Code, Cursor, Windsurf (and other VS Code-compatible editors), precisely where they occur in your code.

Experience live console.log output alongside your source code, filter messages, and immediately identify issues without interrupting your workflow. It works flawlessly with Vite, Next.js 16, React Native (iOS and Android), Astro, and many other environments. Enhance your AI agent πŸ€– with real-time runtime insights for more intelligent debugging.

Debug faster. Stay focused. Code confidently.

πŸ‘‰ Check it now!

πŸ“± React Native News

Valdi: Snapchat's Cross-Platform UI Framework Enters Beta

Snapchat has open-sourced a beta version of Valdi, a cross-platform UI framework they've utilized in production applications for eight years. While not React-based, Valdi employs a similar declarative model and leverages the Yoga layout engine. TypeScript components are directly compiled into native iOS, Android, and macOS views.

Further Reading:

  • FAQ: Why use Valdi instead of React Native?
  • Valdi for React Developers
  • πŸ’Έ Sponsored Job Search: Product for Engineers - Finding a job as a product engineer.
  • 🐦 Konrad Reczko - React Native Jelly Slider demo: This demonstration effectively illustrates how advanced WebGPU / TypeGPU code can be shared across platforms with minimal integration adjustments.
  • 🐦 Szymon Rybczak on the recent React Native CLI DevServer vulnerability: A critical remote code execution vulnerability was identified in React Native CLI DevServer (versions 0.80/81). A security fix has been swiftly backported, urging users to upgrade immediately.
  • πŸ‘€ React Native Website PR - Docs for IntersectionObserver: The exciting DOM API, IntersectionObserver, is making its way to React Native, with indications it will support <Fragment ref>.
  • πŸ‘€ React Native Website PR - Web Performance APIs as stable: The global.performance Web API is set to receive official stable support in React Native.

Key Articles & Insights:

  • React Native's New Architecture: The Tricky Parts (3/4): This installment covers the implementation of native component measurements on Android, crucial for Yoga's layout calculations.
  • Exploring Lynx JS: From Quick Start to CLI Workflows: Callstack developers reintroduce Lynx JS, ByteDance's intriguing React Native competitor. They’ve also developed a CLI to simplify new Lynx app creation, and Lynx now features experimental support for the React Compiler.
  • How to Add Vega Support to Your React Native App?
  • Create a Chart with a Secondary Y Axis with Victory Native XL
  • Building an AI-Powered Note-Taking App - Part 1: Text Semantic Search

Tooling & Library Updates:

  • πŸ“¦ Audio API 0.10: Updates include decoding/stretcher modules, linear convolution effects (echo/reverb), worklet performance enhancements, and compatibility with React Native 0.82.
  • πŸ“¦ Radon IDE 1.13: Adds support for physical Android devices, Apollo DevTools, Network Inspector, and AI-driven improvements.
  • πŸ“¦ Nitro BLE: A new high-performance Bluetooth Low Energy library.
  • πŸ“¦ Nitro Event Kit: Provides access to and management of local iOS calendar events.
  • πŸ“¦ Nitro Device Info: A high-performance library with mostly synchronous methods for device information.

Videos:

  • πŸŽ₯ Beto - Getting started with Meta Horizon Development using Expo

πŸ”€ Other Ecosystem News

  • πŸ‘€ TC39 Meeting Agenda: A comprehensive agenda has been released for the 111th meeting of Ecma TC39, promising significant discussions.

General Web Development Articles:

  • The Inner Workings of JavaScript Source Maps
  • Error chaining in JavaScript: cleaner debugging with Error.cause
  • The Web Animation Performance Tier List
  • Why TypeScript Won't Save You
  • The Weird Parts of position: sticky;

Tooling & Platform Updates:

  • πŸ“¦ Node.js 25.2: Features stable type stripping.
  • πŸ“¦ pnpm 10.21: Introduces Node runtime installation for dependencies and a new trustPolicy option to bolster against supply chain attacks.

🀭 Fun Corner

See you next time! πŸ‘‹

Don't miss the next email! Subscribe now!

"I'm constantly finding interesting things to learn in there." Dominik Dorfmeister Web Developer - React Query Maintainer