--- title: "Testing components with Playwright" publication: "React Status" issue: 289 published_at: "2022-05-18" canonical_url: "https://react.statuscode.com/issues/289" --- Plus a router in under 100 lines of code, and improving form performance. | 🇺🇦 #​289 — May 18, 2022 [Read on the Web](https://react.statuscode.com/issues/289) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/uxs12fkmvujdjkceemfe.jpg)](https://dev.aspect.app/) [Aspect: A New Visual Environment for Building Components](https://dev.aspect.app/) — It’s a new, unproven tool, but any efforts to simplify the development process are laudable to us, and you might find it useful too. Currently it only exports class components, but it’s great to see them dogfooding things by building Aspect in Aspect itself. Aspect [Playwright Can Now Test Your Components](https://github.com/microsoft/playwright/releases/tag/v1.22.0) — [Playwright](https://playwright.dev), Microsoft’s browser control library which “enables reliable end-to-end testing for modern web apps”, takes an interesting step outside of its usual neighborhood. In preview form for now, but you can [learn more here](https://playwright.dev/docs/test-components). Microsoft [![\](https://copm.s3.amazonaws.com/a6733774.png)](https://www.filestack.com/?utm_source=cooperpress&utm_medium=Leads%20Acquisition&utm_content=ReactStatusPrimary&utm_campaign=NewsletterMay22) [Revolutionize Your File Handling with Filestack. Start Now](https://www.filestack.com/?utm_source=cooperpress&utm_medium=Leads%20Acquisition&utm_content=ReactStatusPrimary&utm_campaign=NewsletterMay22) — Ever wondered how to bring your application to the next level? Filestack offers its best-in-class APIs to help you do just that. Detect images with Image Detection, speed up your file uploads, and make your application safe all with Filestack. Filestack sponsor [Improve Your React App Performance Using React Profiler](https://medium.com/inato/prevent-re-renders-in-your-react-app-using-react-profiler-93c492110e30) — A quick peek at the [profiler API](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) which can provide hard data to be used in diagnosing performance bottlenecks. Laure Retru-Chavastel **Quick bits:** - [SolidJS](https://www.solidjs.com/) is an interesting alternative you may have heard of but not had time to look into.. if so, [▶️ there's now a 100 second intro video](https://www.youtube.com/watch?v=hw3Bx5vxKl0) comparing its approach to React's. - [TypeScript 4.7 Release Candidate](https://devblogs.microsoft.com/typescript/announcing-typescript-4-7-rc/) is out. Jobs [Senior React Engineer @ Nebulab (Remote)](http://nebulab.com/careers?gh_src=659d9832teu) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers. Nebulab [Senior Software Engineers at Turo (SF | Remote/Hybrid Options)](https://www.beforeyouapply.com/team/engineering-at-turo?) — The world's largest car sharing marketplace on a mission to put the world’s 1.5B cars to better use. We're hiring BE, FE, ML, iOS, Android & DevOps roles at all levels. Turo [Senior React / React-Native Developer (m/f/d) - Remote in Germany](https://celebratecompany.recruitee.com/l/en/o/senior-react-reactnative-developer-mwd) — Join our strongly motivated and fun-to-be-around core team that will turn a dusty market of photo book creation upside down. Celebrate Apps GmbH [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 [Improve the Performance of Your Forms](https://epicreact.dev/improve-the-performance-of-your-react-forms/) — An exploration of how Kent’s [state colocation](https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster) concept (from 2019) can optimize React forms by keeping state management close to where it is needed. Kent C. Dodds [Using Next.js ISR with Serverless Cloud](https://www.serverless.com/blog/using-next-js-isr-with-serverless-cloud) — Serverless’s cloud offering supports Next.js incremental static regeneration (ISR) rendering method. This post walks through how to use it. Russ Schick [Implementing Progressive Image Loading](https://blog.logrocket.com/progressive-image-loading-react-tutorial/) — Is there anything worse than staring at a blank frame while a large, high-resolution image is loading? Improve your user’s experience by giving them a progressively clearer picture of what lays in store for them. Ibadehin Mojeed (LogRocket) [How to Implement Redux Reducers](https://blog.openreplay.com/how-to-implement-redux-reducers-for-react) Godwin Chinda (OpenReplay Blog) 🛠 Code and Tools [React Fast Accordion: A Fast, Dynamic, and Accessible Accordion](https://github.com/ShivamJoker/React-fast-accordion) — No dependencies and it incorporates animation via the Web Animations API. [Demo on CodeSandbox](https://codesandbox.io/s/festive-yalow-fm0hkf?fontsize=14&hidenavigation=1&theme=dark&view=preview). Shivam [Kea 3.0: A State Manager for React](https://keajs.org/blog/kea-3.0/) — [Kea](https://keajs.org/) is a state management library that’s been around for many years and provides [a lot of structure](https://keajs.org/docs/intro/what-is-kea) around the concept. This big v3 release brings Kea up to modern standards without breaking what worked before. Marius Andra [Free Activity Feeds & Chat APIs for Qualifying Teams](https://getstream.io/maker-account/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_May2022_MakerAccount) Stream sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/m6ntthlp1slgtzp8vqv1.jpg)](https://whitphx.github.io/react-ymd-date-select/) [react-ymd-date-select: Year/Month/Day Selection Dropdowns](https://whitphx.github.io/react-ymd-date-select/) — Provides an alternative to the calendar based approach. [react-select-datepicker](https://jeffmcammond.com/react-select-datepicker/?path=/story/welcome--page) is another option in this space. Yuichiro Tachibana [A React Router Implemented in Under 100 LOC](https://github.com/ashok-khanna/react-snippets/blob/main/Router.js) — One of those sort of experiments that anyone can learn from. Ashok Khanna [Start UI Web: An Opinionated Frontend Starter Built with React, Next.js, Chakra UI, React Query, and More](https://github.com/BearStudio/start-ui-web) BearStudio ## ⚡️ Quick Bits: [react-page-transition](https://github.com/Steveeeie/react-page-transition) — Some jazzy alternatives to waiting for the new page to load – courtesy of [Codrops](https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/). [react-textarea-autosize](https://github.com/Andarist/react-textarea-autosize) — Textarea component that grows with the content. [react-dnd-treeview](https://github.com/minop1205/react-dnd-treeview) — Intuitive, drag-and-drop functionality for your tree view. [react-native-geolocation](https://github.com/michalchudziak/react-native-geolocation) — Geolocation APIs for React Native. [react-native-bars](https://github.com/zoontek/react-native-bars) — Components to control your app status and navigation bars. [react-medium-image-zoom](https://github.com/rpearce/image-zoom) — Medium․com style image zooming. 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