--- title: "Figuring out if you should use React Server Components" publication: "React Status" issue: 350 published_at: "2023-08-02" canonical_url: "https://react.statuscode.com/issues/350" --- Plus a new Vite + React boilerplate, sweet state management from Atlassian, and how to create a drag and drop kanban board. | #​350 — August 2, 2023 [Read on the Web](https://react.statuscode.com/issues/350) 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/courses/web-dev-quiz/?utm_source=email&utm_medium=reactstatus&utm_content=webdevquiz) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ycd09dwe1nfbxzoh05hv.jpg)](https://vercel.com/blog/understanding-react-server-components) [Understanding React Server Components](https://vercel.com/blog/understanding-react-server-components) — If you’ve struggled to get your head around the ideas involved with React Server Components, and Dan Abramov’s [‘let’s recreate RSCs from scratch’](https://github.com/reactwg/server-components/discussions/5) went a little too deep, this is a good, high-level explanation of the fundamentals that explains what problems they solve, why you might use them, and how Next.js makes them easier to work with. Alice Moore (Vercel) [![\](https://copm.s3.amazonaws.com/cc5a14c0.png)](https://frontendmasters.com/courses/web-dev-quiz/?utm_source=email&utm_medium=reactstatus&utm_content=webdevquiz) [Lydia Hallie Tests your Web Development Knowledge](https://frontendmasters.com/courses/web-dev-quiz/?utm_source=email&utm_medium=reactstatus&utm_content=webdevquiz) — Answer 30 questions on a wide range of front-end development concepts (such as JavaScript, CSS, web security, HTTP protocols, and more) and dive deeper into the answers to help give you a more extensive understanding of all things web dev. Frontend Masters sponsor [Everything Mux Learnt Migrating 50K LOC to Server Components](https://www.mux.com/blog/what-are-react-server-components) — If you prefer real-world experiences to technical explanations and overviews, this is for you. A member of the Mux team goes into their story of adopting React Server Components and preemptively answers some of the questions we all have. _“By the end of all this, you should have a pretty good idea of whether you should use React Server Components and how to use them effectively.”_ Darius Cepulis (Mux) To wrap up the focus on RSCs this week, Marco Salazar and Pete Hunt have also written about how Dagster has [sped up their documentation site 'by 20x' using RSCs.](https://dagster.io/blog/dbt-docs-on-react) _OK. No more server components in this issue now – promise._ **IN BRIEF:** - Surma, who now works over at Shopify, explains how [Shopify is going all-in on Remix and React](https://shopify.engineering/shopifys-platform-is-the-web-platform) for its Admin Apps (apps that third parties can build for Shopify store owners to add to their stores). - The team behind the popular _Storybook_ UI component workshop have checked in with [a look at Storybook 7.1 and 7.2](https://storybook.js.org/blog/july-2023-update/), noting that 7.2 is the first in an anticipated line of 'smaller but more frequent' releases. - Last week we featured Vercel's [react-tweet](https://vercel.com/blog/introducing-react-tweet) library and pondered if it might need to be renamed given Twitter's recent rebranding. Enter [react-xeet](https://react-xeet.vercel.app/).. yes, it's a parody 😆 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ihrj8yqd7x9zpkxz7twn.jpg)](https://www.youtube.com/watch?v=RG-3R6Pu_Ik) ▶[How to Build a Drag-and-Drop Kanban Board](https://www.youtube.com/watch?v=RG-3R6Pu_Ik) — A complete screencast walkthrough of using React to build a Trello-like app based around the familiar [Kanban board](https://en.wikipedia.org/wiki/Kanban_%28development%29) pattern. It also serves as an introduction to the [dnd-kit](https://dndkit.com) drag-and-drop toolkit. Kliton Bare [Using Supabase Storage for React Native App File Uploads](https://supabase.com/blog/react-native-storage) — Learn how to implement authentication and file upload in a React Native app. Simon Grimm (Supabase) ▶[Creating a 'Brain Animation' with React Three Fiber](https://www.youtube.com/watch?v=OCjwL5QbiMg) — [React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) provides a way to use [Three.js](https://threejs.org/) from React in order to create 3D graphics. Yuri Artiukh [RxDB - Local Database for JavaScript Applications](https://rxdb.info/?utm_source=react-status&utm_medium=promo-newsletter&utm_campaign=react-status-link) — With RxDB you can build realtime applications with great performance that even works when your users are offline. RxDB sponsor [Uploading Files from a Form with Drag and Drop](https://spacejelly.dev/posts/uploading-files-in-react-from-a-form-with-drag-and-drop/) Colby Fayock [How to Send Emails with React Using Resend](https://www.sitepoint.com/react-email-resend/) Rayan Kazi If you prefer a video, Kavin Valli has a [▶️ screencast of using React with Resend](https://www.youtube.com/watch?v=kMPTf0HfKA0). [Achieving Clean and Maintainable React Component Tests](https://medium.com/globant/achieving-clean-and-maintainable-react-component-tests-b3d5e0483307) Tato Patrón 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/iwyeinnozn08xt1uhnyv.jpg)](https://github.com/RicardoValdovinos/vite-react-boilerplate) [Vite React Boilerplate: A Production Ready Starter Template](https://github.com/RicardoValdovinos/vite-react-boilerplate) — A new ‘batteries included’ Vite + React app template that leans upon, well, a _lot_ of batteries from Zustand to Zod to Storybook. Ricardo Valdovinos [React Sweet State: 'The Good Parts' of Redux + React Context](https://github.com/atlassian/react-sweet-state) — A state management solution heavily inspired by Redux mixed with contexts from the Context API. If you’ve previously given it a go, check it out again as the [latest release](https://github.com/atlassian/react-sweet-state/releases/tag/v2.7.0) makes containers far more flexible than before. Atlassian [Solito 4: 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 across platforms. [v4.0](https://github.com/nandorojo/solito/releases/tag/v4.0.0) introduces support for using React Native with the Next.js App Router. Fernando Rojo 📰 Classifieds [Senior Software Engineer (Frontend Lead)](https://www.ycombinator.com/companies/emerge-tools/jobs/zDcS7ia-senior-software-engineer-frontend-lead%20) — Come lead [Emerge's](https://www.emergetools.com/) web platform, used by teams like DoorDash, Square, Dropbox & Airbnb (our stack: Next.js, React, TS, Vercel). --- 💻 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). _Classifieds_ is a way to share projects, services, events, or jobs you may find useful, replacing our job listings section. [React Image Gallery 1.3: Image Carousel Component](https://www.linxtion.com/demo/react-image-gallery/) — [GitHub repo.](https://github.com/xiaolin/react-image-gallery) Xiao Lin [Rows n' Columns: A Commercial Spreadsheet Component](https://rowsncolumns.app/) — It’s not open source. It’s not cheap. But it does seem to have a lot of features and [the demo](https://www.rowsncolumns.app/demo) is smooth. Rows n' Columns - [Downshift 8.1](https://github.com/downshift-js/downshift) – Primitives for building accessible autocomplete, combobox and select dropdown components. - [Tremor 3.6](https://github.com/tremorlabs/tremor) – React library for building dashboards. - [NextUI 2.0](https://nextui.org/blog/nextui-v2) ↳ Themeable, TailwindCSS-based React UI library. - [Zustand 4.4](https://github.com/pmndrs/zustand/releases/tag/v4.4.0) - [Ant Design 5.8](https://ant.design/) - 📅 [React Calendar 4.6](https://github.com/wojtekmaj/react-calendar) 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