Skip to main content

๐Ÿ“จ #172: Next.js, PPR, Remotion, State of React Native, Parcel, Panda, StyleX, Cosmos, Remix, RTK, TypeScript, Skia, Reanimated, RNTL, Storybook, Flashlight, Tamagui...

ยท 11 min read
Sรฉbastien Lorber

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:

Don't miss the next email!

    ๐Ÿ’ธ Sponsorโ€‹

    Axiom - the best logging platform for Vercel apps

    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

    ๐ŸŽฅ 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.

    Don't miss the next email!

      ๐Ÿ’ธ Sponsorโ€‹

      Complete User Management for React

      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

      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!

      ๐Ÿ”€ Otherโ€‹

      ๐Ÿคญ Funโ€‹

      alt

      See ya! ๐Ÿ‘‹


      Don't miss the next email!