#186 — April 29, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

A Critique of React Hooks — Sometimes you have to lead with the controversial item of the week and the Hacker News discussion around this went off into a lot more depth.

Dillon Shook

A Visual Guide to React Mental Models — Different people learn in different ways but good mental models are always valuable and can be helpful if you need to juggle all of the pieces involved in a framework like React.

Obed Parlapiano

Build In-House or Buy a UI Component Library: How to Decide — Whether your goal is to meet a web project's deadline or to work more efficiently, at some point or another, you'll face the choice between building UI internally or buying a ready-made library of UI components. What key factors should you consider?

Progress KendoReact sponsor

When Does React Re-Render Components? — React keeps things fast by only re-rendering things that have changed.. most of the time! But what triggers re-renders and how can you optimize them?

Felix Gerschau

react-pdf-highlighter: React Components for PDF Annotation — Built on top of PDF.js which handles the rendering. Here’s a live demo.

Artem Tyurin

Next.js 9.3.6 Released with Experimental React Refresh Support — Lots of minor tweaks and bug fixes, but the main reason to dig into this is if you’re an existing Next.js user and are curious about the Fast Refresh support.

Vercel (formerly ZEIT)

💻 Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.

Vettery

React Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

ℹ️ Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

Building Smaller React Projects with Parcel — A look at using Parcel, the no-config module bundler, for creating lighter-weight React projects that aren’t overkilling your node_modules folder.

Dave Ceddia

Looking at useEffect Under the Hood — A look ‘behind the scenes’ (well, into React’s source code really) at how useEffect is implemented.

Jan Bussieck

Comparing Next.js and After.js for SSR React AppsAfter.js defines itself as if “Next.js and React Router had a baby…”

John Au-Yeung

Using The key Attribute to Remount a Component — The author admits this is a ‘tool for your toolbelt’ rather than something you should do all the time.

Nik Graf

Porting a React Frontend to TypeScript

Gary Bernhardt

Getting Started with OpenTelemetry in Node.js

Lightstep sponsor

What I Wish I Knew About React (Before I Got Started)

Ire Aderinokun

How I Organize React Projects — Three weeks ago we saw how Robin Wieruch structures his apps, Dana has his own approach which is not dissimilar.

Dana Woodman

▶  Bringing TypeScript to useReducer

Harry Wolff

🔧 Code and Tools

Chromatic 2.0: Code Review but for UIs in Storybook — From the maintainers of Storybook (the popular UI component development tool) comes Chromatic, a service for helping teams review UIs together. It’s a commercial service but free to a certain point.

Chroma Software

use-scroll-to-bottom: A Hook to Tell You When the Page Has Scrolled to the Bottom — Uses the IntersectionObserver API and returns a callback plus a Boolean to indicate if the bottom has been reached.

Tudor Gergely

The Fastest Way to Get Great Bug Reports from Non-Technical Folk — Simply click a page element to pin visual feedback with screenshots & metadata. BugHerd = fast and easy bug tracking.

BugHerd sponsor

enroute: A React Router with a Small Footprint for Modern Browsers

TJ Holowaychuk

MDX 1.6: Use JSX in Markdown Documents — Curiously, 1.6 introduces initial Vue support.

Compositor and Vercel

A Cute Visual Live Code Demo of Framer Motion — As well as being a neat demo (although practical applications of the technique will require some imagination) it’s also showing off Variable, a new code collaboration tool.

Variable

React Native Socials: Embed Posts From Popular Social Networks in Your App — A React Native library (still at version 0, so use caution) to display posts from social networks, such as Twitter and Instagram, in your mobile app.

Pierre Caporossi