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!
πΈ Sponsor
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.
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
πΈ Sponsor
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
- π CSS RFC - CSS Level Categorization - CSS4 & CSS5
- π State of HTML 2023 - Survey results available
- π Introducing the CSS anchor positioning API
- π¦ Chrome 125 - CSS Anchor Positioning, Compute Pressure API
- π¦ WebKit Features in Safari 17.5 - text-wrap: balance, light-dark(), @starting-style
- π¦ esbuild 0.21 - decorators
- π¦ Type Complexity Tracer - A VSCode extension to measure type complexity within a project
- π¦ Oslo - Simple auth packages for the entire JS ecosystem
- π GraphQLConf - San Francisco, 10-12 Sept - CFP is open until May 22
π€ Fun
See ya! π
Top comments (0)