--- title: "Getting a grip on React server components" publication: "React Status" issue: 273 published_at: "2022-01-26" canonical_url: "https://react.statuscode.com/issues/273" --- Plus a new React Native release, and a wrapper for Google Charts. | #​273 — January 26, 2022 [Read on the Web](https://react.statuscode.com/issues/273) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rayqindkaosfkjmolvih.jpg)](https://blog.plasmic.app/posts/how-react-server-components-work/) [React Server Components: A Primer](https://blog.plasmic.app/posts/how-react-server-components-work/) — The co-founder of the [Plasmic](https://www.plasmic.app/) visual page builder app takes us on an exploration of React server components (currently an experimental feature in React 18) and how they tick under the hood. Chung Wu (Plasmic) [Mastering the Art of Forms in React](https://engineering.udacity.com/mastering-the-art-of-forms-in-react-1bd65fb664d7) — The author asserts that most React developers are making forms much harder than they need to be. Through a series of progressively more complex examples—each of which is accompanied by its own CodeSandbox demo—the article explains how to achieve a high level of form capability _without_ resorting to labor-intensive controlled inputs. Kolby Sisk [![\](https://copm.s3.amazonaws.com/cd560f27.png)](https://www.contentful.com/developers/docs/javascript/tutorials/getting-started-with-react-and-contentful/?utm_medium=email&utm_source=newsletter&utm_campaign=contentful-cooperpress&utm_content=reactstatus) [Get Started with React and Contentful’s Headless CMS](https://www.contentful.com/developers/docs/javascript/tutorials/getting-started-with-react-and-contentful/?utm_medium=email&utm_source=newsletter&utm_campaign=contentful-cooperpress&utm_content=reactstatus) — Contentful is a cloud-native API-first content platform that lets you define content structures in the way that best matches your components’ requirements. Start building for free. Contentful sponsor ▶[Learn the Remix Framework with Kent C. Dodds](https://www.youtube.com/watch?v=QgY49LCD8jQ) — Have you been wondering whether to take a spin with [Remix](https://remix.run)? The hosts get Kent C. Dodds— Remix's director of Developer Experience—to walk through why he thinks you’d want to use the full stack web framework. _(1 hour.)_ TJ Van Toll and Paige Niedringhaus [Building a Real App with React Query](https://www.smashingmagazine.com/2022/01/building-real-app-react-query/) — [React Query](https://react-query.tanstack.com) is intended to simplify your app’s interaction with asynchronous data sources. This detailed tutorial takes us through the full cycle of development of an appointment app which uses it. Georgii Perepecho [Announcing React Native 0.67](https://reactnative.dev/blog/2022/01/19/version-067) — The recently-promised [shorter release cycles](https://reactnative.dev/blog/2021/08/19/h2-2021) means some React Native releases will consist of fixes and incremental improvements such as appears to be the case here. Review the [changelog](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#v0670) to see the fine-grained details of what has been addressed. Lorenzo Sciandra (Microsoft) and Luna Wei (Meta) Jobs [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=cooperpress-react&utm_content=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [Frontend Software Engineer](https://apply.workable.com/qatalog/j/5841E4A3C4/) — Come build the future Hub for collaboration with our passionate, friendly, and experienced team. React, TS, GQL, Design Systems. Qatalog [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) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired [Choosing the Right Component Library for Your Design System: MUI vs Chakra](https://engineering.udacity.com/choosing-the-right-component-library-for-your-design-system-mui-vs-chakra-45c4c949d150) — Some thoughts from an engineer at Udacity from when they were comparing the two. Kolby Sisk [Tree Lists with Indeterminate Checkboxes in React](https://t.co/J5sO43XfVj) — “Semi-checked checkboxes”—which represent underlying conditions which are not entirely ‘checked’ or ‘unchecked’—can be tricky to represent in a tree list. Here’s one way to do it. Gerard van der Put [How to Create a Full-Stack App with AWS Amplify Studio](https://acloudguru.com/blog/engineering/how-to-create-a-full-stack-app-with-aws-amplify-studio) Ali Spittel [Five Tips to Solve Common Pitfalls with React Native](https://t.co/fpMP7nepDo) Dan Neciu 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/rhwv9smrpaxt6f9rj3pu.jpg)](https://github.com/rakannimer/react-google-charts) [React Google Charts 4.0: An Unofficial Wrapper](https://github.com/rakannimer/react-google-charts) — The fourth major release of the React component which wraps [Google Charts](https://developers.google.com/chart). Comes with a comprehensive [set of live demos](https://www.react-google-charts.com/examples) each accompanied by code. Rakan Nimer [Flags: Feature Flags for Next.js with One Hook](https://github.com/happykit/flags) — Selectively enabling capablities—as illustrated in their [brief video demo](https://user-images.githubusercontent.com/1765075/94278500-90819000-ff53-11ea-912a-a59cfb491406.gif)—has never been easier. They provide a [detailed tutorial](https://frontend-digest.com/using-feature-flags-in-next-js-c5c8d0795a2) to walk you through their implementation. HappyKit [Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API](https://getstream.io/blog/build-a-medical-pager-app/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_Jan2022_MedicalPagerMessagingApp) Stream sponsor [react-markdown: Render Markdown in React](https://github.com/remarkjs/react-markdown) — Takes a string of [Markdown](https://daringfireball.net/projects/markdown/) and renders it to React elements. Now in its eighth major release. Unified [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/m64fi5bkj1wow3ishzhm.jpg)](https://github.com/reaviz/reaselct) [reaselct: A Select Component for React](https://github.com/reaviz/reaselct) — Currently in single- and multi-select versions, the latter of which could work well in tagging scenarios. Comes from the same team as the [REAVIZ chart library](https://github.com/reaviz/reaviz). REAVIZ [Rockpack 2.0: An Alternative React App Builder](https://github.com/AlexSergey/rockpack) — Like _Create React App_ the goal is to get project setup time as low as possible, but Rockpack holds some different opinions around how far to take things and packs in a lot of ideas including, now, server side rendering. Alex Sergey [Semi-UI: A Design System and UI Library from the TikTok Team](https://github.com/DouyinFE/semi-design) — A complete design system and UI from the folks who brought you [TikTok](https://www.tiktok.com), or Douyin as it is known in China. DouyinFE ## ⚡️ Quick Bits: - [React Scroll Parallax](https://github.com/jscottsmith/react-scroll-parallax) — Animation synced to scrolling behavior. - [react-inner-image-zoom](https://github.com/laurenashpole/react-inner-image-zoom) — Take a closer look at an image within its rendered frame. - [React Modal Sheet](https://github.com/Temzasse/react-modal-sheet) — A bottom sheet component with animation powered by [Framer Motion](https://www.framer.com/motion/). - [transition-hook](https://github.com/iamyoki/transition-hook) — Simple transition animations in about 1KB. - [React Native Loading Spinner Overlay](https://github.com/joinspontaneous/react-native-loading-spinner-overlay) — Display a spinner in a modal-like overlay which enhances the user experience. This issue was curated by Terence C. Gannon 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