The story of concurrent rendering in React
🇺🇦 #287 — May 4, 2022
Shopify Unveils React Native Skia — Skia 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.
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 sponsor
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.
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).
Senior Software Engineers at Turo (SF | Remote/Hybrid Options) — The world’s largest car sharing marketplace on a mission to put the world’s 1.5B cars to better use. We’re hiring BE, FE, ML, iOS, Android & DevOps roles at all levels.
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.
How to Build Your Own Blog with Next.js and MDX — A step-by-step guide to building a basic blog that renders posts written in MDX, which mixes Markdown with React components.
React Component Composition Explained — Avoid prop drilling, have cleaner, better structured code.. what’s not to like?
TLDR Newsletter sponsor
▶ Leverage the Web Platform with Remix — A discussion with Remix co-founder Michael Jackson about how Remix is “an outgrowth” of the work that he and Ryan Florence did on React Router, and how Remix wants to bring balance by spanning both frontend and backend.
The devMode.fm Podcast podcast
How to Display and Animate SVG Images in React Native
Samaila Bala (OpenReplay Blog)
How to Build a Complete Next.js App with Vercel and CockroachDB
Aydrian Howard (Cockroach Labs)
🛠 Code and Tools
<ClickToComponent />: Instant Access to Component Source Code — Option+Click React components in your browser to instantly open the source in VS Code. Additionally, Option+Right-Click opens a context menu with the parent components’ props, file name, column number and line number.
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.
Plyr React 4.0: A Responsive Media Player React Component — Supports video, audio, YouTube and Vimeo. GitHub repo.
Loaders — A nice collection of simple loaders and spinners for your next project.
⚡️ Quick Bits:
use-clamp-text — Fix a multi-line textbox at a given height, with an option to ‘read more’.
img-comparison-slider — Intuitive and effective way to compare images before and after making changes.