Not all components are created equal

#​247 — July 14, 2021

Read on the Web

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

A Checklist for Freelance React Developers — Robin covers a variety of things to think about if you’re an independent React developer who needs to seamlessly get involved with existing teams and projects.

Robin Wieruch

One React Mistake That’s Slowing You Down — Are you jumping from passing props to using context too quickly? Here’s the case for why Kent C. Dodds thinks you might be.

Kent C. Dodds

Learn React (Hooks) Interactively with Flashcards — Learn modern React from scratch, and practice in an intuitive environment. Throughout this course, you will build an online supermarket shopping app with Stripe integration.

REACT-TUTORIAL.APP sponsor

Breaking Down Bulky Builds With Netlify and Next.js — Even though the article is sponsored by Netlify, the author makes a compelling case for how to improve static site build times using On-Demand Builders and Incremental Static Regeneration.

Átila Fassina

How We Built React Components for Any Front EndCourier, the fee-based service for adding messaging capability to your app, created components using React which their customers use to render Courier components, regardless of which front-end is being employed.

Riley Napier

Not All Components Are Created Equal — There have been a number of past attempts to lump components into broad categories which were mostly eschewed by the React community. Despite that, the authors advocate for a new taxonomy based on three component classes.

Emily Bartman and Phil Plückthun

📘 Tutorials and Stories

React Fragments: What Every React Developer Should Know — As a general rule, React components can only return one HTML element which can lead to the DOM being unnecessarily nested. React Fragments provide an efficient workaround to this problem.

Antonello Zanini

How to Cancel Pending API Requests to Show Correct Data — A user rapidly clicking around your app’s UI may result in API requests not completing before being superceded by subsequent API requests. Cancelling the outdated API request ensures only correct data is displayed.

Georgi Nikoloff

OpenTelemetry and Distributed Tracing for Mobile Applications

Lightstep sponsor

▶  How to Integrate PayPal Payments in React — A short video tutorial on how your app can accept PayPal payments even from those who don’t have PayPal accounts.

Michael Kitas

How to Improve Your Developer Experience with React, Hooks and Redux Toolkit

Oren Farhi

Why We Decided to Rewrite Our iOS and Android Apps from Scratch — In React Native

Naoya Makino

Jobs

Now Hiring: Work with the Best, Building the Best — The sharpest developers, building the fastest websites. Looking for more, to build more. Join us.

Econify

Frontend Engineer (React, New York) — Dovetale helps Shopify merchants like KontrolFreek and Italic grow their creator community. Built in NYC and backed by Uber founders.

Dovetale

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

🛠 Code and Tools

React Virtual 2.8.0: Hooks for Virtualizing Scrollable Elements — With a single headless hook you can work with row, column and grid level virtualization, get imperative scrolling when needed, custom scrolling function support, and more. Lots of CodeSandbox demos here too.

Tanner Linsley

Network-Viewer: HTTP Archive File Viewing For Humans — An example of React being used to create an internal web utility, complete with source code. Check out the example.

Tiaan du Plessis

React 3D Carousel — A nice, incremental improvement on more basic, ‘flat’ carousel components used for viewing galleries of images.

Suhail C

Fre: Small Footprint Concurrent UI for Fiber — Inspired by React, “one of the smallest and fastest UI libraries” implements concurrent mode and off-screen rendering to enhance performance.

Yisar

Berry: A Free Admin Template Built with React and Material UI

CodedThemes

⚡️ Quick Bits:

Interesting projects which you may have missed:

React Page Scroller — Smooth, full-page scrolling component with demo.

Akar Icons — Yet another solid entrant in the ever-expanding universe of icon libraries—this one funded by voluntary donations.

react-otp-input — Add PIN code security to your app.

react-native-progress — Enable users to track progress on long running processes.

react-json-chart-builder — Chart building component with JSON-driven schemas.

Leave a Reply

Your email address will not be published. Required fields are marked *