--- title: "React 18 reflections" publication: "React Status" issue: 243 published_at: "2021-06-16" canonical_url: "https://react.statuscode.com/issues/243" --- Plus an alternative state manager goes 1.0, get 'stories' in your React apps, and the usual tutorials and releases. | #​243 — June 16, 2021 [Read on the Web](https://react.statuscode.com/issues/243) React Status ⚛️ _Your weekly React news digest, every Wednesday_ [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/mmyavm6hmhcu5ebc4o2m.jpg)](https://nextjs.org/blog/next-11) [Next.js 11 Released](https://nextjs.org/blog/next-11) — The popular React framework takes some more steps forward with improved performance, Webpack 5 support, an experimental way to make Create React App apps Next.js compatible, and [Next.js Live](https://nextjs.org/blog/next-11#nextjs-live-preview-release), a preview of a way to build Next.js apps in the browser, collaboratively, with your team. Next.js Team [![\](https://copm.s3.amazonaws.com/aa4557c9.jpg)](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=reactstatus&utm_medium=email&utm_campaign=reactv3) [Learn to Build Scalable React Apps](https://frontendmasters.com/courses/intermediate-react-v3/?utm_source=reactstatus&utm_medium=email&utm_campaign=reactv3) — Brian Holt covers the latest tools in the React ecosystem like TypeScript, TailwindCSS, Redux, Jest, and more in this new and updated video course! Frontend Masters sponsor **MORE LOOKS AT REACT 18:** Last week [we focused](https://react.statuscode.com/issues/242) on the [plans for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html), coming in final form later this year. Numerous React developers have picked over and digested the plans and come up with some helpful explainers: - [▶️ What’s New in React 18](https://www.youtube.com/watch?v=bpVRWrrfM1M) by _eveningkid_ is a five minute video quickly skimming through what's new with some neat diagrams. - _Harry Wolff_'s [▶️ What You NEED To Know About React 18](https://www.youtube.com/watch?v=uOGImWM85Uw) takes a longer 15-minute tour with the first five minutes being the quick takeaways and the rest a bit of a deeper dive. - [What You Need to Know About React 18](https://t.co/UI0D57HIMV?amp=1) by _Sheeraz Shaikh_ covers similar ground in written form. [Redux Toolkit 1.6.0 Adds RTK Query Data Fetching APIs](https://github.com/reduxjs/redux-toolkit/releases/tag/v1.6.0) — The 'batteries-included' toolset for efficient Redux development adds [RTK Query](https://redux-toolkit.js.org/rtk-query/overview) which simplifies common cases for loading data in a web application, eliminating the need to hand-write data fetching and caching logic yourself. Redux [Why the React Testing Library Is Much More Than a Testing Library](https://t.co/k0wP3gloKF?amp=1) — The author makes the case for using [RTL](https://testing-library.com) and its ability to mimic user interactions and making them the objective of testing, rather than the fragile minutia of the test implementation details. Richard Zheng Jobs [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) — Take 5 minutes to build your free profile & start getting interviews for your next job. Companies on Hired are actively hiring right now. Hired 📘 Tutorials and Stories [Building a Rich WYSIWYG Text Editor From Scratch](https://www.smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/) — Learn how to build a rich text editor into an app with [Slate](https://github.com/ianstormtaylor/slate) doing the heavy lifting. Shalabh Vyas (Smashing Magazine) [Adding Voice Search to a React App](https://www.sitepoint.com/voice-search-react/) — Learn how to use the Web Speech API to add a simple ‘voice search’ functionality to your app. Chris Laughlin [Better Onboarding: How to Prevent Codebase Overwhelm](https://about.sourcegraph.com/blog/better-onboarding-how-to-prevent-codebase-overwhelm/?utm_source=react-status&utm_medium=text&utm_campaign=blog-better-onboarding&utm_content=blog-text) — It can be difficult onboarding to a complex codebase. Learn these best practices and how to get up to speed fast. Sourcegraph sponsor [Building My Site With Gatsby and Tailwind CSS](https://mihaibojin.com/personal-site/gatsbyjs-and-tailwindcss-tech-stack) — A concise, step-by-step tutorial which will get you up and running with this increasingly popular combination of tools. Mihai Bojin [How To Implement JavaScript Canvas Libraries in React](https://www.alxolr.com/articles/how-to-implement-javascript-canvas-libraries-in-react) — Looking to implement an animated starfield (for example) as a background for your latest magnum opus? This succinct article walks through the use of the [p5.js](https://p5js.org) library to do just that. Alexandru Olaru [How To Use the Vite Build Tool with React](https://hackernoon.com/how-to-use-the-vite-build-tool-with-react-2t1934rd) — A brief tutorial on [Vite](https://vitejs.dev), which is gaining traction as a more efficient alternative to [webpack](https://webpack.js.org), [Rollup](https://rollupjs.org/guide/en/) and [Parcel](https://parceljs.org). Nico [Deep Dive Into React Context API](https://t.co/3AvlNawqpL?amp=1) — For props used by many components (such as UI theme, for example) use React’s [Context](https://reactjs.org/docs/context.html) API to make them available throughout your component tree without the hassle of all that passing them from parent-to-child. Harsh Patel 🛠 Code and Tools [Jotai 1.0: Primitive and Flexible State Management](https://jotai.pmnd.rs/) — Yet another contender for the state management space, this one is based on “an atomic model inspired by [Recoil](https://recoiljs.org)”. [GitHub repo](https://github.com/pmndrs/jotai). Poimandres [react-insta-stories: Instagram-like Stories Component](https://npmjs.com/package/react-insta-stories) — A component which emulates the look and feel of [Instagram Stories](https://about.instagram.com/features/stories), versions of which seem to be showing up everywhere. Mohit Karekar [[Download\] Forrester New Wave: Feature Management and Experimentation](https://learn.launchdarkly.com/forrester-wave/?utm_source=cooperpress&utm_medium=display&utm_campaign=21q1-cooperpress&utm_content=ebook_forrester_wave) LaunchDarkly sponsor [react-native-in-app-review: In App Reviews](https://npmjs.com/package/react-native-in-app-review) — I'm not sure how many users really like these, but with this approach you can prompt for ratings and reviews without your user having to leave your app (and possibly never coming back). Mina Samir Shafik [React Cool Virtual: A Hook for Rendering Large Datasets](https://github.com/wellyshen/react-cool-virtual) — This library implements a small, efficient hook which employs [Dom recycling](https://developers.google.com/web/updates/2016/07/infinite-scroller). It’s an alternative to the [plethora of libraries](https://www.npmjs.com/search?q=react%20virtualized) already in this space. Welly Shen **⚡️ Quick Bits:** Interesting projects which you may have missed: - [iconicicons](https://github.com/Make-Lemonade/iconicicons) — [Browsable](https://iconic.app), “pixel perfect” icons ready for React. - [React Move](https://npmjs.com/package/react-move) — Data-driven animations. - [react-froala-wysiwyg](https://npmjs.com/package/react-froala-wysiwyg) — React bindings for the [Froala WYSIWYG](https://froala.com/wysiwyg-editor/) editor. - [react-highlight-within-textarea](https://npmjs.com/package/react-highlight-within-textarea) — Rewritten as a simple wrapper of the [Draft.js](https://draftjs.org) rich text editing library. - [react-zoom-pan-pinch](https://npmjs.com/package/react-zoom-pan-pinch) — Zoom, pan and pinch HTML elements. 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