---
title: "Improving your React app's responsiveness"
publication: "React Status"
issue: 409
published_at: "2024-12-04"
canonical_url: "https://react.statuscode.com/issues/409"
---

Plus a Figma-like design app for React apps, as well as a new React Native IDE. |        

#​409 — December 4, 2024 

[Read on the Web](https://react.statuscode.com/issues/409)  

Together with [![Clerk\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_220,h_64/e_make_transparent/co_white,e_outline:5/j3vhv1hnwqeffgkzzlvu.png)](https://go.clerk.com/4u78q7n)  React Status  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/wf636vnzukbr5gm9hoty.jpg)](https://onlook.dev/)  

[Onlook: An Open-Source 'Figma'-Style Design App for React](https://onlook.dev/) — A new open source, local-first Figma style design app (for Windows, Linux and macOS) that targets React use cases. You can design layouts directly on a live page and instantly write your changes to code. Early days but looks very promising. [GitHub repo.](https://github.com/onlook-dev/onlook) 

On Off Inc.   

📉 [How To Improve 'Interaction to Next Paint' in React](https://kurtextrem.de/posts/improve-inp-react) — [Interaction to Next Paint (INP)](https://web.dev/articles/inp) is a common Web performance metric based on the latency and responsiveness of an app to user interactions, and Google even uses it as part of its ranking mechanism. Jacob offers up lots of advice and resources for improving your INP situation in React apps. 

Jacob 'Kurt' Groß   [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/6c025860.png)](https://go.clerk.com/4u78q7n) 

[Introducing <`Waitlist/`> Mode - A Virtual Queue for Your App](https://go.clerk.com/4u78q7n) — Waitlist is a new sign-up mode and component that lets users register interest and join a waitlist for early access to your product. Manage user access and onboarding all within your Clerk Dashboard. Read our changelog announcement for more details. 

Clerk sponsor   

**IN BRIEF:** 

- Fancy building an immersive WebXR experience using [React Three XR](https://pmndrs.github.io/xr/docs/getting-started/introduction)? The Meta Quest team [has an extensive tutorial for you.](https://github.com/meta-quest/webxr-first-steps-react)
- If you're on _X_ still, it's well worth [following Aiden Bai](https://x.com/aidenybai), the creator of [React Scan.](https://react-scan.com/) He's been putting lots of major React-powered sites through their paces ([such as Apple's](https://x.com/aidenybai/status/1863382922369315231)) and finding all sorts of rendering problems with it.
- 🔥 [Astro 5.0](https://astro.build/blog/astro-5/) has been released.   

[React Data Fetching Patterns](https://www.robinwieruch.de/react-data-fetching-patterns/) — Not about [_how_ to fetch data in React apps](https://www.robinwieruch.de/react-fetching-data/), but some common patterns to structure said fetching. 

Robin Wieruch   

[Component Testing RSCs with Storybook](https://storybook.js.org/blog/component-testing-rscs/) — Testing server components can be tricky because they span the frontend/backend divide, but Storybook offers a way and here’s how. 

Michael Shilman   

📄 [Why I Forever Ditched React for Go, HTMX and Templ](https://blog.erodriguez.de/dependency-management-fatigue-or-why-i-forever-ditched-react-for-go-htmx-templ/) – Always be sure to find a solution that works for _you._ Eduardo Rodriguez 

📄 [How to Code a Shader Based Reveal Effect with React Three Fiber and GLSL](https://tympanus.net/codrops/2024/12/02/how-to-code-a-shader-based-reveal-effect-with-react-three-fiber-glsl/) Colin Demouge 

📄 [Real-Time Font Management in Expo](https://medium.com/@valentineminer27/real-time-font-management-in-expo-2dc107fc89d1) Mauro Garcia  

🛠 Code, Tools & Libraries 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ebsj9fbygbxdbo7ykznr.jpg)](https://mui.com/x/)  

[MUI X 7.23.0: Advanced React Components for Complex Use Cases](https://mui.com/x/) — We’ve diligently linked to each new release of this popular suite of React components, but never featured it “properly”, so it’s about time we did! MUI X is a well rounded suite of professionally designed and MIT-licensed components. [v7.23.0](https://github.com/mui/mui-x/releases/tag/v7.23.0) improves the data grid component and adds full React 19 support. 

MUI   

[Radon IDE 1.0: An IDE for React Native Development](https://ide.swmansion.com/) — [Formerly known](https://blog.swmansion.com/react-native-ide-is-now-radon-ide-cfbdad77d43c) as _React Native IDE_, Radon is an extension that significantly extends either VS Code or Cursor into a fully fledged IDE for React Native (and Expo) development. It _is_ a paid product, however, but all the money is funneled back into open source React Native development and the feature set might convince you of its value. 

Software Mansion      

📰 Classifieds   

[Debugging faster with AI](https://sentry.io/resources/debug-faster-sentry-ai-live-demo/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q4-ai-workshop&utm_content=newsletter-fy25q4-ai-workshop-register). Join our live demo about smarter alerts, issue summaries, and suggested fixes to get you back to building faster. 

--- 

💚 We've just sent the [latest issue of Node Weekly](https://nodeweekly.com/issues/558) which includes some cool updates on a powerful server-side canvas library, Prisma 6, and a big update to Node's Undici HTTP client.     

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/z8piuk4osaehcdwj5kph.jpg)](https://andreaswilli.github.io/react-verification-input)   

[Verification Input: Customizable, Masked Input Component](https://andreaswilli.github.io/react-verification-input) — Check out the demos on the homepage, but this is well suited for entering OTP codes, certain types of password, and the like. [GitHub repo.](https://github.com/andreaswilli/react-verification-input) 

Andreas Willi   

🦋 [react-bluesky-embed: Embed Bluesky Functionality in Your App](https://github.com/hichemfantar/react-bluesky-embed) — A lot of folks think social microblogging site [Bluesky](https://bsky.app) is ‘having its moment’. If you’re one of them, you can now embed that functionality right into your own app. 

Hichem Fantar   

- 📊 [React JSX Highcharts 5.0.2](https://github.com/whawker/react-jsx-highcharts) – Highcharts built with proper React components. Now supporting Highcharts v12.
- 🍩 [Minimal Pie Chart 9.0](https://github.com/toomuchdesign/react-minimal-pie-chart) – Flexible, lightweight pie and donut chart component.
- [Yoga 3.2](https://www.yogalayout.dev/blog/announcing-yoga-3.2) – Meta's portable layout engine used by React Native 0.77.
- [React Easy Crop 5.2](https://github.com/ValentinH/react-easy-crop) – Component for cropping images and videos. ([Demo.](https://valentinh.github.io/react-easy-crop/))
- [React Native Skia 1.6](https://github.com/Shopify/react-native-skia) – High-performance 2D graphics for React Native.
- [React Native SVG 15.10](https://github.com/software-mansion/react-native-svg) – Cross-platform SVG support for React Native.
- [TanStack Form 0.39](https://github.com/TanStack/form/releases/tag/v0.39.0) – Powerful, type-safe Web form state management.
- [React Icons 5.4](https://github.com/react-icons/react-icons) – Popular icon sets ready for use in React apps.
- [BlockNote 0.20](https://github.com/TypeCellOS/BlockNote/releases/tag/v0.20.0) – 'Notion-style' block-based editor.         

Curated by Peter Cooper and Terence C. Gannon. 

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom