--- title: "Quickly scan your app for problematic renders" publication: "React Status" issue: 407 published_at: "2024-11-20" canonical_url: "https://react.statuscode.com/issues/407" --- Plus some Vercel updates, controlled vs uncontrolled components, and a simple way to put pie charts in your app. | #​407 — November 20, 2024 [Read on the Web](https://react.statuscode.com/issues/407) 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/EWWK3UW) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/zzmw8yvmmuiayrsieps6.jpg)](https://react-scan.million.dev/) [React Scan: Detect Performance Issues in Your App](https://react-scan.million.dev/) — A pure JavaScript tool you can drop into your app to automatically ‘scan’ for problematic renders without doing lots of integration work. There’s a simple demo on the homepage or you can see Aiden’s [view of Twitter/X being scanned](https://x.com/aidenybai/status/1857092333184958900). [GitHub repo.](https://github.com/aidenybai/react-scan) Aiden Bai [Payload 3.0: A Headless Next.js-Native CMS Platform](https://payloadcms.com/blog/payload-30-the-first-cms-that-installs-directly-into-any-nextjs-app) — An open source, headless CMS with a customizable React-based admin system, GraphQL and REST APIs, flexible auth, file uploads, etc. _“Payload is the only Next.js CMS—in a way that no other CMS can come close to,”_ they claim. [GitHub repo.](https://github.com/payloadcms/payload) James Mikrut [![\](https://res.cloudinary.com/cpress/image/upload/c_limit,w_480,h_480,q_auto/copm/3ad3b33d.jpg)](https://go.clerk.com/EWWK3UW) [Introducing `@clerk/nextjs` V6, with Support for Next.js 15](https://go.clerk.com/EWWK3UW) — With v6, the `auth()` helper is now asynchronous, `` defaults to static rendering instead of dynamic, and support for partial pre-rendering has been introduced. Learn more about v6 updates and follow our guide to upgrade. Clerk sponsor [Uncontrolled or Controlled: A Matter of Perspective?](https://buildui.com/posts/uncontrolled-vs-controlled-a-matter-of-perspective) — Controlled components have state managed by React, while uncontrolled components store their state in the DOM, but sometimes it’s a bit more complicated than that, as Sam demonstrates here. Sam Selikoff **IN BRIEF:** - _Vercel Blob_, Vercel's object storage service, [now supports tracking file upload progress](https://vercel.com/changelog/vercel-blob-now-supports-file-upload-progress) so you can show this info to your users. - 🤖 Vercel has also released the latest version of its AI APIs, [AI SDK 4.0](https://vercel.com/blog/ai-sdk-4-0). - 📺 We're always linking to Robin Wieruch's fantastic React blog posts ([a classic example](https://www.robinwieruch.de/react-redux-tutorial/)), so it only seems fair to link to [_The Road to Next_](https://www.road-to-next.com/), his new Next.js 15 and React 19 course. _(It does cost money though.)_ - Expo Router now has [support for universal React Server Components](https://expo.dev/blog/universal-react-server-components-developer-preview) (yes, in native apps!) in preview. - Over on the _other side_ of the tracks, [Angular 19](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84) has been released with incremental hydration in developer preview. [Building React Forms with Ease Using React Hook Form, Zod and Shadcn](https://wasp-lang.dev/blog/2024/11/20/building-react-forms-with-ease-using-react-hook-form-and-zod) — I exaggerate, but it seems there are almost as many ways to create forms in React as there React developers, but here’s one developer’s clean, modern approach. Boris Martinović ▶[A Look At `“use cache”`, Next.js's Latest Take on Data Caching](https://www.youtube.com/watch?v=ZDRGEewXkrs) — Explained in Jack’s usual tight, expertful fashion. _(17 minutes.)_ Jack Herrington 📄 [Google OAuth in React: A Beginner’s Guide to Authentication](https://marmelab.com/blog/2024/11/18/google-authentication-react.html) Erwan Bourlon (Marmelab) 📄 [Impressions of React and TypeScript from an Elixir/Elm Developer](https://korban.net/posts/elm/2024-11-16-typescript-react-impressions/) – He’s not a fan, but sometimes it’s interesting to see the perspective of an outsider. Alex S. Korban 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/mcmgpmp17f4tfp8prooj.jpg)](https://github.com/toomuchdesign/react-minimal-pie-chart) [Minimal Pie Chart: Versatile, Lightweight SVG Pie and Donut Charts](https://github.com/toomuchdesign/react-minimal-pie-chart) — Pass in your data and colors via props, and you’re done. [Demos here.](https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/) Could be handy if you don’t want to pull in an entire full-scale charting library as it comes in at under 2KB gzipped. Andrea Carraro 🤖 [Vercel's AI Chatbot Starter Template](https://github.com/vercel/ai-chatbot) — An open source AI chatbot app template built using Next.js. It uses Vercel’s AI SDK and other Vercel APIs for the heavy lifting. Vercel [react-svg 16.2: Component to Inject SVG into the DOM](https://github.com/tanem/react-svg) — Rather than embedding SVG with `img` or an `iframe` or even CSS, you can get more control by putting SVG directly into the DOM. Tane Morgan 📰 Classifieds Calling all ⚛️ devs: [Join Sentry Launch Week](https://sentry.io/events/launch-week/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q4-launchweek&utm_content=newsletter-fy25q4-launchweek-register) for daily YouTube videos at 9am PT and live Discord chats with our engineers! --- [Meticulous automatically creates & maintains E2E UI tests](https://www.meticulous.ai?utm_source=react_status&utm_campaign=november8th). Zero flakes. Used by Lattice, Bilt Rewards and others. [Satori 0.12.0: Convert HTML and CSS to SVG](https://github.com/vercel/satori) — Designed to be used with React and JSX. It doesn’t support all HTML but is designed to provide a familiar way to generate images from code (such as [for Open Graph graphics](https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images), say). Vercel [Solito 4.3: A Way to Use React Native with Next.js](https://solito.dev/) — A wrapper around React Navigation and Next.js that lets you share navigation code when building cross-platform apps. v4.3 now supports React Navigation v7. Fernando Rojo - 📊 [Mantine v7.14.0](https://mantine.dev/changelog/7-14-0/) – The popular React component suite adds new 'angle slider', radial bar chart, funnel chart, and stacking moral/drawer components. You can also fill your barcharts [using SVG patterns](https://mantine.dev/changelog/7-14-0/#barchart-svg-pattern-fill) for that 1990s _Microsoft Works_vibe. - 📤 [React Native Share 11.1](https://github.com/react-native-share/react-native-share) – Share data to other (social) apps. This release improves Instagram Stories support. - [react-native-permissions 5.2](https://github.com/zoontek/react-native-permissions) – Unified permissions API for React Native on iOS, Android and Windows. v5.2 adds tvOS support. - 📺 [react-native-video 6.8](https://github.com/TheWidlarzGroup/react-native-video) – A `