--- title: "Say hello to source maps in prod" publication: "React Status" issue: 361 published_at: "2023-11-08" canonical_url: "https://react.statuscode.com/issues/361" --- Plus a deep dive into the headless component pattern, and Google's new Maps React components. | #​361 — November 8, 2023 [Read on the Web](https://react.statuscode.com/issues/361) Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://sentry.io/events/launch-week/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/evj4m2cvdzls4o4artep.jpg)](https://martinfowler.com/articles/headless-component.html) [Headless Component: A Pattern for Composing React UIs](https://martinfowler.com/articles/headless-component.html) — Posting on the _Martin Fowler_ blog, an engineer at Atlassian takes us on a (very) practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements. Juntao Qiu [React to Ship Source Maps for Production Build Artifacts](https://github.com/facebook/react/pull/26446) — Mark Erikson is [very excited](https://twitter.com/acemarke/status/1721949707524509870) about this one. Appearing in a daily build or canary near you soon, React will ship with source maps available for production build artifacts, enhancing the potential debugging experience in production. (The [actual commit](https://github.com/facebook/react/commit/2c8a139a593e0294c3a6953d74b451bd05fdcfca) was merged yesterday.) Facebook / Mark Erikson [![\](https://copm.s3.amazonaws.com/32a7749e.png)](https://sentry.io/events/launch-week/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) [📞 Calling All Devs! Sentry Launch Week is Coming](https://sentry.io/events/launch-week/?utm_source=reactstatus&utm_medium=paid-community&utm_campaign=general-fy24q3-launchweek&utm_content=newsletter-launchweek-register) — Tune in daily on YouTube for new product announcements and technical demos; then join Discord to get the inside scoop from the engineers that build Sentry. RSVP for Nov 13-Nov 17, at 9 am PT to get reminders/recaps and a chance to win exclusive swag. Sentry sponsor [React Server Components, Without a Framework?](https://timtech.blog/posts/react-server-components-rsc-no-framework/) — Could you use Server Components today _without_ a full framework like Next.js in place? This practical investigation is very thorough, with plenty to enjoy and learn from. Tim Pillard _QUICK BITS:_ - React's [official docs for `'use server'`](https://react.dev/reference/react/use-server) have been significantly fleshed out over the past week. - Egghead presents a new [Build a Full Stack Blog with Astro course](https://egghead.io/courses/build-a-full-stack-blog-with-astro-7ffcf9ec) by Lazar Nikolov. It's free for the next two weeks. - 🇫🇷 [React Paris 2024](https://react.paris) is anticipated to take place next March – if you're interested, they're running a quick survey to help shape the form the event takes. _React, c'est magique!_ - You want [a React hook for running PHP..](https://github.com/ascorbic/use-php) right? [Why You Want Need React Query](https://tkdodo.eu/blog/why-you-want-react-query) — Do you actually need React Query for ‘simple’ fetching of data from a server? Not if that’s purely how you look at it, but to handle the _async state management_ that follows on from that fetching? Yes, it'll make your life a lot easier. See if Dominik convinces you. Dominik Dorfmeister AKA TkDodo [re-re-reselect — Simplifying React State Management](https://causal.app/blog/re-re-reselect) — A thorough explanation of how a team built their own framework to improve the state management in their React app. Köbis, Churchill and McIntyre (Causal) 📰 Classifieds 🎹 [Strich](https://strich.io/?ref=react-status) brings fast & reliable 1D/2D barcode scanning to the web. You don't need a native app to scan barcodes. Free demo, 30-day trial. --- Level up your career with these [free AI focused courses](https://scrimba.com/allcourses?topic=ai&utm_source=Reactstatus&utm_medium=emailsponsor&utm_campaign=AIcoursesRS&utm_id=RS1108) covering prompt engineering, Dall-E, Chat-GPT & LangChain.js. [Get an extra 10% off Pro](https://scrimba.com/pricing?coupon=ReactstatusPro#join). --- 💻 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). [Building a Drawer Component](https://emilkowal.ski/ui/building-a-drawer-component) — Ready to move up from simply using other people’s components and start building your own? This case study by an experienced component developer (who created both Vaul and Sonner) could help you get into the right frame of mind. Emil Kowalski [How to Build a Server-Side React App Using Vite and Express](https://thenewstack.io/how-to-build-a-server-side-react-app-using-vite-and-express/) — A demo of server-side rendering and server-side data fetching without using a framework — showing what React-powered frameworks actually do. Paul Scanlon 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/ln8dtk1mu68zfrjgbsro.jpg)](https://cloud.google.com/blog/products/maps-platform/introducing-react-components-for-the-maps-javascript-api/) [Google Introduces Components for the _Maps_ JavaScript API](https://cloud.google.com/blog/products/maps-platform/introducing-react-components-for-the-maps-javascript-api/) — [react-google-maps](https://visgl.github.io/react-google-maps/) is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components in a React app. Mike Pegg (Google Cloud) [Material Design Kit v7.0 for React 18 and Bootstrap 5](https://mdbootstrap.com/docs/react/) — Brings together a variety of Bootstrap themes, templates and tools into a single ‘starter kit.’ [GitHub repo](https://github.com/mdbootstrap/mdb-react-ui-kit). MDBootstrap [Find Your Partner in Code and Work #LikeABosch](https://www.bosch.com/careers/why-bosch/collaboration-and-leadership/?utm_campaignid=react&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=pairprogramming) — At Bosch, we invent technology for life. Join in and get inspired by the perspectives of our community around the globe. [Learn more](https://www.bosch.com/careers/why-bosch/collaboration-and-leadership/?utm_campaignid=react&utm_source=cooperpress&utm_medium=cpc&utm_campaign=wlab&utm_term=secondary&utm_content=pairprogramming). Bosch sponsor [react-native-picker-select 9.0: A Picker Component for React Native](https://github.com/lawnstarter/react-native-picker-select) — It emulates the native `select` interfaces on both iOS and Android. LawnStarter [Starter App to Build a Desktop Tray-App with Tauri and React](https://github.com/riipandi/tauri-tray-app) — A starter project for developing desktop app with a tray/menu-bar interface using [Tauri](https://tauri.app/) (imagine something like Electron but based around Rust), React, Tailwind CSS, and Vite. Aris Ripandi - [Sonner 1.2](https://github.com/emilkowalski/sonner) – Elegant toast notification component. Demos on [the homepage](https://sonner.emilkowal.ski/). - [Valtio v1.12.0](https://github.com/pmndrs/valtio) – Proxy state made simple. Plus it has a [fantastic homepage](https://valtio.pmnd.rs/). - [react-native-bootsplash 5.1](https://github.com/zoontek/react-native-bootsplash) – Show a splash screen during startup. - [react-verification-input 4.0](https://github.com/andreaswilli/react-verification-input) – Customizable, masked input. - [use-debounce v10.0](https://github.com/xnimorz/use-debounce) – _"Debouncing without tears."_ 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