This Week In React #176: useActionState, React Compiler, Million Lint, TanStack, Generative UI, Vinxi, Remix i18n, Next.js security, Typesafe Router, Shopify RN perf, RCTRootViewFactory, iOS Live Activities, Uni Stack, TypeScript, Parcel…

8 min readMar 9, 2024

Hi everyone!

This week is difficult to sum up, there’s a lot of interesting news and I don’t know which to highlight.

We notably have a sneak peek of a new React core hook replacing the confusing useFormState, that even React Native devs will now be able to use now!

💡 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

💡Subscribe to This Week In React

If you are not signed-up, you are missing out

William CandillonReact-Native animations expert — Youtuber

⚛️ React

React Core PR — New useActionState hook

It turns out the useFormState hook was confusing, and not even meant to be solely used in forms. The React team is addressing this by introducing a new React core hook to replace it:

Renames useFormState to useActionState
Adds a pending state to the returned tuple
Moves the hook to the react package

Moving it from react-dom to react also means that now, other renderers such as React Native can use it too. There are other benefits to look at, such as a “partial progressive enhancement” feature, but also new caveats documented in the PR.

💸 Secure your documents with PDF Redaction. Discover how to protect sensitive information in PDFs using React. Visit our blog to learn more.
🐦 React 19 != React Compiler: The React Labs post is a bit ambiguous and misled many of us, so let’s clarify. The compiler will likely come after the React 19.0 release as a separate project, and there’s a good chance it will initially be released as a Babel/TypeScript plugin. The internals are decoupled through, so it shouldn’t take long to adapt it it to Rust.
🐦 TanStack Start preview: Tanner works on a TanStack Start full-stack framework based on Vinxi and TanStack Router. This preview shows he’s migrating his own TanStack site to it.
📜 Vercel — Introducing AI SDK 3.0 with Generative UI support: With the AI SDK 3.0 and thanks to React Server Components, you can now stream UI components directly from LLMs. Super impressive demos!
📜 Secure statically rendered paid content in Next.js (with the App Router): Shows that using Next.js layouts for authentication is not super secure, and the protected content can still leak through the RSC endpoint. Suggests using a middleware instead.
📜 Internationalization with Remix: Goes back to i18n fundamentals, and then detail various i18n solutions you can set up within Remix. Optional route segments can help you use localized sub-directories.
📜 Did you know you can write your own typesafe React router in 500 lines?: A great comprehensive article that might give you a better understanding of how existing routers work. Also great to learn about advanced TypeScript type-level programming techniques.
📜 Streaming HTML out of order without JavaScript: This super interesting demo shows we don’t need JavaScript to stream out-of-order HTML chunks, and yet render them in the correct order. All you need is Declarative Shadow DOM and slots. It will be interesting to see if RSC streaming + Suspense could leverage that technique in the future instead of inlining JavaScript.
📜 Simple RSC With Vinxi: The Vinxi SDK helps you create your own full-stack framework, and it even has a plugin for React Server Components support!
📜 Million.js — Blocks with noSlot Mode: the Million compiler might wrap your components with <slot> elements, which might cause issues (styling). This introduces a new experimental noSlot mode..
📜 How to add Monaco to a Next.js app to enable custom user workflows: Interesting tutorial that also shows how to deploy untrusted user code to Deno.
📜 Conceptual Model of React and RSC: Reflects around the UI=f(state) formula in interesting ways, and concludes RSC kind of breaks the original model.
📜 Why React Server Components Are Breaking Builds to Win Tomorrow
📜 The End Of My Gatsby Journey
📜 React Admin March 2024 Update
📦 Million Lint — public beta: A VSCode extension that helps you keep your React code fast thanks to dynamic analysis. Much simpler to use than React Devtools flame graphs. There will be an additional AI-based Lint++ paid service built on top to suggest you possible performance improvements.
📦 react-unforget — A compiler for automatic optimization of React apps: After Forgetti, this is another new alternative React compiler coming from the community. See also 🐦 Joe Savona’s feedback.
📦 Remix 2.8 — Pass resolved viteConfig to buildEnd hook
📦 React Query 5.25 — skipToken, typesafe query disabling
📦 TanStack Router 1.18 — route groups
📦 Starlight 0.21 — New UI components: Steps, FileTree
📦 Storybook 8.0 RC — v8 is officially stable enough to be used in production
📦 Onborda — Onboarding wizard flow for Next.js powered by Framer Motion
📦 Input-OTP — One-time password input component for React
📦 Panda 0.33
📦 UVCanvas — React component library for beautifully shaded canvas
🎥 Jack Herrington — Is Tanstack Router Better Than React-Router?
🎥 Theo — How Shadcn/ui Actually Works

💡Subscribe to This Week In React

I’m constantly finding interesting things to learn in there.

Dominik DorfmeisterWeb Developer — React-Query maintainer

📱 React-Native

This section is now co-authored with Benedikt. Feel free to send us your comments by email or on Twitter!

Improving Shopify App’s Performance

Shopify has been a proponent of React Native for a long time. But they did notice their app performance go down since they migrated to React Native. Instead of blaming the tech stack, they got to work and started optimizing for performance. The results speak for themselves: App launch is 44 % faster and screen load times were reduced by 59 %. Here’s a quick summary of some of the measures they took (hint: FlashList plays a big role in some of these). For details, read their great summary post:

Initially, only render what’s visible on the screen (especially true for the home screen)
Build all screens as lists (based on FlashList)
Use inlineRequires
Batch state changes
Optimize caching

Very interesting insights and impressive results. I hope the Shopify team keeps sharing these details and maybe we’ll even see some of the things they mentioned they built during this process ending up as Open Source?