This Week In React #176: useActionState, React Compiler, Million Lint, TanStack, Generative UI, Vinxi, Remix i18n, Next.js security...

This Week In React #176: useActionState, React Compiler, Million Lint, TanStack, Generative UI, Vinxi, Remix i18n, Next.js security...

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!

💡 Subscribe to the official newsletter to receive an email every week!


💸 Sponsor

Axiom - the best logging platform for Vercel apps

Axiom - the best logging platform for Vercel apps

😴 Sleep peacefully knowing that Axiom’s zero-config observability for Vercel projects has you covered.

  • Use Axiom's pre-built dashboard for an overview across all your Vercel logs and vitals, drill down to specific projects and deployments, and get insight on how functions are performing with a single click.

  • next-axiom allows you to send logs and events from any part of your Next.js projects - client, edge, or server-side - without any special configuration.

  • Easily send structured logs directly from your code and analyze them together with Vercel logs.

Axiom efficiently captures 100% of your event data so you’ll never have to worry about sampling or retention, and you’ll never have to guess what your users are experiencing.

PS: I use it myself to monitor the newsletter signups 😉

⚛️ React

React Core PR - New useActionState hook

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.

💸 Sponsor

Need more than just a sign-in box?

Need more than just a sign-in box?

Clerk streamlines React app authentication and user management, ensuring a quick setup for the modern web.

Experience the benefits of Clerk:

  • 💅 Pre-built UI components for sign-in, sign-up, user profiles, and organizations. Customize with any CSS library and deploy on your domain

  • 📦 SDKs for React, React Native, Next.js, Redwood, Remix, and other frameworks

  • ⚡ Integrations with Firebase, Supabase, Convex, and other BaaS providers

  • 🎁 User management, social login, magic links, MFA, and more out of the box

Dive into Clerk's quickstarts and tutorials to kickstart your project🚀

📱 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

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?

🔀 Other

🤭 Fun


See ya! 👋

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!