---
title: "A sneak peek at React 18"
publication: "React Status"
issue: 242
published_at: "2021-06-09"
canonical_url: "https://react.statuscode.com/issues/242"
---

Plus the usual roundup of libraries, tutorials and releases. |        

#​242 — June 9, 2021 

[Read on the Web](https://react.statuscode.com/issues/242)   React Status ⚛️ _Your weekly React news digest, every Wednesday_   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/vndqf2udxvliueznwo1q.jpg)](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html)  

[The Plan for React 18](https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html) — The React team has penned a post outlining all of the exciting things on the roadmap for the forthcoming React 18 (due in its final form in at least _several months' time_ - so no panic). Here’s a break down: 

- Most React users can ignore these updates for now – the biggest changes are for library authors. Cassidy Williams has written [an accessible 'Now what?' introduction](https://dev.to/cassidoo/react-18-alpha-is-out-now-what-2apj) if you do want to learn more, though.
- The [first alpha of React 18 is available](https://github.com/reactwg/react-18/discussions/9) to try now. But don't rush – it's not for production use at all.
- A new Suspense-based [server side rendering architecture.](https://github.com/reactwg/react-18/discussions/37)
- Automatic batching for [fewer necessary renders.](https://github.com/reactwg/react-18/discussions/21)
- A [Transitions API](https://github.com/reactwg/react-18/discussions/41) for keeping an app responsive even during large updates.
- The launch of a [React 18 Working Group](https://github.com/reactwg/react-18) to enable invited members of the community to interact with the React team more directly through [these public discussions.](https://github.com/reactwg/react-18/discussions) 

The React Core Team   [![\](https://copm.s3.amazonaws.com/ef9f03e4.png)](https://www.telerik.com/blogs/generating-pdf-html-react-demo-exporting-invoices?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-export-invoice-to-pdf&utm_content=primary) 

[Generating PDF from HTML in React Demo: Exporting Invoices](https://www.telerik.com/blogs/generating-pdf-html-react-demo-exporting-invoices?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-export-invoice-to-pdf&utm_content=primary) — Learn how to handle a common exporting scenario: exporting documents (in our case, invoices) to PDF. You’ll export SVG elements (via charts) and see how to include components such as DropDowns in your generated PDF files. [Check out the tutorial](https://www.telerik.com/blogs/generating-pdf-html-react-demo-exporting-invoices?utm_medium=cpm&utm_source=reactstatus&utm_campaign=kendo-ui-react-blog-export-invoice-to-pdf&utm_content=primary%20). 

Progress KendoReact sponsor   

▶[Why Is My React App Slow?](https://www.smashingmagazine.com/2021/06/smashing-podcast-episode-38/) — The latest episode of _Smashing Magazine’s_ podcast covers React performance and Drew McLellan talks to JavaScript performance expert Ivan Akulov about what slows down React apps and what can be done about it. 

Smashing Magazine Podcast podcast   

[Introducing Reactron](https://t.co/CfGjsxLnig?amp=1) — By enabling both the visualization and testing of individual components before they are incorporated into the completed page, Reactron encourages the use of [TDD](https://en.wikipedia.org/wiki/Test-driven_development) in the React development process. 

Nathaniel Armstrong   

[How to Create a React Table Component with Resizable Columns](https://www.robinwieruch.de/react-table-component) — A two part series: this first part covers how to create a table component with the [React Table Library](https://react-table-library.com/?path=/story/getting-started-introduction--page), whereas the [second part](https://www.robinwieruch.de/react-table-resize) layers on resizing capability. 

Robin Wieruch   

[How to Memoize with `React.useMemo()`](https://dmitripavlutin.com/react-usememo-hook/) — Improve the performance of your components by using [memoization](https://en.wikipedia.org/wiki/Memoization) to avoid redundant, expensive, time-consuming function calls. 

Dmitri Pavlutin    

Jobs  

[Senior Frontend Engineer (Berlin / Remote)](https://feather-insurance.com/careers/senior-frontend-engineer) — Want to join a small startup with a big growing potential (we double every year)? Feather is looking for a frontend engineer. 
Feather   

[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  

[The Modern Guide to React State Patterns](https://blog.logrocket.com/modern-guide-react-state-patterns/) — At one stage, you could basically just say ‘use Redux’ but there are so many options now and this guide flies through a few approaches. 

Fredrik Strand Oseberg   

[Why React Hooks Cannot Be Conditioned](https://blog.atomrc.dev/p/why-you-cannot-condition-react-hooks/) — If you’re encountering the puzzling `React Hook "useState" is called conditionally` error, this provides a helpful explanation as to why. 

Thomas Belin   

[How to Create a Jumping Text Input Label](https://t.co/c3qwh1fTeH?amp=1) — A short tutorial on implementing this increasingly popular technique for labelling form fields. Not sure what a ‘jumping text input label’ is, exactly? There’s a [CodePen demo](https://codepen.io/ainalem/pen/GRqPwoz) for that. 

Mikael Ainalem   

[[Free Download\] Guide to Effective Feature Management](https://learn.launchdarkly.com/effective-feature-management/?utm_source=cooperpress&utm_medium=display&utm_campaign=q4-cooperpress&utm_content=ebook_oreilly_efm) — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks. 

LaunchDarkly sponsor   

[Lessons on Writing JavaScript and React from ClojureScript](https://jerue.org/blog/lessons-on-writing-javascript-and-react-from-clojurescript/) — [ClojureScript](https://clojurescript.org/) is essentially a Clojure (the Lisp dialect and functional language) to JavaScript compiler and going down the functional path often leads developers to various epiphanies. Ryan is keen to share his experience. 

Ryan Jerue   

[React SEO Strategies and Best Practices](https://www.toptal.com/react/react-seo-best-practices) — Having your app emerge from all the search results background noise depends on it being efficiently indexed by [Googlebot](https://developers.google.com/search/docs/advanced/crawling/googlebot) and other web crawlers. This article explains how your app is indexed by them and then provides techniques for optimization. 

Vineet Markan   

[What You Should Learn before Learning React Native](https://blog.logrocket.com/what-you-should-learn-before-learning-react-native/) — If getting a cross-platform mobile app out there is your goal, it’s tempting to dive straight into React Native development. However, you might want to consider knocking off a few of these prerequisites first. 

Vijit Ail   

[How to Create a Blog with Gatsby](https://t.co/zJo5GYw72g?amp=1) — Want a simple, focused objective to test drive [Gatsby](https://www.gatsbyjs.com/why-gatsby/) and re-platform your blog as part of the bargain? 

Daniele Fontani   

[How to Programmatically Change a Route in Next.js](https://flaviocopes.com/nextjs-programmatically-change-route/) 
Flavio Copes     

🛠 Code and Tools   

supported by [![Okta\](https://res.cloudinary.com/cpress/image/upload/v1602154330/de7dtktheistsfpqdem4.png)](https://developer.okta.com/?utm_campaign=newsletter_cooperpress_all_multiple_inc_dev_sponsored-section_null&utm_source=cooperpress&utm_medium=cpc)    

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/txf2gfy1fwejb4xaxltl.jpg)](https://boringavatars.com/)   

[Boring Avatars: React Library to Generate Custom Avatars](https://boringavatars.com/) — Ranging from generic gradients to face-like creations, this library ([GitHub repo](https://github.com/boringdesigners/boring-avatars)) generates custom, SVG-based, round avatars from any username and color palette. 

Boring Designers   

[Eleven Libraries to Take Your React App up a Notch](https://t.co/aJ3U8y34oU?amp=1) — While these types of articles always reflect the author’s particular preferences, you’ll likely find something new and valuable in this collection. 

Jeffrey Chiu   

[New Mobile Chat Kit From Stream](https://getstream.io/chat/ux-kit/?utm_source=react_status&utm_medium=promoted_newsletter&utm_content=developer&utm_campaign=6_09_21) 

Stream sponsor   

[react-native-multithreading: Spin Off Blocking Calls to a Separate Thread](https://github.com/mrousavy/react-native-multithreading) — While [JavaScript Interface (JSI)](https://github.com/react-native-community/discussions-and-proposals/issues/91) creates new opportunities, it comes with the possibility that some of the longer running calls might actually block the main thread. 

Marc Rousavy   

[Twilio Video React App: Multi-Party Video Application](https://github.com/twilio/twilio-video-app-react) — The explosion in video conferencing precipitated by COVID might incline you to try and get in on the action with a competing, upstart product of your own. 

Twilio   

[Lepton: Lean Code Snippet Manager Based on Github Gists](https://github.com/hackjutsu/Lepton) — Simply use it as is, or as a starting point for your own project. 

CosmoX   

[sweetalert2-react-content: Extends SweetAlert2 to React Elements](https://github.com/sweetalert2/sweetalert2-react-content) — The [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)-compliant replacement for JavaScript’s popup notifications can now provide alerts based on React content as well. 

SweetAlert2     

**⚡️ Quick Bits:** 

Interesting projects which you may have missed: 

- [react-nice-avatar](https://github.com/chilllab/react-nice-avatar) — Simple, user-customizable avatars.
- [keen-slider](https://github.com/rcbyr/keen-slider) — A flexible and powerful touch slider compatible with all common browsers.
- [React Easy Emoji](https://www.npmjs.com/package/react-easy-emoji) — Lightweight emoji rendering utility for React, complete with [Twemoji](https://twemoji.twitter.com) support.
- [react-svg-radar-chart](https://www.npmjs.com/package/react-svg-radar-chart) — Display multivariate data in this popular, 2D chart format.
- [react-spring-lightbox](https://www.npmjs.com/package/react-spring-lightbox) — A flexible image gallery with touch gesture support.          

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