#​302 — August 24, 2022

Read on the Web

If you missed our note two weeks ago, we just had a week off, so you didn't miss any issues :-) We're now back every week until Christmas (a mere 123 sleeps away!)
__
Peter Cooper and Terence C. Gannon, your editors.

React Status

Why React Re-Renders — The processes around rendering are so important to understand and get right if you want to get the best performance possible from your React apps. There’s no shortage of stories talking about making React rendering more efficient, but this one digs into why React re-renders in the first place and in an accessible, easily followed way too.

Josh W. Comeau

💡 why-did-you-render is a classic tool for going further down the rabbit hole with this!

(Re-)Introducing Gatsby, A 'Reactive Site Generator'? — Gatsby’s new focus is on enabling teams to publish content rapidly using a new architecture that they say allows Gatsby Cloud to publish to its CDN in one second. This post benchmarks Gatsby’s “Reactive Site Generation” (RSG) approach against traditional static and server side approaches.

Kyle Mathews

Implementing Collaboration Has Never Been Easier — Transform your application within hours thanks to ready-to-use features like comments, track changes, real-time collaboration, and version history. With CKEditor 5 and its native React integration, it is that easy! Start a free trial to test it right away.

CKEditor 5 sponsor

Advanced React Component Composition — A deep dive into the principles of composition for designing and building reusable components that scale.

Frontend Mastery

How to Use Forms in React — A seemingly basic topic covered at a low level in Robin’s typically easily accessible manner. Once you grasp the basics, you can then pick up things like React Hook Form or Formik with confidence.

Robin Wieruch

Dynamic Link Previews for a React SPA using AWS Lambda@Edge — Using AWS’s edge-based serverless function service to render an index.html with dynamic meta tags to support link previews on WhatsApp, Twitter, and similar services for a React SPA.

Gareth Cronin

The Minimum TypeScript You Need for React — If you don’t have the time to learn every React-related tool in fine detail, here’s at least the need to know list for TypeScript, to free up some time to learn the other things you’ll also need to know.

The Ente Blog

Jobs

Senior JavaScript/TypeScript Developer (Remote or Warsaw) 🇵🇱 — Join the CKEditor team to develop an Open Source project used by millions of users around the world 🚀and realize your true potential.
CKEditor

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.
Hired

7 Best Ways to Create a New React AppCreate React App might be the best known, but there are a few other approaches worth considering including larger frameworks (like Next.js) or build systems like NX.

Jonathan Saring (Bit)

Framer Motion: The New and Underestimated Features — An independently produced review of this popular animation library with a focus on features the author believes are often overlooked.

Kostya Stepanov

▶  Learn React Router v6 in 45 Minutes — Well presented screencast.
Web Dev Simplified

Improving the Interaction to Next Paint (INP) Metric with React 18 and Suspense
Lee Robinson (Vercel)

🛠 Code and Tools

react-easy-crop 4.5: A Component to Crop Images and Videos — Specifically, it’s so your users can crop images and videos. Mobile friendly, and there’s a live demo on the homepage. GitHub repo.

Valentin Hervieu

ReacTOUR 3.0: A 'Tourist Guide' for React Components / DOM Elements — The basic idea is to open up ways for you to dynamically highlight or mask other components on the page, such as if you want to do a ‘user tour’ type feature. It’s quite flexible though and could be used for all manner of DOM element masking tasks – try the demos. GitHub repo.

Lionel Tzatzkin

Free Activity Feeds & Chat APIs for Qualifying Teams

Stream sponsor

React Colorful 5.6: A Small Color Picker Component for (P)react — Nice demo that changes the color of the homepage.
Vlad Shilov

⚡️ THE RAPID RELEASES ROUND

React Admin 4.3 – Framework for building B2B app admin panels.
React on Rails 13.1 – A way to integrate React with Ruby on Rails apps.
react-three-fiber 8.6 – React renderer for Three.js.
Jotai 1.8 – Flexible state management for React.
react-day-picker 8.1.2 – Date picker component. (Examples.)
Recoil 0.7.5 – Experimental state management library.
Mantine 5.2.3 – Popular React component library.
MDX 2.1.3 – Markdown for the component era.
React Leaflet 4.0.2 – Components for Leaflet-rendered maps.
styled-jsx 5.0.4 – Full CSS support for JSX without compromises.
PrimeReact 8.4 – Library of 80+ UI components.
react-windows-ui 4.2 – Build Windows 'Fluent UI' apps with React.