This Week In React #197 : Waku, Effect, TanStack, Framer Motion, use(), Preact, Valtio, Astro, Three.js, Nitrogen, React-Native-Web, expo-dom...

This Week In React #197 : Waku, Effect, TanStack, Framer Motion, use(), Preact, Valtio, Astro, Three.js, Nitrogen, React-Native-Web, expo-dom...


Hi everyone!

Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, standing in for Seb to bring you the latest news from the React and React Native worlds.

It’s been another calm week, but we've still got some great updates for you. Waku now supports React Server Actions, there are tips for using TanStack/Router, and we explore React's journey to becoming a full-stack framework. Plus, check out what's new in React Native 0.75 ! We also have some updates on NitroModules and react-native-webGPU. Dive in and enjoy!

Check our partner conf React Advanced London (🇬🇧 London - 25 & 28 October). We really like the idea of advanced React talks, and so far the lineup doesn't disappoint! 👌


💡 Subscribe to the official newsletter to receive an email every week!

banner


💸 Sponsor

Are your React PR reviews turning into component chaos?

Are your React PR reviews turning into component chaos?

Discover strategies to streamline your React PR reviews and elevate your team's focus to critical aspects of code quality. We'll review every PR with dependency management, code reconciliation & more, allowing your team to concentrate on architectural decisions, component design, and performance optimizations.

CodeRabbit helps with:

  • Best Practice Enforcement: Leverage CodeRabbit's ability to identify common React anti-patterns and suggest best practices, ensuring good code quality.

  • Component Structure Review: Benefit from a thorough summary of your component structure, receiving suggestions for better composition.

  • Actionable Code Review Comments: Fix the code right in the PR, with 1-click commit suggestion.

CodeRabbit is free for all open-source repo's. Get started today!


⚛️ React

Waku v0.21 - Full support for React Server Actions

Waku v0.21 - Full support for React Server Actions

React Server components have inspired a new wave of “React frameworks”. Waku, created by Daishi Kato (the creator of jotai, valtio…) is one of them. It was one of the first outside of Next.js offering support for server components.

With the addition of Server Actions, most React 19 features are now supported by Waku, and it’s possible to develop full apps while skipping the “have an API” part.


From React to Effect

From React to Effect

Michael Arnaldi, the creator of Effect, explains how the models used by Effect and React are similar. While Effect is a powerful toolkit, it’s quite hard to get started with, almost like a new language, so drawing parallels with what we’re already familiar with can help.

In Effect, just like with React, most of the code you write is a “blueprint”: you declare what your program should do without running it directly. Then the library (React of Effect) takes care of running it.



💸 Sponsor

Visual testing for Storybook, Playwright & Cypress

Visual testing for Storybook, Playwright & Cypress

Tired of broken layouts and janky UI slowing you down? Chromatic’s visual tests allow you to build with confidence. They catch bugs that functional tests miss, from misaligned elements to incorrect colors and z-index glitches.

No need for separate test cases or configuration. Chromatic plugs into your existing setup for Storybook, Playwright, or Cypress to enable visual testing of your application's UI. All tests run in parallel — at no extra cost — powered by Chromatic’s lightning-fast Capture Cloud infrastructure.

Setup takes just two minutes, and our base plan includes 5,000 free snapshots per month. Get started today »


📱 React-Native

React Native 0.75

This week marks the release of React Native 0.75, where the core team has reinforced their recommendation to use a React Native framework like Expo for building production-ready apps. Reflecting this shift, the /template folder has been removed from the core react-native package, and the react-native init command is set to be deprecated by the end of 2024, though both will still be accessible within the @react-native-community packages. Notably, this update brings significant improvements, including enhanced performance during the auto-linking build phase and the addition of Yoga 3.1, which now supports the use of percentages for gap, columnGap, rowGap, and translation props when the new architecture is enabled. With these advancements, it's clear that adopting the new architecture is crucial for staying up to date with the latest features and stability improvements.



🔀 Other


🤭 Fun

alt

alt

See ya! 👋

Did you find this article valuable?

Support Sébastien Lorber by becoming a sponsor. Any amount is appreciated!