Not all components are created equal
#247 — July 14, 2021
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.
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.
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.
How We Built React Components for Any Front End — Courier, 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.
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.
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.
▶ 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.
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.
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 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.
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.
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.
⚡️ Quick Bits:
Interesting projects which you may have missed:
Akar Icons — Yet another solid entrant in the ever-expanding universe of icon libraries—this one funded by voluntary donations.
react-native-progress — Enable users to track progress on long running processes.
react-json-chart-builder — Chart building component with JSON-driven schemas.