--- title: "React trends for 2022" publication: "React Status" issue: 274 published_at: "2022-02-02" canonical_url: "https://react.statuscode.com/issues/274" --- Plus the story of React told in just ten minutes. | #​274 — February 2, 2022 [Read on the Web](https://react.statuscode.com/issues/274) React Status ⚛️ Your weekly React news digest, _every Wednesday_. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/bk3ysckglctrp7pxfypi.jpg)](https://www.youtube.com/watch?v=Wm_xI7KntDs) ▶[The Story of React (in 10 Minutes)](https://www.youtube.com/watch?v=Wm_xI7KntDs) — If you find yourself at the beginning of the React learning curve, it will be valuable to get a short recap of how it got to where it is today, or maybe you just want to be entertained? ;-) This video gets us up to speed with React's background. ui·dev [Look for These React Trends in 2022](https://www.chakshunyu.com/blog/what-you-should-definitely-look-out-for-in-react-in-2022/) — The author takes a look at what they feel will be important in the coming year: [Remix](https://remix.run), server-side rendering, concurrent rendering, behaviour testing as well as some 'honorable mentions'. Chak Shun Yu [![\](https://copm.s3.amazonaws.com/2e466595.png)](https://getstream.io/maker-account/?utm_source=ReactStatus&utm_medium=Newsletter_Content_Ad&utm_content=Developer&utm_campaign=ReactStatus_Jan2022_MakerAccount) [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_Jan2022_MakerAccount) — The Stream Maker Account provides qualifying teams with full and free access to Stream's Chat and Activity Feed APIs, making them accessible to side projects and new startups. Stream sponsor **Two Key Releases:** - [Recoil 0.6](https://recoiljs.org/blog/2022/01/28/0.6.0-release/) has been released with improved React 18 support. - Want to use Markdown in JSX? [MDX 2.0](https://mdxjs.com/blog/v2/) has been released and makes it easier than ever with improved syntax, JavaScript expression support, and more. [How to Write Performant React Code](https://www.developerway.com/posts/how-to-write-performant-react-code) — Although the author acknowledges the potential perils of ‘premature optimisation’, she says some such optimizations are a good thing when it comes to React and presses ahead with a series of examples. Nadia Makarevich [Building Animations in React Native with Accessibility in Mind](https://medium.com/seer-medical/building-animations-in-react-native-with-accessibility-in-mind-738a6bd86603) — The goal for [Seer Medical](https://seermedical.com)’s mobile app was to provide a compelling, animated user interface while keeping in mind the specific accessibility requirements of its intended audience—people with epilepsy. Marton Bodonyi Jobs [Join a Fast-Growing, Pre-IPO Series E Company](https://jobs.lever.co/hingehealth?department=R%26D&team=Engineering) — Hinge Health is hiring remote React Native engineers. If you want to be a part of a team that is making a difference, [apply here](https://jobs.lever.co/hingehealth?department=R%26D&team=Engineering). Hinge Health [Senior Web Developer (Node/ReactJS) - Remote](https://www.komoot.com/jobs/DCC51EA91D/senior-web-developer-node-reactjs) — Millions get inspired and plan adventures with our apps. To help us make [komoot.com](https://www.komoot.com) the place to go to plan outdoor adventures, we’re looking for a one of a kind Web Developer to join our team. Komoot [Toptal: The World’s Top Companies at Your Fingertips](https://topt.al/aRcbJQ) — We connect developers like you with exclusive clients that include Fortune 500 companies and Silicon Valley startups. [Apply now](https://topt.al/aRcbJQ). Toptal [Understanding React Lifecycles](https://betterprogramming.pub/understanding-lifecycle-in-react-34f76412e97d) — The author deconstructs the three phases of React components’ lifecycle: mounting (insertion into DOM), update and unmounting (removal from DOM) and goes on to describe the methods appropriate for each. Fernando Belotto [Automatic Batching in React 18](https://blog.bitsrc.io/automatic-batching-in-react-18-what-you-should-know-d50141dc096e) — With [React 18 in beta](https://github.com/reactwg/react-18/discussions/112), it’s timely to examine features which distinguish it from previous releases: [Automatic Batching](https://github.com/reactwg/react-18/discussions/21) portends fewer needless renders. Lakindu Hewawasam 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/k9u2tvae2i4pqytu61m2.jpg)](https://github.com/ssleptsov/ninja-keys) [Ninja Keys: A Utility to Add Keyboard Shortcuts Interface to a Site](https://github.com/ssleptsov/ninja-keys) — Will display a ‘drawer’ with shortcut key options for the app/page, available in plain JS, Vue, React, and Svelte. [Try it here](https://ninja-keys-demo.vercel.app/). We like it. Sergei Sleptsov [React-PDF 5.7: Display PDFs in a React App As Easily As If They Were Images](https://github.com/wojtekmaj/react-pdf) — This big update adds support for React 18. Wojciech Maj [Find, Fix, & Track Vulnerable Code Quickly Across Your Entire Codebase](https://about.sourcegraph.com/use-cases/?utm_campaign=use-cases-ddg-tofu-fy23-q1&utm_medium=newsletter&utm_source=react-status#find-and-fix-security-vulnerabilities) Sourcegraph sponsor [react-waves-effect: Subtle Animations for Buttons](https://github.com/LeulAria/react-waves-effect) — These low-key animations will enliven screen interactions and potentially make an interface more pleasant to use. The [demo](https://leularia.github.io/react-waves-effect/) clearly illustrates them. Leulseged Tariku (LeulAria) [Geist: A Modern and Minimalist React UI Library](https://github.com/geist-org/react) — Design inspired by Vercel and includes 50+ categorized components that you can [view here](https://react.geist-ui.dev/en-us/components/text) on the documentation site. Geist [styled-jsx 5.0: Full CSS Support for JSX Without Compromises](https://github.com/vercel/styled-jsx) — Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client). Vercel [React Mentions: To `@mention` People in a Textarea Field](https://github.com/signavio/react-mentions) — Use this to replicate the Facebook/Twitter-style mentioning effect within text fields. [Live demos here.](https://react-mentions.vercel.app/) Signavio GmbH [Six React Data Visualization Libraries to Consider](https://javascript.plainenglish.io/6-best-react-data-visualization-libraries-fc155b573168) Mohit ## ⚡️ Quick Bits: [pure-react-carousel](https://github.com/express-labs/pure-react-carousel) — Finally, a carousel that doesn’t try to impose its own structure or styles. [react-browser-navigator](https://www.npmjs.com/package/react-browser-navigator) — Access the [Navigator](https://developer.mozilla.org/en-US/docs/Web/API/Navigator) interface from React as shown in their [demo](https://react-browser-navigator.netlify.app). [react-native-onboarding-swiper](https://github.com/jfilter/react-native-onboarding-swiper) — Let your app’s new users to swipe their way through the onboarding steps. [react-native-imask](https://www.npmjs.com/package/react-native-imask) — Stop bad data from getting further than the input field. 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