--- title: "An interactive guide to React rendering" publication: "React Status" issue: 337 published_at: "2023-05-03" canonical_url: "https://react.statuscode.com/issues/337" --- Plus React Native for macOS grows up, and what exactly are React server components? | #​337 — May 3, 2023 [Read on the Web](https://react.statuscode.com/issues/337) Together with [![Kontent.ai\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_320,h_100/e_make_transparent/co_white,e_outline:4/kishpd4z3cddmgekpc7p.png)](https://kontent.ai/developers/?utm_source=reactstatus&utm_medium=cooperpress_newsletter&utm_campaign=q4_newsletter_cooperpress) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/qa7y8swnozvenfoe1k9g.jpg)](https://vercel.com/blog/vercel-storage) [Vercel Introduces First-Class Storage Options](https://vercel.com/blog/vercel-storage) — Vercel is a popular platform for deploying React apps but has lacked obvious options for data storage (indeed, they have a lot of [templates](https://vercel.com/guides/using-databases-with-vercel#templates) for common third party systems). Now, though, they’ve partnered with Upstash, Neon, and Cloudflare to offer new _first-class_ key/value, Postgres, and file storage options. Vercel Inc. [The Interactive Guide to Rendering in React](https://ui.dev/why-react-renders) — This interactive guide explores why, when and how React renders and illustrates it with a series of short and well thought out animations. Tyler McGinnis [![\](https://copm.s3.amazonaws.com/2fb5ddb5.png)](https://kontent.ai/developers/?utm_source=reactstatus&utm_medium=cooperpress_newsletter&utm_campaign=q4_newsletter_cooperpress) [Modular Content Management for Tech Teams with Kontent.ai](https://kontent.ai/developers/?utm_source=reactstatus&utm_medium=cooperpress_newsletter&utm_campaign=q4_newsletter_cooperpress) — Streamline your code and scale with ease using Kontent.ai's headless CMS. TypeScript SDK, CLI, rich text resolver & strongly typed model generator for flexible and scalable content management. Try it now. Kontent.ai sponsor [Bulletproof React: A Scalable Architecture for Production-Ready Apps](https://github.com/alan2207/bulletproof-react) — A long standing resource that continues to get updates and deserves another look. It’s not a boilerplate app or framework itself but an opinionated guide to how you could structure a large scale React app if you’re lacking for inspiration. Alan Alickovic [Build a Type-Safe Tailwind with _Vanilla Extract_](https://www.highlight.io/blog/typesafe-tailwind) — A look at how a team built a type-safe alternative to Tailwind using [Vanilla Extract](https://vanilla-extract.style/), a way to write type-safe CSS where the final static CSS files are generated at build time. Chris Schmitz (Highlight) [So Exactly What Are React Server Components?](https://www.viget.com/articles/what-even-are-react-server-components/) — There’s always room for another explanation of [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023), particularly one which makes few assumptions about prior knowledge and provides easy-to-follow examples. Nick Telsan (Viget) [Server Components vs. SSR in Next.js](https://www.webscope.io/blog/server-components-vs-ssr) comes at the question from a different direction. [Crafting the Next.js Website](https://rauno.me/craft/nextjs) — The [official Next.js site](https://nextjs.org/) is impressive, but what went into it? One of the designers shares some of the implementation details which aren’t _particularly_ React-y but may prove inspiring to you. Rauno Freiberg [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/b2izfu2qddodpkv3hlnd.jpg)](https://www.julienthibeaut.xyz/blog/create-bento-grid-layouts) [Creating 'Bento' Grid Layouts in React](https://www.julienthibeaut.xyz/blog/create-bento-grid-layouts) — Refers to a grid-like style of layout commonly associated with Apple product pages or Windows 8. Julien Thibeaut [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication?utm_source=react-statuscode-com&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=react_authentication) — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications. Userfront sponsor [Making Animated Tooltips with React and Framer Motion](https://sinja.io/blog/animated-tooltip-with-react-framer-motion) — Given there’s a fairly good chance tooltips could be the only ‘documentation’ that will actually get read, why not jazz them up a little? Oleg Wock [Building a WebGL Carousel with React Three Fiber and GSAP](https://tympanus.net/codrops/2023/04/27/building-a-webgl-carousel-with-react-three-fiber-and-gsap/) — The [end result](https://tympanus.net/Tutorials/WebGLCarousel/) is visually striking. Fabio Ottaviani [Connecting React, MUI and TypeScript Together](https://levelup.gitconnected.com/connecting-react-mui-typescript-together-736c5e15e3ab) Snehasish Konger 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ewamylkstmycoevvdyvl.jpg)](https://devblogs.microsoft.com/react-native/2023-04-27-announcing-macos-71/) [Introducing React Native macOS 0.71](https://devblogs.microsoft.com/react-native/2023-04-27-announcing-macos-71/) — With this version, the macOS flavor of React Native catches up with its iOS, Android and Windows cousins, and they want to keep it that way in future. v0.71 introduces an experimental preview of [_Fabric_](https://reactnative.dev/architecture/fabric-renderer) (React Native’s new rendering system) and more. Saad Najmi [Mock Service Worker 1.2: REST/GraphQL API Mocking Library](https://mswjs.io/) — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. [GitHub repo.](https://github.com/mswjs/msw) Artem Zakharchenko [Dynaboard: A Low-Code Web App IDE Made for Developers](https://dynaboard.com/?utm_source=cooperpress-rs&utm_medium=email&utm_campaign=low-code-q22023) Dynaboard sponsor [next-sitemap: Sitemap Generator for Next.js Apps](https://github.com/iamvishnusankar/next-sitemap) — Generates sitemaps and `robots.txt` for static, pre-rendered, dynamic, and server-side pages. Vishnu Sankar - [Tremor 2.4](https://github.com/tremorlabs/tremor) ↳ The React library to build dashboards fast. - [React-Easy-Edit 1.16](https://github.com/giorgosart/react-easy-edit) ↳ Inline editing library. ([Sandbox.](https://codesandbox.io/s/react-easy-edit-sandbox-2y97j)) - [React Suite 5.33](https://github.com/rsuite/rsuite/releases/tag/v5.33.0) ↳ Suite of React components. - [Sandpack 2.6.2](https://github.com/codesandbox/sandpack) ↳ Create live-running code editing experiences. Jobs [Team Lead Web Development](https://www.komoot.com/jobs/9C5B6E4C0B/team-lead-web-development) — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors. Komoot [Find React Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-reactstatus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired This issue was curated by Terence C. Gannon and Peter Cooper and edited by the Cooperpress team. 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