Hi everyone!
This week is calm in terms of releases, so far at least!. We have great React articles, but also some criticisms, or content that suggests we use alternative solutions (Solid, Phoenix LiveView) ๐
.
React Conf starts later today! We can expect great things to be presented there, that we'll cover next week. I sent the newsletter a bit earlier today to make sure I can watch it live without any pressure ๐.
The React Conf YouTube live stream link is already available. Looking at the conf agenda, we are particularly excited about the following talks:
React and React Native keynotes and Q&A
Universal React Server Components in Expo Router - Evan Bacon - Expo
Real-time server components - Sunil Pai - PartyKit
Spatial computing with React - Michaล Pierzchaลa - Callstack
Cross Platform React - Olga Zinoveva and Naman Goel - Meta
Speaking of conferences, the U.S. React Native Conference Chain React is back on July 17-19 (Portland/OR). We partnered to offer you 15% off your ticket with code โTWIRโ.
๐ก Subscribe to the official newsletter to receive an email every week!
In-App Subscriptions Made Easy
RevenueCat gives you everything you need to monetize, analyze, and grow your app business. Effortlessly control customer access and entitlements, manage data, and experiment with pricing. See why over 30,000 apps trust RevenueCat to power their in-app purchase infrastructure.
โ๏ธ React
Snappy UI Optimization with useDeferredValue
Josh Comeau comes back with a great blog post showing the usefulness of the useDeferredValue() hook, that allows you to opt-in for Concurrent React by deferring the rendering of expensive components to a lower priority task. He presents a very concrete performance problem he was facing and how the hook helped solve it in practice. For this to work efficiently, it is important that you wrap your expensive components with memo(). The interactive timelines can help you understand how this is different from throttling.
Why React Query?
Dominik Dorfmeister is launching his official React Query course, and for the occasion published the first lesson for free. It's a great interactive article that slowly builds up on everything React Query does for you, including handling race conditions, deduping requests, and caching. It's really full-featured and more like an "async state manager" rather than just a library to fetch data. An interesting read for all React devs, even if you don't use React Query.
๐ธ NLUX โ New React library to add AI features
๐ React Docs - StrictMode - Fixing bugs by re-running ref callbacks in development: I shared last week that refs are firing twice in React 19 StrictMode. This is for good reasons, and this new doc section explains how it can prevent bugs, notably when dealing with lists of refs.
๐ React Docs - Donโt use refs to prevent Effects from firing
๐ Next.js PR - unstable_after: This upcoming feature lets the user schedule a callback to be executed after the current request finishes. This requires the runtime to support a waitUntil function, a feature that Vercel just shipped (that Cloudflare already had). Particularly useful for logging/analytics without delaying the response.
๐ฆ Experimental Node.moveBefore() API - preserve DOM state across element moves & reparenting: An awesome new API could land on the web platform allowing React to reparent JSX nodes to different places without resetting the DOM state (see also Sebastian Markbรฅge comment).
๐ React Summit - ๐ณ๐ฑ Amsterdam - 14-18 June - Grab the tickets before they're sold out. Get a 10% discount with code "TWIR".
๐ dotJS - ๐ซ๐ท Paris - June 27 - Malte Ubl, Jessica Sachs, James Q Quick, and many other international speakers will be there! 10% discount with code "TWIR"
๐ Build Your Own React.js in 400 Lines of Code: The author built a โmini-reactโ able to run the official React tic-tac-toe tutorial, in 400 lines, with Fiber/interruption support. He explains some of the main algorithms
๐ The Forensics Of React Server Components (RSCs): A deep dive into RSCs, Suspense, streaming, lazy loading including many helpful schemas, annotated screenshots, and payload examples. Interesting focus on the performance and UX impact.
๐ Itโs not just you, Next.js is getting harder to use: Argues that with App Router, Next.js is becoming more subtle and difficult to use. Illustrated with aggressive caching and inability to get the current pathname in RSCs.
๐ Animating Radix Primitives with Framer Motion: Exit animations are more tricky to handle correctly and require using Radix in a controlled way in combination with the โforceMountโ prop.
๐ A React Developer's Guide to Learning SolidJS: Greatly explains that the code of both libraries looks similar, but fundamentally works differently, and that can trick you.
๐ Prefetching data with TanStack Query: On a blog with a โNext Postโ navigation link, you can prefetch the React Query data of the next post so that navigation is faster.
๐ React, Electron, and LLMs have a common purpose: the labour arbitrage theory of dev tool popularity: Curious read arguing devs using popular technologies like React are commodities and management favors that over technological progress ๐คทโโ๏ธ.
๐ Moving from RSC to SolidStart
๐ Middleware in RedwoodJS + New Feature: og:image Middleware
๐ Apollo Client - Optimizing Data Fetching, leveraging useFragment and Colocated Fragments
๐ How To Integrate Stripe With React?
๐ Drag and Drop with React. Writing E2E tests using Playwright
๐ Implementing infinite scrolling with React. Writing E2E tests with Playwright
๐ฆ Astro 4.8 - Astro Actions, Request Rewriting: Astro added new experimental features, including the ability to call typesafe server functions, validated with Zod using JSON or FormData, and supporting progressive enhancement.
๐ฆ Pigment CSS 0.0.10: New zero-runtime CSS-in-JS lib keeps progressing (๐ฆ 93% of MUI components now support CSS extractions)
๐ฆ MDXTS 1.0 - New tool for building content and documenting libraries with MDX, TypeScript, and React
๐น Athena Crisis is now Open Source: Christoph Nakazawa (Jest, Metroโฆ) created a full retro indie game available on Steam. The React-DOM codebase is now open source with bounties available for contributors.
๐ฅ Theo - This Release Makes Me Want To Leave React: Phoenix LiveView 1.0 RC is out and solves problems similar to React Server Components in interesting ways. Updates can be sent to the client in real time by maintaining a WebSocket connection to the server. Note thereโs an exciting React Conf talk later today on this topic: Real-time server components.
๐ฅ React Conf - YouTube live stream
Refine - Open source Retool Alternative
The sweet spot between the low code and traditional development for CRUD-heavy applications.
As an open-source React meta-framework designed for Enterprise applications, Refine offers a headless solution ideal for tasks like admin panels, dashboards, and internal tools.
While low-code tools may offer initial promise, they often fall short in handling complex scenarios due to scalability issues, limited customization options, and the risk of vendor lock-in.
Refine enables teams to rapidly develop production-ready apps while maintaining flexibility.
๐ฑ React-Native
This section is authored by Benedikt.
๐ธ React Native Analytics โ Instantly measure component usage with Omlet. Use data from pre-built and custom charts to improve your codebase
๐ฆ Autolinking dependencies in React Native Community CLI just got much faster
๐ฆ Out of the top 100 Business apps in the App Store, 26 are built with React Native, 3 with Flutter, and 8 with Cordova
๐ฆ "Not a HotDog" detector app in React Native: Neat demo of frame processors in Vision Camera.
๐ Hermes now supports visionOS
๐ App.js Conf - ๐ต๐ฑ Krakรณw - 22-24 May. Get a 10% discount with code "TWIR".
๐ Scratch Card in React Native using RN Skia: Tutorial that includes Skia, Reanimated and Gesture Handler.
๐ Set up a React Native Web Project in a Monorepo: This tutorial is more interesting than its title leads on to, as the setup also includes Vite and Styled Components.
๐ Handle slow re-renders : a not so obvious solution using React DevTools and JavaScript Profiler: Performance optimization is a really valuable skill but not straightforward to learn. This is a super detailed intro on using Dev Tools and JS Profiler.
๐ Debunk ideas on hybrid framework: As a RN dev, you hopefully know all this. In my opinion, this is a very good bookmark to have at hand when you encounter people that still have the common misconceptions about RN.
๐ React Native's New Architecture - An Overview of Performance Benchmarks: An overview of New Arch and Bridgeless, followed by some interesting performance benchmarks for both native modules and view modules (rendered through Fabric). Good to see some benchmarks and the code is also available on GitHub.
๐ Dismissing keyboard in React-Native - Stop the struggle
๐ฆ React-Native-Model3d - Render 3D models in visionOS apps
๐ฆ Re.Pack 4.0 - Webpack for React Native - New Architecture, Metro-compatible module resolution
๐ฆ React Native Video 6.0 - TypeScript, RN 0.73, notification controls, subtitles style, full-screen
๐๏ธ Rocket Ship 40 - From Next.js to React Native with Kitze
๐๏ธ The React Native Show Podcast #37 - Creating Performant React Native Animations with Catalin Miron
๐ฅ React Native Optimization Shorts - Is Flashlist Actually Better Than The Default Solution?
๐ฅ Simon Grimm - Expo SDK 51: New Packages, Router, Architecture & Template
๐ Other
๐คญ Fun
See ya! ๐
