The story of concurrent rendering in React

May 4, 2022 By Mark Otto 0

Shopify Unveils React Native SkiaSkia is a popular (used in Chrome, Android, Firefox, etc.) 2D graphics library and Shopify has brought its 2D drawing capabilities into React Native for you to create your own cross-platform graphics on the fly in any RN app. GitHub repo.


▶  The Story of Concurrent React — 2168 days of work covered in just 12 minutes! Kinda. This video aims to bring you up to speed with React’s concurrency story, how the various parts came into place, how they work, and what the benefits are.

Tyler McGinnis

Updated: Complete React Learning Path — Frontend Masters flagship React courses have been released! Take all our React courses in order, from the new Complete Intro to React v7 and Intermediate React v4 courses, to TypeScript and beyond!

Frontend Masters

Why I Don’t Miss React — This isn’t a call to drop React or a declaration of it being ‘dead’ or that all web frameworks are useless. But the author did go from using React every day to not using it at all, and it was a more pleasant journey than he was expecting.

Jack Franklin

Quick bits:

  • Next.js user? Expect a big upgrade to routing very soon.

  • React Native 0.69.0 is on the way – it’ll be the first RN release to ship with React 18 and open up all the concurrent features (for ‘new architecture’ users only).

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

🛠 Code and Tools

React Toastify 9.0: Notification Boxes Made Easy — A popular library. It now supports ‘stacked toasts’, an elegant approach to visualizing growing numbers of notifications. There’s also useNotificationCenter, a new hoook for letting you build a notification center on top of React Toastify. GitHub repo.

Fadi Khadra

Loaders — A nice collection of simple loaders and spinners for your next project.

Griffin Johnston

⚡️ Quick Bits:

use-clamp-text — Fix a multi-line textbox at a given height, with an option to ‘read more’.

react-dropzone — A hook to create a HTML5-compliant drag‑n‑drop zone as shown in this demo.

img-comparison-slider — Intuitive and effective way to compare images before and after making changes.