📨 #185: React Conf, useDeferredValue, React Query, refs, Next.js after, mini-react, Astro, MDXTS, Radix, Solid, Redwood, Pigment, Apollo, Playwright, Re.Pack, RN-Model3D, RN perf, RN Video, VisionOS, LiveView, Anchor Positioning ...

May 15, 2024 · 9 min read

Newsletter Editor - Docusaurus maintainer

Indie Hacker

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”.

💡 Check this newsletter on Twitter - visual format 🎨

To support me:

😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor the newsletter
🧵 Retweet the latest Twitter thread

Don't miss the next email!

My favorite resource for keeping up with the React community!

Evan BaconEngineering Manager - Expo

💸 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.

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

Don't miss the next email!

If every newsletter was as informative, the world would be a better place!

Mike GrabowskiCTO and founder - Callstack

💸 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.