#​241 — June 2, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday

Top React Component Libraries (2021 Edition) — The folks at Retool just released the 2021 update of their list of top React libraries. But it’s more than just a list, but rather a detailed synopsis seemingly based on first-hand experience.

Kevin White

Svelte for the Experienced React DevSvelte distinguishes itself from other frameworks by gaining efficiency with build time (as opposed to run time) compilation to vanilla JS. This walks through the basics with a React-leaning eye.

Adam Rackis

[Free Download] Guide to Effective Feature Management — Learn feature management practices to accelerate release cycles and deploy every 6 hours, instead of every 6 weeks.

LaunchDarkly sponsor

useStateMachine: The ½KB State Machine Hook — It only makes sense to bundle a state machine into a hook. We have featured a number of Cassio’s videos in the past, so it’s no surprise there’s a video walkthrough with examples which illustrate its use.

Cassio Zen

'Why We Need to Stop Using React' — Every once in a while we like to present an alternative perspective on React, just to keep everybody honest. This article has generated some light, for sure, but as you might expect quite a bit of heat to go along with it. What's curious is that in a followup, Angular is pitched as the better alternative.

Sam Redmond

P.S. Don't stop using React.. 😄

Introduction to Framer Motion for React — A reasonably short, focused, step-by-step tutorial on the popular animation library.

Manusha Chethiyawardhana

Jobs

React Developer at X-Team (Remote) — 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 — 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

How to Use Testing Library to Test Storybook — You may already be using Storybook to catalog all your key components states. Now you can re-use that logic with React Testing Library.

Yann Braga

Dynamic vs Static Routing in React — Static routes are defined upfront in a centralized location in your app, whereas dynamic routes are initialized on render and can provide more flexibility. This explains the difference between the two and the situations where each is applied.

Chameera Dulanga

Why Tracing Might Replace (Almost) All Logging

Lightstep sponsor

Journey of Improving React App Performance by 10x — The first of three articles focused on performance improvement: the first starts with some ways of figuring out why application performance is suffering and then provides four specific, prescriptive techniques for eliminating the bottlenecks.

Mayank Sharma

Top Seven Libraries for Blazingly Fast React Applications — The second article in this mini-series provides some specific recommendations on libraries which will also help make your app even faster.

Mohammad Faisal

Seven Steps to Modernize and Optimize Your React App — The third and final article in this mini-series provides still more recommendations for making your app’s performance truly stellar.

Mucahit Gurbuz

🛠 Code and Tools

xstyled 3.0: A Utility-First CSS-in-JS Framework Built for React — A CSS-in-JS framework built for React with props based utilities like display, fontSize or rotate.

Greg Bergé

Windmill React UI: Fast, Accessible and 'Gorgeous' UIs — This brand new, pre-1.0 UI is stirring up considerable interest. GitHub repo.

Estevan Maito

react-swipeable-views: A 'Swipeable' UI Made Easy — Swiping has become a de-facto standard within app navigation on mobile devices, and this library provides the basic tools to implement it. Try the demo on your phone or tablet or even, less naturally, your non-touch device.

Olivier Tassinari

react-simple-flowchart: Flowchart Component Based on flowchart.js — The flowchart is celebrating it’s 100th anniversary and it’s still an effective way of diagramming process flow.

Alex Vinokurov

React Editor Demo: Add an Editor Component the Easy Way — Let’s remove the hassle of adding a Rich Text Editor into your app and implement some neat features while we're at it. Learn how.

Progress KendoReact sponsor

react-easy-crop: Crop Both Images and Video — Switzerland’s largest online marketplace—Ricardo—contributes this richly-featured image and video cropping tool. There are lots of CodeSandbox examples illustrating its various capabilities.

Ricardo

React Slider: Flexible Input of Numeric Ranges — The popular UI affordance can be configured in a wide variety of ways, as illustrated with their live demos included in their documentation.

Zillow

⚡️ Quick Bits:

Interesting projects which you may have missed: