π¨ #153: Server Components, Astro, MUI, Next.js, Remix, React-Query, AsyncLocalStorage, forwardRef, Storybook, Vaul, Solito, Yoga, Reanimated, React-Tweet, Expo-Router, Lottie, Bun, TypeScript...
Hi everyone!
It looks like not everyone is on holiday: there's still plenty of news this week, both on the React and React-Native fronts.
I've got a question for you (you can email me back): would you prefer me to put direct links, or links to tweets?
- direct: 1-click access to the resource
- tweet: read related conversations
π‘ Check this newsletter on Twitter - visual format π¨
To support me:
- π Recommend the newsletter to your friends: it really helps!
- πΈ Sponsor the newsletter
- 𧡠Retweet the latest Twitter thread
Don't miss the next email!
πΈ Sponsorβ
Enterprise Grade APIs for Feeds, Chat, & Video!
Stream is the maker of enterprise-gradeΒ APIsΒ andΒ SDKsΒ that help product and engineering teams solve two common problems at scale: in-app chat and social activity feeds.
With Stream, developers can integrate any type of messaging or feed experience into their app in a fraction of the time it would take to build these features from scratch. Stream Chat makes it easy for developers to integrate rich, real-time messaging into their applications.
Stream provides robust client-side SDKs for popular frameworks such asΒ React,Β React-Native, Expo, Flutter, Android, Angular, Compose, Unreal, and iOS. Unlock enterprise-grade features, functions, and UI components completely free for your startup or side project with the Maker Account.
Try the new React Video tutorial!
βοΈ Reactβ
A new version of Astro has just been released with a long-awaited experimental feature: View Transitions. This makes it easy to create fluid, animated transitions between HTML pages, without having to resort to client-side routing: there's no need for a <Link>
component as with Next.js or Remix. For a React developer, this makes the framework more appealing and competitive in terms of UX compared with the classic SPA mode we're used to, while keeping a model simpler. Careful: these transitions won't preserve your React state across navigation, which could be a problem. Note support View Transitions remains weak, but is making rapid progress and can be considered as a progressive enhancement, plus Astro offers a fallback mode.
- π€ Dan Abramov leaves his job at Meta, but remains in the React core team
- π€ Meta is hiring a React DX Engineering Manager (London)
- π§βπ New Jotai tutorial
- π¬ Material UI RFC - Zero-runtime CSS-in-JS: MUI plans to develop a zero-runtime CSS-in-JS solution inspired by Linaria/Compiled, compatible with RSCs. Also explains why it cannot rely on any existing solution.
- π‘ Server Components allow to pass promises over the network
- π‘ forwardRef type fix that works with generics
- π React Query and React Context: Dominik explains how putting React-Query data into a React context can be useful in making your data dependencies more explicit. The future
useSuspenseQuery
hook could also be a good alternative. - π Next 13 cookies() and headers() explained: explains how Next.js uses
AsyncLocalStorage
(and later AsyncContext?) to expose itscookies()
andheaders()
functions to RSCs. - π Kuma UI vs Panda CSS β My first impressions: quick comparison of the 2 new CSS-in-JS libraries. The author settled on Kuma UI.
- π Recipe kits, a great alternative to installable libraries: discusses the emergence and interest of UI kits that are not distributed via npm: Shadcn UI, Tailwind UI (and soon Tailwind Catalyst).
- π Tailwind Connect 2023 Recap: written summary of the conference, which also presented Catalyst, the React UI Kit currently under development.
- π Introducing React-Tweet: Vercel offers an RSC-compatible package for efficiently displaying tweets in web pages.
- π React Server Components Tips: 5 good tips and mental models for understanding and using CSRs.
- π Origins of JSX and Why It Exists
- π Lazy Loading in React and Next.js Apps
- π¦ Storybook 7.1 - in-app onboarding, zero-config styling support, TypeScript snippets...
- π¦ TanStack Query v5 beta - mostly stable, migration guide and code mods available
- π¦ Remix 1.19 - Improved dev server networking option, ESBuild metafiles, better Node polyfills...
- π¦ Redwood v6.0.0 RC
- π¦ Vaul - Unstyled drawer component for React
- π¦ Framer-Motion 10.13 - Scroll API
- π¦ Downshift v8
- π₯ Jack Herrington - Why Panda: CSS for RSCs is Changing the Game
- π₯ Addy Osmani - The Cost Of JavaScript - 2023
- π₯ Jamon Holmgren - The Suspense is killing me
- π₯ Lee Robinson - Responding to Reddit on the Next.js App Router
Don't miss the next email!
πΈ Sponsorβ
Porkbun.com - The Best Domain Name Registrar
Porkbun offers hundreds of domain extensions for React and React-Native developers from .dev and .app to .cloud, .xyz, and .ai β all at theΒ lowest prices around!Β Every domain name at Porkbun comes withΒ tons of free featuresΒ like:
- SSL Certificates
- WHOIS Privacy
- DNS
- URL Forwarding
- Web and Email Hosting Trials
Check out ourΒ AI Generated Search toolΒ thatβs changing the way people look for domain names. All this is backed byΒ incredible support 365 days a yearΒ plus thousands of real five-star reviews on Trustpilot.
Click the link andΒ get $1 off your next domain name registrationΒ at Porkbun.com!
π± React-Nativeβ
New version of the project that unifies React-Native and Next.js under shared abstractions. With v4, it is now possible to use Next.js App Router. New APIs have been introduced for this purpose. Note that React-Native does not yet support React-Server Components: it is still a bit early to be able to use them in a cross-platform way.
- π Expo Launch Party: an Expo launch week scheduled for the week of 8 August?
- π₯ Debugging React Native Apps End-to-End: AMA with Experts from Meta and Sentry - 26 July
- π Redefining Navigation in React Native: the Potential of expo-router: good analysis of the trade-offs between Expo Router (v1) and React-Navigation.
- π Setting Up Storybook Web and Native with Expo Router v2, SDK 49, and TypeScript
- π EAS Build Will Require Using M1/M2 Builders This Fall
- π¦ Yoga v2.0.0-beta.2: v2 of the React-Native layout engine is in beta. The aim is to comply with the W3C spec, which is great news for writing cross-platform React code! Note that Yoga is not just for mobile developers: it is also used by many other projects such as Satori, React-Native-Skia, React-Three-Flex and the React Ink CLI renderer.
- π¦ Reanimated 3.4.0: a great release with Shared Element Transitions, improvements to Worklets, React-Native 0.72 support and new APIs like
useReducedMotion
. - π¦ React-Native-Lottie v6 - New Architecture support
- π¦ Tamagui Takeout: template that self-updates to ship cross-platform apps. Paid product aiming to fund the open-source project.
- π₯ Jamon Holmgren - Hacking Xcode with Colo Loco!
- ποΈ The React Native Show Podcast #24 - React Native at scale with Jacob SuΓ±ol (Abbott)
- ποΈ React Native Radio 272 - Real Life React Native: Nick Alekhine at NTWRK
π§βπ» 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.
π Otherβ
- Bun 0.7 - Improved Node.js compat, Vite support, Worker, AsyncLocalStorage...
- Rspack 0.2.9
- Microsoft TypeChat - Helps get TypeScript type-safe reponses from AI / LLM
- TypeScript and the dawn of gradual types
- pkg-size - Find the true size of an npm package (thanks to WebContainers)
- Node.js Best Practices List - 2023 update
- How Turborepo is porting from Go to Rust
- Introducing Valibot, a < 1kb Zod Alternative
- 5 Inconvenient Truths about TypeScript
π€ Funβ
See ya! π
Don't miss the next email!