Quickly scan your app for problematic renders

дата:
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
Together with  Clerk
React Status

React Scan: Detect Performance Issues in Your App — 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. GitHub repo.

Aiden Bai

Payload 3.0: A Headless Next.js-Native CMS Platform — 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.

James Mikrut

Introducing @clerk/nextjs V6, with Support for Next.js 15 — With v6, the auth() helper is now asynchronous, <ClerkProvider> 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? — 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:

Building React Forms with Ease Using React Hook Form, Zod and Shadcn — 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 — Explained in Jack's usual tight, expertful fashion. (17 minutes.)

Jack Herrington

📄 Google OAuth in React: A Beginner's Guide to Authentication Erwan Bourlon (Marmelab)

📄 Impressions of React and TypeScript from an Elixir/Elm Developer – He's not a fan, but sometimes it's interesting to see the perspective of an outsider. Alex S. Korban

🛠  Code, Tools & Libraries

Minimal Pie Chart: Versatile, Lightweight SVG Pie and Donut Charts — Pass in your data and colors via props, and you're done. Demos here. 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 — 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 — 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 for daily YouTube videos at 9am PT and live Discord chats with our engineers!

Meticulous automatically creates & maintains E2E UI tests. Zero flakes. Used by Lattice, Bilt Rewards and others.

Satori 0.12.0: Convert HTML and CSS to SVG — 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, say).

Vercel

Solito 4.3: A Way to Use React Native with Next.js — 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 – 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 for that 1990s Microsoft Works vibe.

  • 📤 React Native Share 11.1 – Share data to other (social) apps. This release improves Instagram Stories support.

  • react-native-permissions 5.2 – Unified permissions API for React Native on iOS, Android and Windows. v5.2 adds tvOS support.

  • 📺 react-native-video 6.8 – A <video> component for React Native. v6.8.0 adds react-native-web support.

  • React Stripe 3.0 – React components for Stripe.js and Stripe Elements.

  • Embla Carousel 8.4 – Lightweight carousel library with fluid motion.

  • Viselect 3.7 – Add a desktop-style visual way of selecting elements.

  • Gridstack.js 11.1 – Build responsive interactive dashboards quickly.

  • 🗓️ Schedule-X 2.6 – Material Design event calendar and date picker.

n

Комментарии

Отправить комментарий