#156 — September 18, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

How to Profile a React App for Performance — Kent is on 🔥 lately with the React performance posts, and this is a great one. See how to use the React DevTools and React’s profiling build to get started with performance profiling a production app.

Kent C Dodds

An Advanced Redux Starter Kit TutorialRedux Starter Kit’s aim to is to make using Redux with your React app easier. This tutorial holds no punches and shows how to use it with large, real world apps, beyond the typical basic examples.

Mark Erikson

⚛️ New Course: Complete Intro to React, v4 — Learn to build real-world applications in React. Much more than an intro, you’ll start from the ground up all the way to using the latest features in React 16+ like Context and Portals. We also launched a follow up course, Intermediate React.

Frontend Masters sponsor

Relay 6.0 Released: A Framework for Building Data-Driven React Apps — A way to avoid using imperative APIs for fetching data in React apps. Instead, you define your data requirements using GraphQL and Relay does the rest. 6.0 changelog.


Kea 1.0: A High Level Abstraction Between React and Redux — Billing itself as a ‘data layer for React’, Kea is a long standing project that has recently been completely rewritten to modern React standards (though it’s not well suited for use with TypeScript). Check out the homepage for the best feel of what it provides. Here’s a full Kea 1.0 change log, plus the GitHub repo.

Marius Andra and Contributors

Bridging the Gap between useState, useReducer, and Redux — A truly meaty post digging into one developer’s journey to learn about hooks, managing state, using reducers, and where Redux fits into the big picture.

Lee Warrick

💻 Jobs

Full Stack Engineer — Expensify seeks a self-driven individual passionate about making code effective, with an understanding of algorithms and design patterns.


Get Hired Based on Your Skills Not Your CV — We’ll introduce you to over 1,500+ companies who’ll compete to hire you. You’re always hidden from your current employer and we’re trusted by over 100k developers.


📘 Tutorials and Stories

Animating Next.js Page Transitions with Framer MotionFramer Motion is a powerful and feature packed library for creating slick Web animations.

Kristian Heruc

Getting Started with Electron, TypeScript, React and Webpack — Covers the essentials of setting up an app with the various tools. The actual app building is left as an exercise for you!

Justin Ellison

The Hands-On Guide to Learning React Hooks. Read the Article — Learn all about React Hooks as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks.

Progress KendoReact sponsor

'Higher Order Hooks'? Don't Call Them That..! 😄 — It’s basic function composition really, but had it occurred to you to feed the output of one hook directly into another?

Ryan Florence on Twitter

▶  Composing Behavior in React or Why React Hooks are Awesome — If you liked the Twitter thread above ⬆️, you’re going to really enjoy this code heavy 30 minute talk.

Michael Jackson

Avoiding useEffect Race Conditions with a Custom Hook — I particularly like how this article is from the future..

Stewart Parry

▶  'Why We Should Ditch React' — Yes, this is an opinion piece, but we’re not against linking to things like that as they can help broaden our minds and think about how and why we use the tools we do.

Chris Hawkes

How to Build a Switch Toggle Component

James King

🔧 Code and Tools

React Rainbow Components: Another Suite of React Components — There are quite a lot of component sets out there now – this is another, they’re pretty slick and there are demos for all of them. Certainly worth a look. GitHub repo.


CRACO: Create React App Configuration Override — A way to get the benefits of create-react-app with added customization (of things like ESLint, Babel, PostCSS, etc.) without using ‘eject’.


Use Your Website to Drive Results? You Need WebOps. Learn Why

Pantheon sponsor

React Credit Cards: A Modern Credit Card Component — You’d use something like this on your checkout pages to autopopulate a visual representation of a credit card.