--- title: "React 18. It's here." publication: "React Status" issue: 282 published_at: "2022-03-30" canonical_url: "https://react.statuscode.com/issues/282" --- Plus the story of Next.js, a Farris Bad event, and who doesn't like a spinning wheel? | 🇺🇦 #​282 — March 30, 2022 [Read on the Web](https://react.statuscode.com/issues/282) React Status [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/n1n2u0zooxomno8ozn7i.jpg)](https://reactjs.org/blog/2022/03/29/react-v18.html) [React 18.0 Released](https://reactjs.org/blog/2022/03/29/react-v18.html) — Almost a year ago, [the plan](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) was for 18 to be simple to upgrade to with minimal changes needed – and despite the introduction of a new concurrent rendered, Suspense, new hooks, automatic batching, and more (all covered in this news post) they’ve pretty much nailed it. [This React 18 upgrade guide](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html) covers the few things you need to consider, and if you’re a true completist, [this changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1800-march-29-2022) covers every tiny change. The React Team [![\](https://copm.s3.amazonaws.com/bbfe734d.jpg)](https://frontendmasters.com/courses/fullstack-app-next/?utm_source=reactstatus&utm_medium=email&utm_content=fullstack) [How to Build a Fullstack App from Scratch](https://frontendmasters.com/courses/fullstack-app-next/?utm_source=reactstatus&utm_medium=email&utm_content=fullstack) — Join Scott Moss for this detailed course looking at modern app building. Get to grips with a stack of tools, including the likes of Next.js, TypeScript, Postgres, and React, plus you'll learn about data modeling, authentication, state management, testing and more. Frontend Masters sponsor [When Does React Render Your Component?](https://www.zhenghao.io/posts/react-rerender) — If you’re still a little flummoxed by React rendering behaviour, this takes another crack at explaining it by walking the fine line between superficial overview and technical deep dive. Zhenghao He ▶[The Story of Next.js](https://www.youtube.com/watch?v=BILxV_vrZO0) — A good balance of detail and high level overview to tell the [Next.js](https://nextjs.org/) story. Despite being just 12 minutes long, it goes into a lot more background and history than you’d expect, too. Tyler McGinnis [Remix: The Yang to React's Yin?](https://kentcdodds.com/blog/remix-the-yang-to-react-s-yin) — Kent C. Dodds continues to flesh out [Remix](https://remix.run)’s _raison d’etre_ with another insightful blog post: this time talking about React’s UI building _yin_ as compared to Remix’s ‘Network Chasm’ _yang_, which he broadly defines as everything between the client and the server. Kent C. Dodds [How to Use Props in React](https://www.robinwieruch.de/react-pass-props-to-component/) — We first linked to this three years ago but Robin has been updating his posts to modern standards, so it remains a fantastic resource now too and is packed with prop-oriented examples. Robin Wieruch **Quick bits:** - 📅 [React Norway](https://reactnorway.com/) is a React event taking place in the curiously-named [Farris Bad](https://farrisbad.no/en/) hotel in beautiful Larvik, Norway. You can attend virtually online too for a nominal sum, but who doesn't want to meet [Colby Fayock](https://www.youtube.com/colbyfayock) in person? Jobs [Ashby (YCW19) Hiring Frontend Engineers to Work on Design System](https://www.ashbyhq.com/careers?utm_source=zb8gl1OJ4K) — Join a remote-first team improving productivity with powerful software. <2h meetings/wk. Ship >8x per day. CI/CD takes <10min 🚀 Ashby [Senior Web Developer (Node/ReactJS) - Remote](https://apply.workable.com/komoot/j/DCC51EA91D/apply/) — 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 [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 🛠 Code and Tools [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/qvagnfjdkppgocsbytjj.jpg)](https://github.com/effectussoftware/react-custom-roulette) [react-custom-roulette: A Roulette Wheel, Complete with Spinning](https://github.com/effectussoftware/react-custom-roulette) — We don’t want to condone gambling or anything, but the ‘spinning wheel’ is a compelling effect in lots of situations, and this brings a highly customizable wheel to the table in the form of a React component. Effectus Software [Refine 3.x: A React Framework for Building Internal Tools](https://github.com/pankod/refine) — Shipping with the Ant Design System, the point of Refine is to provide lots of out-of-the-box functionality for rapid development of things like admin panels, B2B apps and dashboards. Pankod ▶[Build a Monitoring Application in Less Than 10 Minutes](https://www.influxdata.com/quickly-build-a-monitoring-app/?utm_source=vendor&utm_medium=referral&utm_campaign=2022-03-30_spnsr-nl_10-min-minitoring-app-lp_global&utm_content=reactstatus) InfluxData sponsor [Radish: A React-Based Static Site Generator That Outputs Plain HTML and CSS](https://radishjs.com/) — Uses React components, doesn’t output any client-side JS, includes support for Markdown, data in TOML/YAML/JSON, and is offline-first. We love the logo too. Jake Lazaroff [Electrode Native: Integrate React Native into Existing Native Codebases](https://github.com/electrode-io/electrode-native) — Create React Native based components (they’re called MiniApps in this case) which are then published and reused in potentially **any** mobile application. Electrode ## ⚡️ Quick Bits: [phosphor-react](https://github.com/phosphor-icons/phosphor-react) — Who doesn’t need yet another icon library for some future project? [react-photo-view](https://github.com/MinJieLiu/react-photo-view) — A well-executed React photo image preview component featuring touch gestures. [react-rewards](https://github.com/thedevelobear/react-rewards) — [Microinteractions](https://www.nngroup.com/articles/microinteractions/) can be a highly effective means of increasing user engagement—this library will get you started. [react-flex-ready](https://react-flex-ready.vercel.app/) — A [Flexbox](https://reactnative.dev/docs/flexbox) grid. 😎 A neat RSS reader project Quite often, readers will write in to us (you can do this by hitting reply to any issue) to ask if we'll link to their latest React-powered project. We often grant this request but sometimes a project seems merely created _with_ React, but isn't open source or particularly relevant in terms of a React newsletter. This week we have a nice exception! [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/lmcsy49oky7lz97gjikp.jpg)](https://reams.app/) [Reams](https://reams.app/), by Adam Butler, is a React Native-powered RSS reader (remember those?) that uses AI-driven layouts to present stories in an immersive but individual style, and while it _is_ available as an app, [it's open source too](https://github.com/admbtlr/reams) so you can learn from the code if you want. 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