#​379 — March 27, 2024

Read on the Web

🐣 A quick note to say React Status is taking next Tuesday off, in celebration of Easter. We'll be back on Wednesday, April 10 :-)
__
Your editor, Peter Cooper

Together with  Fusion Auth
React Status

React Server Components Now in RedwoodJS — If you thought RSCs were a Next.js phenomenon, think again. Implementations are popping up all over, such as in Waku and now RedwoodJS, a full-stack framework founded by GitHub co-founder Tom Preston-Werner that leans on React, Prisma and other technologies to provide a great DX ‘out of the box.’ This post digs deep into how RSCs are used and how they can supplant Redwood’s use of GraphQL.

Rob Cameron

💡 RedwoodJS's Amy Dutton has also put together a comparison of different routers including Next.js's app and pages approaches and what Remix and RedwoodJS offer.

Auth, Built for Devs by Devs — The best frontend language deserves the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guide.

FusionAuth sponsor

Deploying a React SPA and Python Backend Together on Azure — Last week, we saw how to roll out a full stack React app on Azure using Azure Functions, but what if you want something more traditional/monolithic like a Python-powered backend? Azure App Service can help with that.

Tanuja Palakurthy (Microsoft)

IN BRIEF:

How to Build a ChatGPT-a-Like with Clerk and AWS Bedrock — A thorough walkthrough whose focus is on the UI rather than the LLM/AI stuff behind the scenes which is taken care of by Amazon’s Bedrock service. Clerk handles the auth, while Next.js forms the base of the app.

Coner Murphy

Using ReactToPrint to Generate a Printable Document — Use ReactToPrint to add a print feature to your React app while preserving your document’s neat, consistent appearance.

Elijah Agbonze (LogRocket)

Migrating a Next.js App from Vercel + PlanetScale to Fly.io
Pob Ch

Flaky Tests in React: Detection, Prevention and Tools
Ayomipo and Fernandez (Semaphore)

How Next.js Breaks React Fundamentals
Ondrej Velisek opinion

🛠  Code, Tools & Libraries

React Horizontal Scrolling Menu 7.0 — A customizable horizontal scrolling menu component that’s responsive and can support numerous control approaches via scrollbars, touch, mouse wheel, etc. There are plenty of Storybook examples.

Aleksandr Smyshliaev et al.

next-intl 3.10: Internationalization (i18n) for Next.js — If you want to internationalize your Next.js app, this is for you — you get a hooks-based, type-safe API with i18n and l10n features, internationalized routing, and React Server Components support. Apparently the main Node.js site uses it, too.

Jan Amann

react-resize-aware: A Hook That Listens to Resize Events — Detect resize events on elements without relying on intervals, loops, DOM manipulation detection or CSS redraws. v4.0 now supports Vite.

Federico Zivolo

📰 Classifieds

Building apps on Vercel backed by a DB? Here’s a video: how to use Neon branching to get a database for every Vercel Preview Deployment.


📧 If your work extends beyond React, check out Frontend Focus, our weekly newsletter targeting frontend developers more generally, including the latest in CSS, web performance, and Web APIs.

use-hot-module-reload: Trigger a Callback After Hot Module Reloading — A hook that triggers a callback after hot-module reloading has been performed (for any module, not just the one it was used in) – works with Webpack and Vite.

Espen Hovlandsdal

📺 react-tv-space-navigation: Spatial Navigation for TV Apps“If you want to develop a TV app for AndroidTV + tvOS + web TV devices, then this package will be helpful. The library is based on LRUD, which is a UI-agnostic lib that represents spatial navigation.”

BAM

use-local-storage-state: Like useState() But for Local Storage — A hook that persists data in localStorage while having an API similar to useState().

Antonio Stoilkov