--- title: "Three hours of modern React" publication: "React Status" issue: 382 published_at: "2024-04-24" canonical_url: "https://react.statuscode.com/issues/382" --- Plus how Zustand works internally, being prepared for React 19, and React Native 0.74 released. | #​382 — April 24, 2024 [Read on the Web](https://react.statuscode.com/issues/382) Together with [![Stream logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_360,h_94/e_make_transparent/co_white,e_outline:3/umaar74fov5yig6hg1eo.png)](https://getstream.io/video/sdk/react/tutorial/video-calling/?utm_source=newsletter&utm_medium=referral&utm_content=&utm_campaign=reactstatuscooperpress) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/woeqdpyn4y7gpe52e9sf.jpg)](https://www.youtube.com/watch?v=d5x0JCZbAJs) ▶[From 0 to Production - A Modern React Tutorial](https://www.youtube.com/watch?v=d5x0JCZbAJs) — I’d be surprised if you’re not familiar with Theo, but if not, let’s just say he’s a popular developer YouTuber 😉 He may become even _more_ popular thank to this video which, over three hours, covers modern React app development, complete with server components, Next.js, TypeScript, the Drizzle ORM, pnpm, and[shadcn/ui](https://ui.shadcn.com/). Theo GG [React Native 0.74 Released](https://reactnative.dev/blog/2024/04/22/release-0.74) — A significant release of the cross-platform native app framework. It includes the [Yoga 3.0](https://www.yogalayout.dev/blog/announcing-yoga-3.0) layout engine, [bridgeless mode](https://github.com/reactwg/react-native-new-architecture/discussions/174) becomes the default if using _New Architecture_, and Yarn 3 is the default package manager for new projects. The React Native Team [![\](https://copm.s3.amazonaws.com/a766873d.png)](https://getstream.io/video/sdk/react/tutorial/video-calling/?utm_source=newsletter&utm_medium=referral&utm_content=&utm_campaign=reactstatuscooperpress) [Start for Free Today! Build Real-Time Video and Chat in Days](https://getstream.io/video/sdk/react/tutorial/video-calling/?utm_source=newsletter&utm_medium=referral&utm_content=&utm_campaign=reactstatuscooperpress) — Ready to integrate Zoom/WhatsApp style video experience into your React application? Learn how Stream’s Video API can help you get started. Stream sponsor [Getting Your Codebase Ready for React 19](https://thoughtbot.com/blog/get-your-codebase-ready-for-react-19) — Is your app ready for what’s coming up in React 19’s release? A quick look at some of the anticipated changes so far. Adrienne Ross **IN BRIEF:** - 🕹 [The next _React Jam_](https://reactjam.com/spring-2024) online gamedev hackathon takes place this May 16-27. If you're intrigued what sort of things people make, check out [the winning entries from last year](https://summer-2023.reactjam.com/winners). - [An interesting gist that quickly reimplements Zustand's main functionality](https://gist.github.com/arkatsy/7ff5b6cd95fe94b5e480972a0d116aeb) to help you get your head around what it's doing. - Supabase Storage [now supports the S3 protocol.](https://supabase.com/blog/s3-compatible-storage) [Building an Interactive 3D Event Badge with React Three Fiber](https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber) — A tutorial fresh out of Vercel covering how they implemented the virtual lanyard for their [Vercel Ship](https://vercel.com/ship) conference site. Paul Henschel (Vercel) 📄 [How to Manifest Streamlined Authentication: AWS Cognito in a React App](https://evilmartians.com/chronicles/how-to-manifest-streamlined-authentication-aws-cognito-in-a-react-app) Yuri Mikhin 📄 [Did Signals Just Land in React?](https://thenewstack.io/did-signals-just-land-in-react/) Paul Scanlon (The New Stack) 📄 [You Don’t (Always) Need `useState` in React](https://www.nico.fyi/blog/you-dont-need-usestate-in-react) – Nico Prananta 📄 [How I Built a Server-Side Cache with Express for React](https://latitude.hashnode.dev/expressjs-react-server-side-cache) Carlos Sansón 📄 [Making a React Command Palette with Tailwind CSS and Headless UI](https://blog.logrocket.com/react-command-palette-tailwind-css-headless-ui/) – Mayowa Ojo 📺 [Building a Discord Clone using Next.js, TailwindCSS, Clerk, and Stream](https://www.youtube.com/watch?v=5w0hpcq9TME) – In just six hours! Stefan Blos (Stream) 📄 [Latency Numbers Every Frontend Developer Should Know](https://vercel.com/blog/latency-numbers-every-web-developer-should-know) Malte Ubl 🛠 Code, Tools & Libraries [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/gfvfu6aj5gnbljim98sl.jpg)](https://puckeditor.com/) [Puck: A Self-Hosted Visual Editor for React Apps](https://puckeditor.com/) — We mentioned this several months ago but it’s had a lot of updates since, including supporting [viewport switching](https://puckeditor.com/docs/integrating-puck/viewports) (where you can render a Puck preview inside an iframe and get full media query support). [GitHub repo.](https://github.com/measuredco/puck) Measured Corporation Ltd. [React UI Component Libraries: A Large Roundup](https://kinsta.com/blog/react-components-library/) — If you’ve ever found yourself wondering just how many UI libraries are out there for React, this article goes a long way to enumerating and describing what’s currently available. Durga Prasad Acharya 📰 Classifieds 🎹 Fast, Reliable, Multi-Format Barcode Scanning for Web Apps with[STRICH](https://strich.io/?ref=react-status). --- 🗣️"Compared to our previous experiences in the security/auth space, [Userfront is an order of magnitude simpler to use](https://userfront.com/?&utm_source=react-statuscode-com&utm_medium=newsletter_classified_listing&utm_campaign=magnitude&utm_content=transformational)." --- 📆 [Using AI-powered Autofix to fix broken code](https://sentry.io/resources/autofix-workshop/?utm_medium=paid-community&utm_source=reactstatus&utm_campaign=fy25q1-autofixworkshop&utm_content=newsletter-autofixworkshop-register) - Join us on April 25th to preview Autofix and learn how we are using ML to prioritize issues and alerts. [Vision Camera 4.0: Advanced Camera for React Native Apps](https://github.com/mrousavy/react-native-vision-camera/releases/tag/v4.0.0) — A powerful camera library for capturing both photos and videos, but also supporting QR/barcode scanning, different resolutions, aspect ratios, FPS, and even frame processors for doing custom things. v4.0 now lets you draw directly onto a frame using React Native Skia. ([Homepage.](https://react-native-vision-camera.com/)) Marc Rousavy [ReScript 11.1 Released](https://rescript-lang.org/blog/release-11-1-0) — Once known as BuckleScript, [ReScript](https://rescript-lang.org/) is a heavily OCaml-inspired, typed language that compiles to JavaScript and even has a JSX transform built into the language. Traditionally this JSX support was targeted solely at React use cases, but now works with Vue, Preact, and other approaches too. The ReScript Project 📞 [react-phone-number-input: International Phone Number Input](https://catamphetamine.gitlab.io/react-phone-number-input/) — Comes in two variants with and without a country selector. The homepage is packed with demos. [Repo](https://gitlab.com/catamphetamine/react-phone-number-input). Nikolay Kuchumov [Rehackt: React Wrapper to Hide Hooks from the RSC Compiler](https://github.com/phryneas/rehackt) — Intended for library developers, this invisibly wraps `react` so that you’re able to use shared imports with in server-side Next.js code without throwing an error to your users. Has recently blown up in popularity due to being used by [Apollo Client](https://github.com/apollographql/apollo-client). Lenz Weber-Tronic [react-native-circular-progress: Animated Circular Progress Widget](https://github.com/bartgryszko/react-native-circular-progress) — Here’s [how it looks](https://github.com/bartgryszko/react-native-circular-progress?tab=readme-ov-file#example-app). Bart Gryszko - [MistCSS 0.4](https://typicode.github.io/mistcss/) – Create components using only CSS! [v0.4](https://github.com/typicode/mistcss/releases/tag/v0.4.0) adds Hono and CSS variable support. - [React Native Skia 1.2.3](https://github.com/Shopify/react-native-skia) – High-perf 2D graphics for React Native. - [Tailwind Next.js Starter Blog 2.2](https://github.com/timlrx/tailwind-nextjs-starter-blog) – A blogging starter template. - [React Native Share 10.2](https://github.com/react-native-share/react-native-share) – Share data to other (social) apps. - [Keep React 1.3](https://github.com/StaticMania/keep-react/releases/tag/v1.3.0) – Component library built on Tailwind CSS. - [MUI X 7.3](https://github.com/mui/mui-x/releases/tag/v7.3.0) – Popular React component suite. - [TanStack Router 1.30](https://github.com/TanStack/router/releases/tag/v1.30.0) 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