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

PublishedAugust 23, 2024

•8 min read•View as Markdown

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

Sébastien Lorber

Part of seriesThis Week In React

Comments (1)

Join the discussion

Caleb Bish1y ago

HIRE DIGITAL HACK RECOVERY FOR BEST STOLEN CRYPTO RECOVERY SERVICES ONLINE

Navigating the complexities of legal practice involves a great deal of precision and care, and I had always been diligent about securing my financial assets. Despite this, I found myself in a distressing predicament when I lost access to my Bitcoin wallet containing $300,000. The problem began when a computer crash wiped out my encrypted wallet file, leaving me unable to retrieve my funds. The situation was particularly dire as the money was crucial not only for personal savings but also for maintaining the financial stability of my practice .The initial panic was overwhelming. Despite my usual preparedness for any legal or financial issue, this felt like an insurmountable obstacle. I explored every possible solution, from consulting IT specialists to trying various recovery tools, but to no avail. My frustration grew as the days passed with no progress .During my search for help, I discovered DIGITAL HACK RECOVERY. Although I was initially skeptical, the gravity of the situation pushed me to give them a chance. From our first interaction, I was impressed by their professionalism and empathy. They understood the urgency of my case and were transparent about the recovery process. What stood out was their comprehensive approach. DIGITAL HACK RECOVERY didn’t just focus on recovering my wallet; they also provided valuable advice on enhancing my digital security. They introduced me to advanced encryption techniques and secure backup practices that I hadn’t previously considered. This not only helped in recovering my lost Bitcoin but also strengthened my overall financial security. The waiting period was fraught with anxiety and uncertainty. However, DIGITAL HACK RECOVERY kept me informed and reassured throughout the process. When they successfully recovered my wallet, the relief was immense. I felt a tremendous weight lifted off my shoulders and regained confidence in managing financial setbacks. This experience underscored the importance of having a robust backup plan and the right tools in place, no matter how prepared you think you are. Thanks to DIGITAL HACK RECOVERY, I not only regained access to my funds but also gained a deeper understanding of digital asset security. Their expertise and support were truly invaluable, and I wholeheartedly recommend their services to anyone facing similar challenges. If you ever find yourself in a bind, DIGITAL HACK RECOVERY is the team you need on your side .Reach out to DIGITAL HACK RECOVERY via their contact WhatsApp +19152151930

https :// digital hack recovery . com

digital hack recovery @ techie . com

This Week In React

Part 40 of 50

All editions of the ThisWeekInReact.com newsletter

Up next

This Week In React #196 : Forms, Jotai, DI, Electron, Docusaurus, Signals, Plunk, React-Server, Switchboard, React-Call, RN WebGPU, Nitro Modules...

Hi everyone! This week, we welcome 2 new contributors to help ensure the continuity of the newsletter throughout the year, even when Seb takes a break. Cyril and Matthieu from Theodo Apps (formerly BAM) here 👋, filling in to bring you the latest new...

More from this blog

This Week In React #239 : ViewTransition, Suspense, TanStack, Zero, use-mcp, Compiler, Intl-T | 0.80, Stable APIs, iOS prebuilds, shadcn, Expo...

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...

Jun 20, 20256 min read88

This Week In React #239 : ViewTransition, Suspense, TanStack, Zero, use-mcp, Compiler, Intl-T | 0.80, Stable APIs, iOS prebuilds, shadcn, Expo...

This Week In React #238: React Router, RSC, shadcn/ui, React Aria, TanStack, ForesightJS, Cosmos | iOS 26, JSI, Nitro, WebView, Windows, Tabs...

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 ...

Jun 13, 20256 min read47

This Week In React #238: React Router, RSC, shadcn/ui, React Aria, TanStack, ForesightJS, Cosmos | iOS 26, JSI, Nitro, WebView, Windows, Tabs...

This Week In React #237 : RSC, TanStack, Storybook, Lingo Compiler, LiveStore, Base UI | Legacy Arch, Hermes N-API, 120fps, ReactRaptor, DevTools | TC

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...

Jun 6, 20258 min read28

This Week In React #237 : RSC, TanStack, Storybook, Lingo Compiler, LiveStore, Base UI | Legacy Arch, Hermes N-API, 120fps, ReactRaptor, DevTools | TC

This Week In React #236 : Remix, TanStack, RSC, RedwoodSDK, Storybook, Docusaurus | ExecuTorch, Screens, FlashList, Reanimated, Expo, EAS, Radon...

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...

Jun 3, 20255 min read31

This Week In React #236 : Remix, TanStack, RSC, RedwoodSDK, Storybook, Docusaurus | ExecuTorch, Screens, FlashList, Reanimated, Expo, EAS, Radon...

This Week In React #235: React Router, createStore, SuspenseList, Transition Indicator, Compiler, RenderHooks, Waku, React-Scan | Expo, Lava, Fortnite

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...

May 24, 20258 min read27

This Week In React #235: React Router, createStore, SuspenseList, Transition Indicator, Compiler, RenderHooks, Waku, React-Scan | Expo, Lava, Fortnite

Sébastien Lorber

154 posts

React dev

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!

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

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

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.

💸 TutorialKit — Create interactive tutorials instantly without building or managing any backend infrastructure.
🗓️ reactjsday - 🇮🇹 Verona - 25 October - Get a 10% discount with code "TWIR". A, B and C will speak !
🗓️ Squiggle Conf - 🇺🇸 Boston - 03 & 04 October - Get a 10% discount with code "TWIR". Speakers are announced, please take a tour on the conf website.
📜 Tips from 8 months of TanStack/Router in production: Swizec Teller shares the guiding principles he applies, for instance when he uses loaders, suspense queries or queries
📜 React is (becoming) a Full-Stack Framework: With the addition of Server Components and Server Actions
📜 Synchronizing State In React: Explains how to solve a classic bug “the right way”, not with a useEffect but by splitting components
📜 Building Swipe Actions component with React and Framer Motion
📜 useStateObject: A Simple, Convenient API Around useState
📜 How to Build a React Hook That Handles Sequential Requests - Using an AbortController
📜 Generate a PDF in React - html2pdf.js, React PDF, and Puppeteer
📜 Preact - Prerendering with Preset Vite
📜 Good Refactoring vs Bad Refactoring
📜 How Valtio Was Born
📦 Astro v4.14 - Experimental Content Layer API with Intellisense support in content files
📦 react-three/xr 6.2.0: Adds unbounded spaces, depth sensing, and secondary input sources
📦 react18-use: Daishi Kato created a shim of the React 19 use hook that works in React 18. Includes the ability to 🐦 call use(Context) inside useMemo (experimental), a better alternative to context selectors the React team plans to implement.
📦 Formity: Define complex forms with a JSON structure, let the package handle the heavy-lifting
📦 rspack-plugin-react-refresh v1.0
🎙️ PodRocket - Generative UI and React components with Malte Ubl
🎥 Jack Herrington - Secret React-Native Hack For React Web Devs! - use patch-package to patch a dependency not working with Server Components

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.