This Week In React #145: Next.js, useFormStatus, useOptimistic, App Router, Canaries, ReasonML, Reanimated, VisionCamera...

#react #reactnative

Hi everyone!

As expected a new version of Next.js is out. Some React innovations that are better documented in the Next.js doc than in the React one, like form action, or the 2 new hooks useFormStatus and useOptimistic.

There are a lot of conferences at the moment. Remix Conf and App.js starting today: there will surely be some nice announcements.

The React-Native-Connection (Paris, June 1st) is also a few weeks away, and you can have -20% discount with the code "REACTHEBDO"!

I plan to skip next week's edition. Next issue on May 24th 👋

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

💸 Sponsor

Start UI [web] - Opinionated web app UI starter

Our free and open source UI web app starter offers a quick and easy way to bootstrap your next project. It includes best practices & production ready tools to help you get started right away, saving you time and effort in the initial setup phase.

Comes with built-in features like 🔐 Authentication, 📱Responsive Layout, 🧑‍💻 User Management, 🇫🇷 Internationalization & Right-to-Left support, 🌚 Dark Mode, 🎛 Advanced components for easy development. You can try out the example app.

Ready to use with TypeScript, NextJS, Chakra UI, TanStack Query, Storybook and more.

🚀 Start UI [web] on GitHub

⚛️ React

Next.js 13.4

A major release for Next.js, with:

App Router (stable): the new router based on Suspense and Server Components is ready for production
Turbopack (beta): the new bundler is stabilizing in dev, and prod build is coming soon
Server Actions (alpha): Next.js integration of the latest React innovations

The blog post shows many notable differences with the old router: conventions, nested layouts, selective hydration, server components, code splitting...

It also unveils the new React innovations to manage mutations and form submissions, whose integration in Next.js gives birth to Server Actions. This greatly simplifies interactions with the server without the need to create an API route and the use of forms supporting progressive enhancement. It is now possible to create and distribute full-stack React components.

Note that it is a bit early to adopt Server Actions in production. They are in alpha, and you could unexpectedly expose a secret captured in a Server Action closure to the client. Details here:

🧵 Thread: warns of this issue
🐦 Problem recognized by Sebastian Markbåge and Andrew Clark who propose to encrypt variables.
🎥 Next's Server Actions Might Not Be That Safe...

Other useful links:

📖 New Next.js documentation: the new beta doc is deployed in production. I advise in particular to read React Essentials.
👀 useOptimistic and useFormStatus: new React experimental hooks.
📜 Next.js 13.4 on Vercel
📜 Introducing the Vercel Data Cache: Optimized caching for React Server Components
🧵 Guillermo Rauch - "I re-designed rauchg.com with App Router": interesting feedback.
🎥 Introducing Next.js App Router

🧑‍🎓 TotalTypeScript - React with TypeScript tutorial: free tutorial by Matt Pocock, the TypeScript wizard.
🎨 The Rendering Journey of a React component: step-by-step visualization of re-rendering.
📜 React Canaries: Enabling Incremental Feature Rollout Outside Meta: the React team presenting a new canary release channel which allows frameworks to adopt new React features before their official stable release. The canary releases are stable enough to be adopted in production. This is what Next.js App Router uses now, but also what Meta and React-Native always relied on.
📜 React Server Components, Next.js App Router and examples: Addy Osmani shares his notes and reflections on Server Components. A good overview, as well as many examples of open-source apps. Also lists reasons to stop using Create-React-App.
📜 5 Lessons Learned From Taking Next.js App Router to Production: feedback from Inngest who successfully migrated a CRA app to Next.js and App Router. There are some interesting details about caching or search parameters.
📜 Server-side rendering React in OCaml: Ahrefs devs use Reason-React. They reimplemented ReactDOMServer.renderToString in OCaml to be able to run the SSR natively and solve some of their issues. Their SSR is now 10x faster than Node.js and 6x faster than Bun. The idea of running SSR natively is very interesting, but it will take a lot of work to support the latest innovations like streaming and Server Components.
📜 HTMX is the Future: a critique of SPA frameworks, in particular React. Proposes to use an alternative: HTMX and hypermedia responses. I find it interesting for backend devs who want to add interactivity without doing JavaScript, but not sure that it scales that well.
📜 Context, Composition, and Flexibility: proposes to use the React context to activate an alternative rendering of a component on a whole subtree.
📜 My Struggle With Remix: interesting feedback. The author still loves Remix, but presents some challenges encountered while using it.
📜 Pull to refresh from scratch as a React hook
📜 Creating an interactive spotlight border with CSS and React
📦 Redwood 5.0: React 18, TypeScript v5 and observability.
📦 Ink UI - Themable UI components for your next CLI: great example of the React cross-platform abilities. It's possible to render to the terminal, and even create UI libs for that particular ecosystem.
📦 OpenNext 1.2.0 - geolocation in middleware
📦 Zact - Zod Server ACTions
📦 Astro 2.4
📦 server-only: official React package to prevent the import of server code into Client Components (see Next.js docs).
📦 shadcn UI - Table and Data Table components
📦 Million.js 2.3.1 - Astro support (beta)
📊 State of React 2023 - Preliminary Discussions: there might be a survey dedicated to React this year.
👀 RSCs on Rspack
👀 Edit audio with Remotion
🎥 Always Bet On React
🎥 I'm Done With React
🎥 Should You Learn React in 2023? - Interview with React Summit Speakers Tru Narla and Jordan Gensler
👥 React Summit (Amsterdam, June 2-6) is offering us -5% on tickets (code "ThisWeekInReact5") and -10% on workshops (code "THISWEEKINREACT")

💸 Sponsor

OpenAI + Nylas Fireside Chat : IA générative

Want to get an inside look at the future of generative AI? On May 17th, OpenAI and Nylas will be hosting an open-to-all fireside chat with Evan Morikawa, Applied Engineering Manager at OpenAI, and Christine Spang, CTO and Co-Founder at Nylas. They’ll discuss what it takes to deliver and maintain AI solutions at scale, what AI's next stage of maturity looks like, and much more. Don’t miss it.

📱 React-Native

📖 New Reanimated Beta docs: new interactive Docusaurus doc with many examples implemented in React-Native-Web.
🎨 VisionCamera + Skia + TensorFlow demo: it's impressive what can be done in React-Native today. Skia rendering and TensorFlow models can be updated with an Over-The-Air update.
🎨 Reanimated 3 + Expo Router + Shared Element Transitions demo
📜 Best tips & tricks for E2E Maestro with React Native
📜 React Native run-android: How to Test Various Device Types
👥 App.js (Krakow, May 10-12) is offering us -20% on workshops (code "ThisWeekinReact20").
👥 Chain React (Portland, May 18-19) is offering us -10% on entries (code "thisweekinreact").
👥 React-Native-Connection (Paris, 1er June) is offering us -10% on entries (code "REACTHEBDO").

🧑‍💻 Jobs

🧑‍💼 Passionfroot - Senior Full-stack Engineer (Remix) - €160k+, Berlin/remote

Passionfroot's mission is to empower the independent businesses of tomorrow via YouTube, Podcasts, Social Media, and Newsletters. Join us in building a tool that will empower creators globally to build scalable, sustainable businesses.

🧑‍💼 Callstack - Senior React Native Developer - Fully Remote, PLN 21-32k net on B2B, monthly

Do you want to work on the world's most used apps? Would you like to co-create the React Native technology? Join the Callstack team of React & React Native leaders. Check our website for more details. We are looking forward to seeing your application - show us what you've got!

🧑‍💼 G2i - 100% Remote React Native Jobs

We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.

💡 How to publish an offer?