--- title: "Separation of concerns with hooks" publication: "React Status" issue: 249 published_at: "2021-07-28" canonical_url: "https://react.statuscode.com/issues/249" --- Plus looking through Windows, a new component library, and more. | #​249 — July 28, 2021 [Read on the Web](https://react.statuscode.com/issues/249) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ttjl60oiffyd68ya5lr3.jpg)](https://win11.blueedge.me/) [A 'Windows 11' UI Experience Reproduced with React](https://win11.blueedge.me/) — There was once a debate about the ‘compromised experience’ of a web app as compared to an app installed on local hardware. Although tools like Google Docs have long since proven this is no longer a significant issue, we were still intrigued with this project: using React and other standard tools to replicate the look and feel of the forthcoming Windows 11. Comes complete with [source](https://github.com/blueedgetechno/windows11). _Yes, it's a bit of fun.. :-)_ Blue Edge [Plate 1.0: A Plugin Framework for Building Rich Text Editors with Slate](https://plate.udecode.io/) — [Slate](https://github.com/ianstormtaylor/slate) is a framework for building rich text editor controls, and Plate abstracts things one level higher offering a plugin system for adding your own functionality. Look at the big demo on the homepage to see the benefits. [GitHub repo](https://github.com/udecode/plate). Taylor, Beyens and Murray [![\](https://copm.s3.amazonaws.com/42472269.jpg)](https://frontendmasters.com/courses/redux-fundamentals/?utm_source=reactstatus&utm_medium=email&utm_campaign=redux) [Learn the Redux Fundamentals](https://frontendmasters.com/courses/redux-fundamentals/?utm_source=reactstatus&utm_medium=email&utm_campaign=redux) — Join Steve Kinney in this course and learn how to hook Redux into a React app, extend Redux with various tools, and speed up your development. Frontend Masters sponsor [Separation of Concerns with React Hooks](https://felixgerschau.com/react-hooks-separation-of-concerns/) — While [separation of concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) is a programming concept which has been around for decades, your approach to implementing it in React can be quite novel, as is shown here using custom hooks. Felix Gerschau [A Visual Guide to React Rendering](https://alexsidorenko.com/blog/react-render-always-rerenders/) — This article makes effective use of GIFs to clearly illustrate how React renders pages. Spoiler alert: React always re-renders, according to the author. Unless, of course, you follow his recommendations. Alex Sidorenko [How to Test Component Interactions](https://storybook.js.org/blog/testing-component-interactions/) — The case for using [Testing Library](https://testing-library.com), given its ability to mimic user interactions and check results as opposed to simply testing the components arcane internal implementation details. Varun Vachhar ▶[How to Write React Architecture and Testing From Scratch](https://www.youtube.com/watch?v=g2TxGHem3_o) — Every so often it’s instructive to set aside all the templates and opinionated React starter projects and build a project line-by-line, from the ground up. This video from this popular YouTuber will take you through it step-by-step. Chris Hawkes Jobs [Senior Software Consultant - React.js (100% Remote US & Canada)](https://testdouble.recruiterbox.com/jobs/fk0uj24/) — We're a growing employee-owned engineering consultancy on a mission to improve the way the world builds software. We focus on reducing technical debt, writing maintainable code, and mentoring some of the best teams in tech. TestDouble [React Developer at X-Team (Remote)](https://x-team.com/remote-react-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=react) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more. X-Team [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 [How to Use Axios in an Optimized and Scalable Way](https://dev.to/nilanth/how-to-use-axios-in-an-optimized-and-scalable-way-with-react-518n) Nilanth [React's UI State Model vs DOM State — A Beginner's Introduction](https://arihantverma.com/posts/2021/07/17/react-ui-state-model-vs-vanilla-js/) Arihant Verma [React 18 and the Future of Async Data](https://swizec.com/blog/react-18-and-the-future-of-async-data/) Swizec Teller [How to Use Finite State Machines in React](https://tsh.io/blog/finite-state-machines-in-react/) Kacper Witas [Ten Ways to Host Your React App For Free](https://t.co/QmnESGgOjw?amp=1) Nilanth 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lta7us7er9dzeu1xo4f8.jpg)](https://github.com/vechai/vechaiui) [Vechai UI: A Set of High-Quality Accessible React UI Components](https://github.com/vechai/vechaiui) — Includes built-in dark mode and theme customization. All components are styled with Tailwind and you can [try them here](https://www.vechaiui.com/). vechai [sentry-react-native](https://github.com/getsentry/sentry-react-native) — [Sentry](https://sentry.io) claims to enable you to go beyond simple log analysis with ‘full stack monitoring’. The Sentry SDK for React Native enables this capability on the mobile React platform. Sentry [React Native Share](https://react-native-share.github.io/react-native-share/) — Easily incorporate the mobile app sharing functionality users have almost come to expect. react-native-share [Get Started with the Best React Component Libraries in < 7 Minutes](https://retool.com/blog/react-component-libraries/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) Retool sponsor [Precise UI](https://github.com/ZEISS/precise-ui) — A robust, visually appealing and functional UI with virtually every component you are reasonably likely to need. ZEISS Group [rc-drawer](https://github.com/react-component/drawer) — You know, that thing which slides in and out from the side of the UI to display further options in response to UI interactions, as shown in their demos (see the links in the sidebar). react-component [React Native Notifications](https://github.com/wix/react-native-notifications) — This component provides a comprehensive approach to notifications and includes support for all the native iOS notification features. Wix Engineering ## ⚡️ Quick Bits: - [DatePicker](https://github.com/shahabyazdi/react-multi-date-picker) — Particularly useful if you need to support Gregorian, Persian, Arabic and Indian calendars not often covered by other components. - [Simple React Validator](https://github.com/dockwa/simple-react-validator) — The [sample form](https://dockwa.github.io/simple-react-validator/index.html) illustrates the many validations available. - [React CountUp](https://github.com/glennreyes/react-countup) — A wrapper for [CountUp.js](https://inorganik.github.io/countUp.js/) to "display numerical data in a more interesting way". - [react-apple-signin-auth](https://github.com/a-tokyo/react-apple-signin-auth) — Uses the official [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) SDK. - [use-color](https://github.com/junhoyeo/use-color) — "The powerful color hook that all designers deserve." 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