Hi everyone!
Last week we got great announcements from Vercel Ship and App.js conferences.
I also found the community blog posts very interesting this week! There's a lot of good content to read here. The one about memory leak is quite scary 😅.
I have been wondering lately: is it still useful to write a Twitter thread? I've asked the question on Twitter and feel like nobody reads it anymore, apart a few people. I'm considering stopping. What do you think? 🤔
💡 Subscribe to the official newsletter to receive an email every week!
💸 Sponsor
React-admin: The Open-Source Framework for B2B apps
👩🏻💻 For developers, by developers: React-admin is a free, low-code library that accelerates the development of internal tools, admins or B2B apps. Unlike no-code tools, you use code, ensuring you’re never limited by the framework.
🔌 Flexible Integration: React-admin supports any API format (REST or GraphQL) and various authentication backends, including Auth0, Cognito, Google Auth, Active Directory, and Keycloak. You control the server, so there are no extra costs for Single Sign-On (SSO) capabilities. It's fully themeable, allowing you to customize it with your company's colors.
🚀 Proven Success: Over 25,000 companies have built single-page applications with React-admin. For your next project, save weeks of development time by using react-admin. Try react-admin now.
⚛️ React
A new major version of Next.js dropped in RC at Vercel Ship last week. The highlights of this version are:
- React 19 RC support
- React Compiler support (experimental) through the Babel plugin (this might increase build time)
- Hydration error improvements, displaying the diff mismatch
- Less aggressive caching, now opt-in:
fetchand Route Handlers are no longer cached by default - Incrementally adopt Partial Prerendering with a new
experimental_pprroute config option - New
create-next-appdesign, prompting for Turbo usage in dev, and ability to create projects - next/after (experimental), a new API useful to defer analytics tasks and keep responses fast
- Optimizing bundling of external packages (
serverExternalPackages) now stable
Other interesting things were announced at Vercel Ship. Additional resources to look at:
- 📜 Vercel Ship 2024 recap
- 📜 Introducing deeper integrations for feature flags in Vercel
- 📜 Introducing the Vercel Web Application Firewall
- 🎥 Jack Herrington - NextJS 15: React 19, Less Caching, Turbopack, Better Hydration Errors and more from Vercel Ship!
- 💸 Build AI apps with React and JavaScript — Frontend and UI for any LLM
- 👀 React Core PR - Throw if React and React DOM versions don't match: React 19 will be stricter and require that the renderer version (DOM or RN) uses the exact same version as the core React package.
- 👀 React DOM PR - Add support for Popover API: This new API is now available in all major browsers, and React just merged support for it.
- 👀 Next.js PR -
unstable_rethrow: Upcoming Next.js API to avoid catching internal errors thrown by Next.js (such as redirect/notFound errors). - 🐦 Latest SWR beta can seamlessly move data fetching between client-side and server-side. And React-Query + Apollo Client also implemented similar features.
- 🗓 React Rally - 🇺🇸 Utah - 12-13, August - Get a 10% discount with code "TWIR". There’s an advanced React workshop with Cory House.
- 📜 Sneaky React Memory Leaks: How useCallback and closures can bite you: A great article simplifying a real production app memory leak to explain it. This surprised me, I couldn’t guess such React code would leak memory, and pretty sure my apps contain memory leaks now 😅. Good news though: the app wouldn't leak memory when using the new React Compiler.
- 📜 Automatic Query Invalidation after Mutations: React Query is un-opinionated about how you invalidate cached resources and instead lets you implement a custom strategy on top of flexible primitives. For example, you can invalidate queries by tags.
- 📜 Migrating from Radix to React Aria: Improving Accessibility and UX: After having used alternatives such as Reakit or Radix, Greg gives good reasons for adopting React Aria. The migration feedback is positive, but some challenges were encountered. React Aria is quite “strict” at ensuring your components remain accessible.
- 📜 On Laravel, Full-Stack JavaScript, and Productive Frameworks: Josh created 2 React meta-frameworks (including Shopify Hydrogen) and also uses Laravel extensively. He shares an interesting perspective on the pros/cons of the Laravel vs React ecosystem.
- 📜 A virtual DOM in 200 lines of JavaScript: This greatly explains how a virtual DOM (like the one from React) works under the hood, by creating a small library that can run a TodoMVC app.
- 📜 Design System Retrospective: Interesting perspective on the successfulness of implementing a Chakra-like design system (tokens as props). The average dev struggled to understand how to compose primitives. Tailwind might be a better fit for them.
- 📜 Combining React Server Components with react-query for Easy Data Management: A good read explaining limits RSCs. Server Actions run serially, and you need to wait for RSCs to re-render which might be slow without proper caching. Using React-Query with prefetching might slightly increase bundle size and produce more roundtrips, but overall that could give a faster UX.
- 📜 Using Server Actions with tRPC: Server Actions are similar to tRPC but come barebone. tRPC maintainer explains things that tRPC enables on top, such as auth, input validation, observability, rate-limiting, and other possible middleware. Note there are alternatives to consider such as next-server-action and zsa.
- 📜 Optimizing INP for a React App & Performance Learnings: A long feedback on optimizing responsiveness on a React 18 prod app. Various takeaways include deferring work and analytics, or being careful of useless re-renders.
- 📜 Partial Prerendering without a framework: Demo from Netlify CEO shows how to implement “vanilla PPR” (without Next.js which has this as an experimental feature).
- 📜 Behind the ‘as’ prop: polymorphism done well: Also explains how to type it properly.
- 📜 Redwood - Using Middleware: RSS and Sitemap
- 📜 Structured logging for Next.js - Using the Pino logging library
- 📜 Facebook just updated its relationship status with web components
- 📜 Authentication with WorkOS in Next.js: A Comprehensive Guide
- 📜 The Next.js <Image> Component
- 📜 How To Dockerize A React App
- 📦 Astro 4.9 - React 19 support for Astro Actions: Adds new withState/getActionState APIs to integrate Astro with React 19 useActionState, including progressive enhancement.
- 📦 Storybook 8.1 - typesafe mocking, Unit testing React Server Components
- 📦 NextUI 2.4
- 📦 Ark UI 3.0
- 📦 React-Query 5.39 - Supports React 19
- 📦 Redwood 7.6 - React Compiler experimental flag
- 📦 zsa 0.1 - Typesafe Server Actions for Next.js
- 📦 React-Executor - Asynchronous task execution and state management for React
- 🎥 UI Engineering - Portals Can Share State Between Windows: It's a pretty cool idea to use React portals to integrate seamlessly between windows and might also be useful for the upcoming browser Picture-in-Picture API.
- 🎥 Theo - I Was Wrong About React Router.
- 🎥 James Quick - Astro Launches Actions Similar like Next.js
💸 Sponsor
Next.js auth tutorial with RSCs and Server Actions
The latest tutorial with WorkOS and Sam Selikoff shows how you can easily add AuthKit's hosted login box to a Next.js app:
📚 Get started using the Authkit <> Next.js integration library
🤖 Set up environment variables, configure the callback route and middleware, and implement signIn and signOut functionalities
⚙️ Protect routes in the Next.js app from unauthenticated users with the getUser function
AuthKit can be used with WorkOS User Management, which supports MFA, identity linking, email verification, user impersonation, and more.
Best of all, it's free up to 1,000,000 MAUs 🚀
📱 React-Native
This section is authored by Benedikt.
The dry season of everyone saving their announcements for upcoming conferences is over, with last week’s App.js Conf dropping another bucket of amazing content and exciting announcements on us! Expo announced the aptly named Atlas, which acts as a map to explore the wilderness of Bundler land. If you ever wanted to understand how code goes in and comes out of your app, this is the tool for it. It’s especially useful to reduce bundle size, but also just to get a better understanding of how your app works. In the ORM space, Drizzle launched their Studio as an Expo dev tools plugin and Prisma announced that they’ll be adding React Native support. The React Native IDE is now in open beta and you can download it in the VS Code extension marketplace and finally, William Candillon announced video support coming to RN Skia, as well as WebGPU in React Native! Of course, we remain super excited by Universal React Server Components that we already mentioned last week. Make sure to catch up and watch the App.js Conf Live stream.
- 💸 WithFrame - Pre-Built React Native Components
- 🐦 Re.Pack V5 will be based on Rspack instead of Webpack: This brings significant performance improvements (Cold start 15s → 2.5s, build 10s → 2s, HMR 450ms → 100ms).
- 🗓 Chain React Conf - 🇺🇸 Portland, OR - July 17-19. The U.S. React Native Conference is back with engaging talks and hands-on workshops! Get 15% off your ticket with code “TWIR”
- 📜 Introducing Expo Atlas: The Expo team used this internally to work on a faster Metro resolver, improve their Babel config, as well as for their work on RSC. Now you can use it to better understand and optimize your app as well!
- 📜 RNW 0.74 Launches: A Gallery Glow-up and Fabric Foundations! React Native: Something new I learned from this announcement is the React Native Gallery app, basically a kitchen sink demo app for RN on Windows.
- 📜 Bringing Prisma ORM to React Native and Expo: Prisma, including reactive queries, is now available in RN (in beta). And it seems they’re also working on a local-first sync solution.
- 📜 Using React-Admin With React Native: React-Admin is a framework for quickly building CRUD apps. This article shows how to leverage its headless architecture to use it with RN.
- 📜 Fluttering in the sky: Not React Native but worth mentioning that a company is working on the equivalent of React Native Server Components for Flutter.
- 📦 React Native IDE is now in open beta: Simply download as a VS Code extension from the VS Code marketplace.
- 📦 SwiftUI-React-Native 6.0: Use SwiftUI features directly from React Native.
- 📦 React Native Skia 1.3.0: Skia can now render videos.
- 📦 Drizzle Studio is now available for Expo SQLite via dev tools plugin: This is super handy! No more finding the Simulator’s file system folder on your Mac to open the sqlite-file in a separate GUI for debugging purposes.
- 🎥 Simon Grimm - 10 Takeaways for React Native Devs from the App.js conference
🔀 Other
- 📜 What We Learned From the First State of HTML Survey
- 📜 "Web components" considered harmful
- 📦 Angular 18.0 - Zoneless, Material 3, deferrable views…
- 📦 TypeScript-ESLint v8 beta - ESLint 9 support
- 📦 fnm 1.36 - fast Node.js version manager
- 📦 rsbuild 0.7
🤭 Fun
See ya! 👋
Top comments (0)