This Week In React #167: Aria Components, Hydration, Remix, Server Components, useSyncExternalStore, cache, perf, Glow, Unistyles, Expo, :has(), Tailw

Search for a command to run...

No comments yet. Be the first to comment.
Hi everyone! Krzysztof and Tomasz from Software Mansion here ๐ It's been a fairly calm week for the React ecosystem, but not for the React Native world. Meta has made an exciting announcement about the release of React Native 0.80, where they've dec...

Hi everyone! This week is relatively calm in the React ecosystem, but we still have various interesting blog posts and releases. Maybe we'll soon get some exciting news from React Summit that's about on Friday! On the React Native side, all the devs ...

Hi everyone! I thought I was on schedule for today's issue, until I realized that Dan Abramov wrote 4 RSC blog posts this week ๐. We also get great releases, including Storybook, LiveStore, Base UI, and the Lingo Compiler is a quite exciting innovat...

Hi everyone! Cyril and Matthieu from Theodo Apps here ๐. This week, the Remix team announced some big news. Microsoft has also made it easier to try out TypeScript Go rewriting. In the React Native world, there were a few minor but interesting relea...

Hi everyone! This week, we're delighted to finally have a preview of React Server Components support in React Router. I've also found some very interesting PRs on the React repo, and give you a glimpse of what could be coming soon! The React Native e...

Hi everyone!
Once again this week, we have a good mix of articles and releases.
Firefox 121 is out, making CSS :has() officially cross-browser supported ๐ฅฒ
That's the last issue of the year. The newsletter should be back on January 3.
Happy New Year and Merry Christmas everyone, and thank you for reading me throughout the year โค๏ธ๏ธ
๐ก Subscribe to the official newsletter to receive an email every week!
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!
Devon just ๐ฆ announced the stable release of React Aria Components 1.0. Over 40 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box, ready for your styles.
React Hydration Overlay - Easily Squash Hydration Errors
A brand-new project that permits to add a handy error overlay to help debugging hydration errors. For now, this can be added to Next.js sites thanks to a Webpack plugin, but this is a much-needed feature that we all hope to see land in React core.
๐ Remix PR - unstable_serverBundles - split your route tree
๐ React Docs Update: an overview of all the new official docs pages that were recently published on React.dev, including use, cache, form and many other experimental/canary APIs. There's even a "Coming Soon" section referencing docs for new static resource preloading APIs.
๐ Updated Next.js testing docs - using App Router and TypeScript
๐ Concurrent React, External Stores, and Tearing: An advanced article explaining how React can end up displaying an inconsistent UI (tearing). useSyncExternalStore helps to render a consistent UI, but it can also de-optimize your React transitions. See also the Tearable Dots interactive demo.
๐ Explaining React's cache Function: interactive article presenting the experimental React API, and how it differs from useMemo. It permits cross-component caching and can be used to preload data.
๐ How to Get Rid of โWindow is Not Definedโ and Hydration Mismatch Errors in Next.js: Shares 5 tips to avoid React hydration problems.
๐ React Tricks: Fast, Fit and Fun: React perf lessons learned from building Wouter, a React router.
๐ Netlifyโs Disingenuous Survey-based Attack on Next.js (and Eleventy, too): Eleventy creator's criticism of how Netlify presented their State of Web Dev survey results.
๐ What is Reactivity?
๐ Migrating from Jest to Vitest for your React Application
๐ฆ Remix 2.4.0 with client data: The first Remix release to land their Client Data RFC, which allows querying data APIs directly from the client (skipping the server).
๐ฅ Ben Holmes - React server components from scratch: a great video showing how to implement a full RSC setup from scratch, including streaming, bundling, component routing, handling SSR, resolving client references...
Are you a React Native developer or on your way to becoming one?
Good news! Youโve found your endless source of skills!
๐ Here is #DEVember - a month-long Marathon of React Native Tutorials
๐ Here is our Full Stack Mobile Developer course with more than 550 real success stories from graduates.
๐ Here is our Newsletter with the TOP selection of news and life hacks about the world of React Native development.
All our content is Project-Based-Learning - which means that you will be learning the skills and adding projects to your portfolio at the same time!
PS: Subscribe to our YouTube channel. Today we are building a ChatGPT Wrapper _with Expo Router V3 & API Routes!
Unistyles is a cross-platform styling library. It is built as a superset of StyleSheet (if you use React Native, youโre probably familiar with StyleSheet.create โฆ) similar to how TypeScript is a superset of JavaScript. First released just three months ago, it has since gained over 500 stars on GitHub and is now approaching its second major version with enhanced TypeScript types, no dependence on React Context anymore, and fresh C++ bindings to boost performance. A very interesting new feature is the addition of plugin support, which could enable some interesting new use cases.
๐ธ AnimateReactNative - Premium and Custom React Native animations
๐ Expo Guide on How to use the New Architecture: All expo-* packages except expo-updates support the new architecture. Support for expo-updates is planned for Expo SDK 51.
๐ Expo 2023 - The year in review: An overview of everything Expo launched this year, including Expo Orbit, Expo Router, EAS improvements, 3 SDKs, Expo Modules API and much more.
๐ Xcode 15.1 image is now available on EAS Build: Xcode 15.1 primarily fixes bugs.
๐ Optimizing Performance in React-Native: Tips and Techniques: Tutorial on how to apply memoization, use virtualized lists, optimize images, debounce, optimize bundle size and network requests
๐ Building AR face masks in React Native: How to load and apply 3D face masks using DeepAR
๐ Introducing docs.infinite.red โ A New Home for Infinite Redโs Documentation - Ignite, Reactotron, RN MLKit, Gluegun
๐ฆ React Native 0.73.1 is out: Adds enableNetworkInspector to enable Network panel and CDP handlers in inspector proxy, bumps CLI to 12.3.0
๐ฆ React Native Windows 0.73.1 is out: Brings React Native 0.73 to Windows
๐๏ธ Rocket Ship #021 - The React Native IDE with Krzysztof Magiera
๐๏ธ React Native Radio 283 - From side-project to acquisition!
๐ tsdocs.dev - browse type documentation for npm packages
๐ฆ Node.js v21.5.0 - parse JSON efficiently, adding a --trace-promises flag
๐ฆ Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more
๐ฆ SvelteKit 2.0 - Vite 5, shallow routing, prepating for Svelte 5
๐ฆ date-fns 3.0 - TypeScript rewrite, ESM and other date features
๐ฆ TSDiagram - Create diagrams and plan your code with TypeScript
See ya! ๐