Aller au contenu principal

πŸ“¨ #244: React Router, Compiler, Next.js, TanStack, JSX, Storybook | Reanimated, Hermes, Keyboard Controller, Screens, Node-API, Shimmer | TC39, tsgolint, Bun, Better-Auth, WebGPU

Β· 10 minutes de lecture
SΓ©bastien Lorber
SΓ©bastien Lorber
Newsletter creator - Docusaurus maintainer
πŸ‡«πŸ‡· Non traduit :/
Malheureusement, cette page n'a pas encore été traduite en français. Reviens un peu plus tard!

Hi everyone!

Apparently, not everyone is on vacation yet because it's a great week.

On the React side, we have an early version of React Server Components support in React Router, and a new comprehensive React Compiler docs.

It's even more exciting for React Native developers: Reanimated v4 is now stable, and Screens now support native tabs, coming soon in Expo!

I also take the opportunity to warn that an npm phishing attack is currently in progress, targeting maintainers of popular packages. Don't trust any email coming from npmjs.org, they are spoofed.

As always, thanks for supporting us on your favorite platform:

Ne manque pas le prochain email !

    πŸ’Έ Sponsor​

    AG Grid: The Best React Data Grid In The World.

    AG Grid: The Best React Data Grid In The World.

    AG Grid is a fast, free and fully customisable React Data Grid. Used by 90% of the Fortune 500, AG Grid is 100% open source with over 4 million npm downloads per month:

    • πŸ†“ Free: Access 100s of features such as Sorting, Filtering, Pagination, Cell Editing and more, all for free - forever.
    • πŸš€ Fast: Display millions of cells out of the box, without compromising on performance.
    • 🎨 Customisable: Add your own components to cells, rows & columns and use 100+ CSS variables to style every element.
    • 🏒 Enterprise Features: Purchase a licence for lifetime access to advanced features including Pivoting, Grouping, Master / Detail and Integrated Charts (powered by our React Charting Library, AG Charts). Try it for free - no trial license required.

    Learn More: ag-grid.com

    βš›οΈ React​

    React Router and React Server Components: The Path Forward

    React Router and React Server Components: The Path Forward

    The new React Router v7.7 release introduces experimental RSC APIs to use alongside RSC-compatible bundlers (Vite, Parcel) that you can now use in Data Mode, making it almost as powerful as the Framework Mode. In the future, the Framework Mode is also going to migrate to use React Router RSC APIs under the hood.

    Reading the React Server Components docs, the integration doesn’t look so simple, so I guess most React Router users may prefer waiting for RSC support in Framework Mode. However, it’s cool that they expose all primitives to bring RSCs to your existing app, and make it possible to create your own RSC-powered Framework Mode somehow.

    Other useful links:

    React Compiler being recommended on the useCallback docs

    React Compiler getting ready for prime time?

    Recently, the React Compiler docs have been completely rewritten, divided into several pages, and given a more prominent place on the React docs site. There’s also a new API reference section covering configuration, directives, and pre-compiling a React library before distribution.

    The React Compiler is now recommended in other places of the docs as a better alternative to React.memo, useMemo, and useCallback. In the future, eslint-plugin-react-hooks may enable the compiler rules by default. It’s still a Release Candidate, but I wouldn’t be surprised to see it become stable soon, probably at React Conf in October given the line-up.

    Ne manque pas le prochain email !

      πŸ’Έ Sponsor​

      Measure web performance based on actual user impact

      Measure web performance based on actual user impact

      A spike in errors or latency could be devastating… or trivial. And you don't want to waste time investigating regressions that have no meaningful impact on your users or business. With Embrace, you finally get observability that surfaces real user impact.

      • πŸ“Š Track Core Web Vitals, exceptions, network requests, and custom eventsβ€”all tied to complete user experiences.Β 
      • πŸ‘€ See where performance issues within custom user flows cause disengagement.
      • πŸ” Discover the root cause faster with high-fidelity data, including full session timelines, performance traces, and user journeys.Β 
      • πŸ”­ Embrace is built on OpenTelemetry. Own your data, integrate it anywhere, and avoid the rigid pricing and limitations of all-in-one platforms.

      Learn more, including how to get started free, at embrace.io.

      πŸ“± React-Native​

      Reanimated 4 Stable Release β€” the Future of React Native Animations

      Reanimated 4 Stable Release β€” the Future of React Native Animations

      This is a massive release that greatly improves the Reanimated. Highlights include:

      • CSS Transitions and Animations: taking the best part of CSS animations a bringing it to React Native through a familiar and convenient declarative API, that improves performance and web/mobile cross-platform support along the way. It should be particularly useful for state-driven micro-interactions, but worklets aren’t going anywhere and remain the go-to choice for complex and gesture/scroll-driven animations.
      • Worklets have been extracted to a separate library that Reanimated depends on, starting >= v3.17. Richer multi-threading APIs should come soon, with the ability to move heavy computation, data fetching/processing to a background thread, with the ability to use third-party libraries in worklets.
      • Reanimated has been split into many modular packages to help reduce bundle size, particularly useful on the web.
      • Shared Element Transitions coming in an upcoming v4.x version.
      • Reanimated v4 is not compatible with the New Architecture.

      πŸ”€ Other​

      🀭 Fun​

      alt

      alt

      See ya! πŸ‘‹


      Ne manque pas le prochain email !