--- title: "React Server Components explained" publication: "React Status" issue: 354 published_at: "2023-09-13" canonical_url: "https://react.statuscode.com/issues/354" --- Plus keeping you in Suspense, and refuting six reasons to not use React. | #​354 — September 13, 2023 [Read on the Web](https://react.statuscode.com/issues/354) Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/sale/?utm_source=email&utm_medium=reactstatus&utm_content=sale) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/t04yynw0wxvhptqay9c4.jpg)](https://www.joshwcomeau.com/react/server-components/) [Making Sense of React Server Components](https://www.joshwcomeau.com/react/server-components/) — React Server Components have attracted a _lot_ of attention this year, with Dan Abramov even creating a somewhat technical [‘let’s reimplement RSCs from scratch’ guide](https://github.com/reactwg/server-components/discussions/5) to hammer the concepts home. This post, however, demystifies what RSCs are, why they matter, and the opportunities they’re opening up, in an easy to follow way. Josh W Comeau [How to Pass a Component as a Prop in React](https://www.totaltypescript.com/pass-component-as-prop-react) — Some different ways to pass a component as a prop in a type-safe manner: passing JSX, using `React.ComponentType`, and using `React.ElementType`. Matt Pocock [![\](https://copm.s3.amazonaws.com/e07880b0.png)](https://frontendmasters.com/sale/?utm_source=email&utm_medium=reactstatus&utm_content=sale) [Find Your Perfect Course or Learning Path with Frontend Masters](https://frontendmasters.com/sale/?utm_source=email&utm_medium=reactstatus&utm_content=sale) — The Exploration Sale is live! Get access to over 200 courses, all with revamped learning paths. There's a slew of new workshops and courses on the way too, covering TailwindCSS, TypeScript, accessibility, algorithms, Angular, JavaScript and much more. Frontend Masters sponsor [React Suspense in Three Different Architectures](https://elanmed.dev/blog/suspense-in-different-architectures) — Suspense provides a way to make components more asynchronous and able to wait for some condition (such as loading content from the server) before they render without affecting the rest of the page. This article shows how Suspense can work alongside client-side rendering, server-side rendering, _and_ server components. Elan Medoff [Server-Side Rendering (SSR) with Bun and React](https://alexkates.dev/server-side-rendering-ssr-with-bun-and-react) — [Bun 1.0](https://bun.sh/blog/bun-v1.0), a performance oriented alternative server-side JS runtime, has finally been released. To better understand how it can be employed with React, this case study walks through an example. Alex Kates _IN BRIEF:_ - Lei Mao has a cute example of using React in an ad-hoc way on a web page [to dynamically render an analog clock.](https://leimao.github.io/blog/Real-Time-React-Analog-Clock/) No build step. No JSX. - Microsoft has a page looking at [who's using React Native for Desktop](https://microsoft.github.io/react-native-windows/resources-showcase). [React Native for Windows + macOS](https://microsoft.github.io/react-native-windows/) adds support for the Windows SDK and the macOS 10.14+ SDK to React Native. - 📅 [reactjsday 2023](https://2023.reactjsday.it/) is taking place in Verona, Italy (and online) on October 27. Speakers include Rachel Nabors, Tejas Kumar, and Fabio Biondi. - ▶️ Jack Herrington responds to [six reasons to not use React](https://www.youtube.com/watch?v=4QFI4Fd4e0o) that someone posted to Reddit. - 🐦 A quick peek at [React Native running on the Apple Vision Pro... simulator.](https://twitter.com/o_kwasniewski/status/1701626162521190688) [What I Learnt Building a React Toast Component](https://emilkowal.ski/ui/building-a-toast-component) — Emil is the creator of [Sonner](https://sonner.emilkowal.ski/), a popular toast notifications component. Emil Kowalski [An Alternative to Using State for React Forms](https://hackernoon.com/stop-using-state-for-react-forms-there-is-a-much-better-way) — Making the case for using `FormData` instead of `useState`, although there are pros and cons to take into account. Nirmal Kumar [Well, Crud … The Person Who Can Do That Is Gone!](https://link.testdouble.com/now-what) — And yet you still need to get stuff done and ship features. We can help you figure it out and keep it that way. Let’s go! Test Double sponsor [A Guide to React Portals](https://semaphoreci.com/blog/react-portals) — Portals let you render some children into a different part of the DOM / outside the current hierarchy. Temitope Oyedele [A Walkthrough of Creating and Deploying a Next.js 13 App on Azure](https://drag13.io/posts/create-new-nextjs-app-with-prettier-eslint-tests/index.html) — How to create a Next.js app with Prettier, ESLint, Husky, Jest, and deploy it on Azure. Drag13 [Challenging Established Norms: Making Component Fetching the Exception](https://jjenzz.com/making-component-fetching-the-exception/) Jenna Smith 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/om6yszq8o3ff0hrg2yyh.jpg)](https://www.next-nav.com/) [Next.Nav: VS Code Extension to Work with Next.js App Routes](https://www.next-nav.com/) — Provides an interesting way to look at and navigate around the routes available in a Next.js app. OSLabs Beta [ReacType 17.0: React Apps Without the Dev Time?](https://medium.com/@martinsvictor287/introducing-reactype-17-0-your-react-app-without-the-dev-time-e995f2bade6c) — [ReacType](https://www.reactype.dev)—a prototyping tool we have covered periodically in the past—has just released a brand new version with new features including a “collaboration-focused component marketplace”. Victor Martins 📰 Classifieds 📅 **The AI Event of the year is happening this October 8-10 in SF.** _The AI Engineer Summit_ congregates 500 founders, developers, and others working with and shipping AI features and apps, including speakers from companies like OpenAI, GitHub, Replit, AutoGPT, and Amazon. You can [apply to attend](https://ai.engineer/summit) or [get a free remote ticket](https://ai.engineer/summit) to tune in from anywhere. --- 💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. [Create a free profile now](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). [React Tag Autocomplete 7.1](https://github.com/i-like-robots/react-tag-autocomplete) — A flexible and accessible tagging component that makes it easy to guide users when choosing tags. See it in action in [the demo](https://i-like-robots.github.io/react-tag-autocomplete/). Matt Hinchliffe [React Plock: A 1KB Masonry Grid Component](https://github.com/askides/react-plock) — TypeScript-ready and it’s easy to customize the grid columns and rows for responsive layouts in the style of Unsplash, say. Renato Pozzi - [Ant Design 5.9](https://ant.design/) – A popular 'enterprise-class' design language and UI library targeting React apps. They also have an interesting post about [the development of their new color picker component.](https://ant.design/docs/blog/color-picker) - [Sandpack 2.7](https://github.com/codesandbox/sandpack) ↳ Components for creating live code editing experiences. - [React Stripe.js 2.3](https://github.com/stripe/react-stripe-js) ↳ Adds beta support for [Embedded Checkout.](https://github.com/stripe/react-stripe-js/pull/440) - [React Icons 4.11](https://github.com/react-icons/react-icons/releases/tag/v4.11.0) ↳ Use popular icon packs more easily with React. - [React-Grid-Layout 1.4.1](https://github.com/react-grid-layout/react-grid-layout) ↳ Draggable and resizable responsive grid layout. - [Goxygen 0.7](https://github.com/Shpota/goxygen) ↳ Generate a Go(lang) + React project quickly. - [Typist 1.5](https://github.com/Doist/typist) ↳ Tiptap-based rich-text editor component. - [📅 React Date Picker 4.17](https://github.com/Hacker0x01/react-datepicker) – There's [a demo](https://reactdatepicker.com/). - [Vaul 0.6](https://github.com/emilkowalski/vaul) – Unstyled drawer component. 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