#148 — July 24, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React Chaos: It's Time to Introduce Some Chaos into Your ComponentsChaos engineering is the idea of introducing random faults into your apps in order to test their resiliency or to find weak points.. and this is a proof-of-concept higher order component that will randomly ‘break’ your React components.

J.C. Hiatt

The Fundamentals of React — An evergreen, one-stop-shop introductory guide to React that covers all of the fundamental concepts you need to know.

Samer Buna

A Comprehensive Code Analysis Tool for React Developers — Start building React applications more reliably with DeepScan through advanced static analysis. Unlike many linter tools, DeepScan can find possible runtime errors and code quality issues. Available for free for open source projects.

DeepScan sponsor

▶  Discussing Open Source Management with Tom Occhino — Tom Occhino, an engineering director at Facebook, goes into a lot of depth about how React is managed as a project and how its position as a popular open source project relates to its management within a commercial organization.

Software Engineering Daily podcast

Algebraic Effects for the Rest of Us — I love how Dan always explains whether or not you really need to know what he explains in his posts. In this case, this isn’t a must read but you might enjoy getting a grasp on algebraic effects, an advanced functional programming idea, and their potential relationship to things that take place within React’s internals.

Dan Abramov

💻 Jobs

Frontend Developer - Remote — Build the web’s next-level document collaboration library with React.


Find a Job Through Vettery — Vettery matches top tech talent with growing companies. Create a profile to get started.


📘 Tutorials and Stories

When to Break Up a Component Into Multiple Components?“don’t be afraid of a growing component until you start experiencing real problems..”

Kent C. Dodds

Using React.memo() WiselyReact.memo() can be used to improve the performance of pure functional components by preventing useless re-renders. But such tweaks must be applied wisely.

Dmitri Pavlutin

Web Accessibility Guidebook for Developers. Learn the Best Practices

Progress KendoReact sponsor

Developing a Site with React, Feature Flags, Netlify and GitHub Actions

Timon Van Spronsen

Creating Smooth Animations with React and Framer Motion — Last week we featured Framer Motion, an open source successor to Pose for building high quality animations in React apps. Here are basic examples on how to use it.

Indrek Lasn

Getting Started with React Native in 2019: Building Your First App — A guide for React Native beginners.

Aman Mittal

▶  Building a Complete Social Media App with React and Firebase — Do you have 12 hours to spare? If so, you could do worse than learning from this epic tutorial. If you prefer something more bitesize, it’s also available as a playlist of 34 videos with the front-end React part starting at video 14.


🔧 Code and Tools

Tabulator: An Interactive Table and Data Grid Library — It’s not React-specific but works alongside it. Here are the basic instructions along with code examples.

Oli Folkerd

React Border Wrapper: A Way to Place Elements Along div Borders

Christopher Powroznik

react-trello: Trello-Like Kanban Boards for Your App — Despite the name, this project has nothing to do with Trello, but if you’ve used it and you like its kanban board approach, this lets you recreate the effect. Full demo here.


Take Back Your Development Time - Try Pantheon, the WebOps Platform Built for Agility

Pantheon sponsor

react-kiwi-dropdown: An Easy-to-Use and Highly Adjustable React Dropdown

Kim Vigren

react-inlinesvg: An SVG Loader Component

Gil Barbara

useHooks: 19 React Hook Recipes — It hasn’t been updated for a while but this is a neat list of React hook uses nonetheless.

Gabe Ragland