--- title: "Ten lessons about React state" publication: "React Status" issue: 257 published_at: "2021-09-22" canonical_url: "https://react.statuscode.com/issues/257" --- Plus Material-UI becomes MUI, and Gatsby 4 is in beta. | #​257 — September 22, 2021 [Read on the Web](https://react.statuscode.com/issues/257) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/qs9edy8fv0vcfltwqgcj.jpg)](https://www.gatsbyjs.com/gatsby-4/) [Introducing Gatsby 4, Now in Beta](https://www.gatsbyjs.com/gatsby-4/) — Gatsby 4, the latest version of the popular React and GraphQL-based site generation framework, introduces new content rendering methods, new build and deployments architecture, new CMS APIs, and more. Gatsby Team 🐦 [Ten Lessons I’ve Learned About Handling React State (Told in Ten Tweets)](https://twitter.com/housecor/status/1437765667906854915?s=11) — You would think the strict content limitations of Twitter would be unsuitable for detail-oriented tutorial content. Not so. In fact, the forced brevity actually sharpens the storytelling, as this set of tweets illustrates. Cory House [![\](https://copm.s3.amazonaws.com/78ea9f9f.png)](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) [ButterCMS - #1 Rated Headless CMS. Melts into React Apps](https://buttercms.com/react-cms/?utm_source=reactstatus&utm_medium=email&utm_campaign=canyouupdateoursite) — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days. BUTTERCMS sponsor [Material-UI Rebrands as MUI, Releases v5.0](https://mui.com/) — Formerly known as Material-UI, the new-look company has broken their product into a free, _'community'_ core and a fee-based set of _'pro'_ extensions. The detailed explanation behind the rebrand is covered in a recent [blog post](https://mui.com/blog/material-ui-is-now-mui/). MUI ▶[Sunil Pai: React and the Meta of the Web](https://www.youtube.com/watch?v=H3h1WICelqs) — In a recent latest addition to his [YouTube channel](https://www.youtube.com/channel/UCzJpE2zKwAFZ8JwMerlNquw), Swyx has an extended and detailed conversation with former React Core Team member Sunil Pai. Shawn 'Swyx' Wang [Using Recoil Instead of Redux for State Management in React Apps](https://blog.openreplay.com/using-recoil-instead-of-redux-for-state-management-in-react-applications) — [Jotai](https://github.com/pmndrs/jotai) and [Zustand](https://github.com/pmndrs/zustand) are other lightweight options to consider too. Origho Precious [React Readability Analysis of Implementing Custom Hooks](https://www.chakshunyu.com/blog/react-readability-analysis-of-implementing-custom-hooks/) — We have featured a number of this author’s articles previously (in [245](https://react.statuscode.com/issues/245), [253](https://react.statuscode.com/issues/253) and [254](https://react.statuscode.com/issues/254)). This time he returns with the third instalment in his _Readable React_ series, focusing on abstracting code away in custom hooks to make components that call them clearer and easier to understand. Chak Shun Yu Jobs [Senior Frontend Engineer at UnifiHealth (Remote)](https://careers.unifihealth.com/jobs/22617) — We're a seed-stage health insurance startup. Are you looking to have a big impact? [Apply](https://careers.unifihealth.com/jobs/22617) to be our first frontend engineer. UnifiHealth [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 [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 [Streamlining a React Monorepo](https://auth0.com/blog/streamlining-a-react-monorepo/) Brandon Roberts [How to Create a Three-Layer Application with React Hooks](https://medium.com/dailyjs/how-to-create-a-three-layer-application-with-react-hooks-2efba9ba345f) Cristian Salcescu [Implementing Your First End-to-End Tests in React with Cypress](https://blog.openreplay.com/implementing-your-first-end-to-end-tests-in-react-using-cypress) Anna McDougall 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/zkf0leeo2lvpbns33h3a.jpg)](https://github.com/glennreyes/react-countup) [React CountUp 6.0](https://github.com/glennreyes/react-countup) — For when simply displaying a static number feels very 2020 ;-) Glenn Reyes [next-i18next: Translate Your Next.js Apps](https://github.com/isaachinman/next-i18next) — Last time we checked, only about 5% of the world’s population speaks English as their first language. Make your app available to at least _some_ of the other 95%. Isaac Hinman [Shortcut Puts the 'Can' in Kanban and the Agile in Agile](https://shortcut.com/?utm_source=cooperREACT&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=kanban) Shortcut (formerly Clubhouse.io) sponsor [react-native-audio-recorder-player: Third Major Release](https://github.com/dooboolab/react-native-audio-recorder-player) — The original maintainer of the code base has returned and through a re-write of the codebase has provided some interesting new features. Hyo Chan Jang [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lm56cbivszaysvhlmyjh.jpg)](https://github.com/virtualvivek/react-windows-ui) [react-windows-ui: Build 'Windows Fluent' Apps](https://github.com/virtualvivek/react-windows-ui) — Although Windows may be anathema for many developers, there’s a signicant number of users who will welcome the familiarity and appreciate a Windows-like user interface. Vivek Verma [Agrippa: Creating Components Without Boilerplate](https://github.com/NitzanHen/agrippa) — Through a simple CLI, this library enables React developers to generate templates for a variety of different types of React components. It detects defaults in your configuration (and sets them, too) and is configurable through JSON. Nitzan Hen [Quickshare: Quick, Simple File Sharing](https://github.com/ihexxa/quickshare) — All the functionality you really need for enabling the upload and download of files in your app. Hexxa ## ⚡️ Quick Bits: - [React Horizontal Scrolling Menu](https://github.com/asmyshlyaev177/react-horizontal-scrolling-menu) — When your content exceeds the available screen real estate. - [react-native-mask-text](https://github.com/akinncar/react-native-mask-text) — Ensure input is (mostly) correct _before_ it hits your backend. - [react-native-map-link](https://github.com/includable/react-native-map-link) — Open a location in any popular map app. - [Nuka Carousel 4.8](https://github.com/FormidableLabs/nuka-carousel) — Pure React carousel component. 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