This Week In React 172
Next.js, PPR, Remotion, State of React Native, Parcel, Panda, StyleX, Cosmos, Remix, RTK, TypeScript, Skia, Reanimated, RNTL, Storybook, Flashlight, Tamagui...
Hi everyone!
@ThisWeekInReact is our brand-new X account, hit subscribe! The promise is to share and retweet interesting things happening in the React community in near-real-time, and to be as high-signal/low-noise as possible.
This week React Server Components have been once-again the subject of various articles and discussions. The community has mitigated feelings about Next.js App Router. Even if people embrace the vision, they seem a little disappointed by its current implementation. Let's hope it's only temporary 🤞.
React Native has been particularly interesting this week. The State of React Native survey results have been published, and the general feeling towards React Native is increasingly positive. There are also interesting bits related to Skia, Reanimated, or the bridgeless mode. The community is excited about Expo becoming a full-stack universal framework.
Happy reading!
💡 Check this newsletter on Twitter - visual format 🎨
To support me:
😘 Recommend the newsletter to your friends: it really helps!
💸 Sponsor
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
🎥 Next.js Explained - Partial Prerendering
It’s is not often that a video makes the headlines here, but this one is different for a few reasons.
First the topic is super interesting and well-explained with many animated visualizations. Partial pre-rendering is a Next.js 14 experimental feature that completes the Next.js vision and offers the best of both worlds between static and dynamic rendering. This makes Next.js a multi-paradigm framework that supports all ranges of rendering diversity. This new feature is simple to adopt, builds on top of Suspense, and doesn’t introduce new APIs: you just need to turn a flag on.
Second: this incredibly well-produced video has been created with Remotion, using React web code 🙉. Good job Delba, you nailed it! We can’t wait to see more videos like this and to know more about your Remotion creative process. On a related note, the Remotion team just shared theirs with a behind the scene of GitHub Unwrapped 2023.
👀 React core PR - react-server-dom-parcel package: Devon from Parcel working on a new bundler integration.
👀 Remix - support for Cloudflare through the Remix Vite plugin
📜 My first impressions of Panda CSS: Baptiste likes Tailwind but now prefers Panda for multiple reasons, including type-safety, the ability to group styles and make them more readable, and its out-of-the-box support for styles merging and variants.
📜 Fix Next.js Routing to Have Full Type-Safety: the Next.js typedRoute experimental feature is not good enough. We can improve routing type-safety (route params, search params, linking…) thanks to a route builder API.
📜 Migrating to Next.js App Router: the good, bad, and ugly: Flightcontrol rebuilt from scratch their dashboard with Next.js App Router and share feedback. There are positive experiences, but overall their team would have chosen Remix instead, and they’d prefer to use another language than using the Next.js dev server again 😅 (note they are stuck on Next.js 13.5 and performance improved lately).
📜 How To Use forwardRef With Generic Components: Matt wraps forwardRef to redefine its types and fix type inference problems.
📜 Updating public Next.js environment variables without rebuilds: the NEXT_PUBLIC env variables are inlined in the client bundles at build time. This proposes to use a find-and-replace script to update them without rebuilding.
📜 How to start a React Project in 2024: Robin discusses the tradeoffs of starting a React project with Vite, Next.js or Astro.
📜 Including static files in App Router RSCs: Shows usage of advanced Webpack features such as require.context and inline loaders.
📜 Take a Qwik Break from React with Astro: Paul compares Qwik and React over various examples. “Write code like React, Browser tastes of Vanilla”.
📜 Where do React Server Components fit in the history of web development?
📦 Remix-Client-Cache - using clientLoader to cache server loader data
📦 StyleX 0.5 - new stylex.attrs function, ESLint sort-keys rule, Babel aliases option, esbuild plugin
📦 Panda CSS 0.29 - config validation, default values in patterns, media-quey tokens, color opacifier…,
📦 React-Live-Chat-Loader 2.9 - Performant live chat integration - Add support for HubSpot/Front
📦 fumadocs - powerful framework for building documentation sites in Next.js
🎥 Jack Herrington - Are RSCs and NextJS Really That Bad?: compares side-by-side 3 cases where App Router has a much better DX than Page Router, and highlights how easy it is to encapsulate and distribute RSC logic inside a package.
🎥 Nadia Makarevich - Advanced React - All about memoization in React
💸 Sponsor
Complete User Management for React
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!
State of React Native 2023 - Survey Results
I’m a big fan of all the “State of …” surveys, because they give us a unique insight into what’s going on in the ecosystem. It’s one thing to follow the hype generated on X and elsewhere, but another thing to see stats of what developers actually use. So I’m really happy to see last year’s State of React Native results published! And as this is now the second year this survey is conducted, we can also identify some trends by comparing the results to the year before. For all the details, have a look at the results yourself! I’ll just highlight a few things that I found interesting, some of them really surprised me:
State management continues to be in a very interesting state (pun intended), with Redux taking the last place in retention with only 44 % (down from 57 % last year), but still clinging to second place after React’s native capabilities in terms of usage with 78 % (down from 85 %).
Data fetching is a category where the results are in line with the amount of attention that can be observed on social media, with TanStack Query and tRPC taking top places in terms of interest and retention, and Meta’s own Relay staying mostly irrelevant outside of Meta with only 5 % usage.
The future of navigation is Expo Router, which exploded from 12 % usage last year to 40 % today.
Gauging by social media activity, styling seems to be the most talked about category with an abundance of options. In terms of usage, the classics (StyleSheet API, inline styling, styled components) remain the dominant options, with NativeWind and Tamagui catching up. Tamagui managed to generate the most interest in the past year (and also has the most retention and interest as a UI component library), closely followed by a new contender: react-native-unistyles.
Special shoutout to Expo: In the “React Native tools” section, 6 out of the top 10 tools as well as the top 2 options in the deployment category are made by Expo.
Over 85 % of respondents think that React Native is moving in the right direction and the share of developers that find that building RN apps is overly complex right now decreased from about 30 % to 25 % - that’s still too much, but we seem to be moving in the right direction!
Overall, really interesting results that are worth checking out in detail! Many thanks to Bartłomiej, Kacper and Software Mansion for making this happen!
💸 Moropo - Stop Losing Days to Detox and Build Meaningful Tests in Minutes
👀 React Native 0.74 PR - Make bridgeless mode the default when the New Architecture is enabled
👀 Reanimated PR - Generators support: William Candillon feels productive writing animations with generators, and contributed this new feature to Reanimated (🐦 demo)
👀 Flashlight React Native performance dashboard: this uses Flashlight to measure performance all React Native versions over time. For now there’s only one FlatList-based scenario.
📖 Expo Docs - Using Sentry: Using Sentry with Expo got way easier in SDK 50: Now only needs one dependency (@sentry/react-native), and doesn’t require you to configure hooks in app.json.
📖 Skia Docs - new Atlas component - efficiently draw a very large number of similar textures/images: Here’s a great 🐦 demo to see it in action.
🧑🎓 Build and Deploy React Native Apps with Expo EAS - Free Egghead course from Expo’s Kadi Kraman
📜 John Gruber - Apple’s Plans for the DMA in the European Union: Apple is introducing a host of changes to the App Store in response to demands by the EU, in a way that has by many press outlets been described as “malicious compliance.” (also see: 📖 Apple Developer Docs)
📜 Recommended practices for React Native Testing Library in 2024: RNTL author Maciej shared tips for people that might know the library but maybe haven’t kept up with the latest changes and improvements (like screen API and semantic queries).
📜 Communicating with React Native Web Views: Using web views can be a good way to reuse parts of a web app, but those parts can also feel disconnected from the native part - this article highlights how to avoid this by establishing communication between native and web.
📜 Building a PhotoRoom-like background remover app with React Native and Skia
📦 React Native Storybook 7: After some time, RN Storybook has finally catched up to the major version of the “parent project.”
🎙️ Rocket Ship 27 - React Native’s Superpower with Theo Browne
🎥 Simon Grimm - Can this replace NextJS?: Expo Router becoming an universal full-stack React framework makes it a direct competitor to Next.js.
🎥 Theo Brown - Mobile Devs Hate Servers. Expo Wants To Fix That.
🔀 Other
📜 Some use cases for CSS revert-layer - better isolation/encapsulation than shadow DOM
📜 You Probably Don't Need eslint-config-prettier or eslint-plugin-prettier
📦 TypeScript 5.4 Beta -
NoInfer<T>, closure type narrowing, groupBy…📦 Safari 17.4 beta - groupBy, withResolvers, @scope, ArrayBuffer, Intl improvements
📦 Qwik 1.4 - JSX types changes, automatic Link prefetching, MPA navigation fallback
📦 Lucia Auth 3.0 - greatly simplified lib, Oauth logic extrated to new “arctic” package
📦 Shiki 1.0 beta.0 - Modern ESM syntax highlighter - merges back Shikiji into Shiki
📦 Deno 1.40 - Temporal API, meta.filename/dirname, decorators
🤭 Fun
See ya! 👋