This Week In React 160
Remix, Next.js, Expo API Routes, Ladle, MDXEditor, Sonner, Docusaurus, AbortController, Query String, Menubar, VisionCamera, Victory Native XL, Bun, ESLint, TC39...
Hi everyone!
After a little break, we're catching up on 2 weeks of news this week!
There's been quite a few releases, including Remix and Next.js, but also some lesser-known packages that are well worth your attention.
Super excited to see Expo finally venturing server-side!
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor
FrontendMasters – Complete React.js Learning Path to Senior React Developer
Learn React.js from the ground up to advanced topics like performance, testing, and code quality. Start by building a real-world app in the Complete Introduction to React. Continue with Intermediate React, integrating the most popular tools from the ecosystem. Then learn performance, TypeScript, and even Next.js, the fullstack React framework!
⚛️ React
As expected, Remix v2 should be a relatively straightforward upgrade, since many v2 features were already available in v1 as opt-in 'future flags'. This article gives an overview of all the flags that were delivered in v1 and are now enabled by default in v2. Remix also offers retro-compatibility packages for those who preferred some v1 conventions. React Server Component support should land in Remix v3.
Many developers complained about the slowness of the Next.js dev server lately. Vercel heard us and came up with another rlease that significantly improves things.
❓ Did the React team forget the React Forget compiler?: Joseph and Sathya respond on Reddit. They are making progress and starting to experiment in production. We'll know more at React Advanced next month.
👀 Vercel v0 alpha - "Midjourney for React": Vercel introduced a preview of an impressive AI capable of writing React components based on shadcn UI and Tailwind, and easy to copy/paste.
💡 Await Component - Use Suspense without creating a new component: a useful technique inspired by Remix.
📜 Speeding up the JavaScript ecosystem - Polyfills gone rogue: many ESLint plugins like
eslint-plugin-reactcome with a lot of unnecessary dependencies.📜 The State of Web Frameworks on Deno: gives a good overview of the React frameworks that can be hosted on Deno Deploy. Next.js support is limited, but Remix and Astro seem to be well-supported. I've discovered that they've migrated their docs to Docusaurus 🥲.
📜 Abort Async Calls Inside Remix Loaders and Actions: explains how to correctly manage the AbortSignal received in a Remix loader. There are a few pitfalls to avoid.
📜 Build a server-side filter UI with Remix: offers a complete solution and a great demo for creating advanced filters inspired by the Linear app. TIL about the OData spec, which defines how to serialize filters as query string.
📜 Storing React state in the URL with Next.js: eencourages the use of the query string via a
next-usequerystatepackage. v1.8 is out and supports Next.js App Router. Also shares a few details I didn't know about, such as the browser rate-limit onhistory.replaceStatecalls.📜 Displaying Local Times in Next.js: interesting tips to avoid hydration mismatch problems.
📜 Islands & Server Components & Resumability, Oh My!: the 3 approaches are orthogonal and could converge?
📜 Exploring React Server Components and Server Actions with Next.js
📦 Ladle v3 - Uber seamless alternative to Storybook - SWC, Node 18, MDX stories...
📦 Docusaurus v3 beta - MDX 2, React 18, TypeScript 5, Mermaid 10
📦 Million v2.6 - HMR fixes, Million CLI, better pre-evaluation
📦 Mantine v7.0 - Fully featured React components library - Native CSS, App Router support
📦 MDX Editor v1.0 - A rich text editor React component for markdown
📦 Sonner v1.0 - An opinionated toast component for React - RSC support
🎥 Jack Herrington & Ben Holmes - Future Astro and React Advanced!
🎥 Lee Robinson - Using Forms in Next.js (Server Actions, Revalidating Data)
👥 reactjsday (Verona 🇮🇹, Octobre 27) is offering us -10% - code "media_TWIR"
👥 React Advanced (London 🇬🇧, Octobre 20-23) is offering us -10% - code "REACT10"
👥 Next.js Conf: online, 26th of October
💸 Sponsor
CoderPad: Code together before you work together
Hiring front-end developers is hard. 😩 But 4,000+ engineering teams — including at Netflix, Spotify and LinkedIn — have found a better way! 🤠 Skip the algorithm interviews and run front-end interviews in a fully customizable and collaborative IDE - where you can:
drag and drop a React (and Angular or Vue) repo
add packages with npm install
let candidates use ChatGPT live in the interview
watch & share code playback after the interview
Use CoderPad to run fast, fair and real coding interviews that candidates and interviewers trust. Sign up for free today & hire with confidence.
📱 React-Native
I've been looking forward to this! Expo is getting into server-side features by offering to deploy API Routes via an Expo Router convention. You can deploy these routes yourself, and soon on popular hosts, but it's clear that the long-term goal is to suggest hosting the server runtime in EAS.
This marks the start of a new era for Expo. Having solved the problem of native mobile, it's now time to make cross-platform a mainstream reality by filling the gaps in web support with Server Side Rendering and React Server Components.
💸 Blitz - Build React Native Apps Faster for iOS, Android, and Web!
📜 Level up React Native styles. A fresh take on StyleSheet API for adaptive layouts
📜 Comparing iOS rendering performance: SwiftUI vs. React Native vs. Flutter
📦 React Native Menubar Extra - Easily add native MenuBar (NSMenu) to your React Native MacOS App
📦 Victory Native XL - Charting library - Faster, rewritten with React-Native-Skia
📦 React Native Gesture Handler 2.13 - Universal Hover gesture, 𝚊𝚌𝚝𝚒𝚟𝚎𝙲𝚞𝚛𝚜𝚘𝚛 prop
🎥 Static Hermes: the Next Generation of Hermes - Tzvetan Mikov
🎥 React Native Podcast & React Native Radio cross-over - React Native news, insights & gossip
🔀 Other
🐦 CSS
:has()ships in Firefox 119 (beta) - Now supported in all browsers👀 Agenda for the 98th meeting of Ecma TC39 - 26-28 September
📦 Safari 17.0 - CSS, search element, popover, storage API, Set operations, URL.canParse...
🤭 Fun
See ya! 👋