#153 — August 28, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Reactime: A 'Time Travel' Debugger for React — Currently a Chrome extension only, Reactime records your app’s state whenever it changes and lets you ‘rewind’ to any previous state for debugging purposes. (Though if you’re using hooks, Context, or functional components, steer clear.)

OSLabs Beta

Write Fewer, Longer Tests — Kent demonstrates, in a realistic React-based context, how making tests too short and granular can simply lead to too many tests and not to worry about combining tests together.

Kent C Dodds

Power Your Website with WebOps — WebOps is the future of web hosting and website operations. Pantheon’s WebOps Platform give you and your web team superpowers. Try for free today.

Pantheon sponsor

React Layouts: 'Grab and Go' Layouts to Use — A variety of different basic layouts with code you can just copy and paste based upon either Rebass, Theme UI, or Emotion (e.g. on this ‘sticky footer’ example you can click between layout systems at the top right).

Brent Jackson

How to Release a React Component, Hook or Effect as an npm Package — Joe found the process of releasing a hook ‘more intimidating than it should have’ so has written down the process to make it easier for you.

Joe Previte

💻 Jobs

Senior Software Engineer - Frontend (100% Remote) — Do you have a solid understanding of web technologies and want to design, implement, and launch major user features? Apply now.


React developers are in demand on Vettery — Make a free profile, name your salary, and connect with hiring managers from top employers.


📘 Tutorials and Stories

▶  The State of React’s State in 2019 — At May’s International JavaScript Conference, Lenz focused on state in React apps, a perennially popular topic for discussion. He covered the different types of state, how to manage them, and where things like MobX and Redux are relevant.

Lenz Weber

📕 20 Patterns to Watch for in Engineering Teams — Actionable insights to help you debug your development process with data. Get your copy.

GitPrime sponsor

Building Components Using Children Props and the Context API

Alexander Solovyev

Setting Up Hot Reloading with Create React App

Pranshu Chittora

▶  Why You Should Stop Using Create React App — The title is a bit baity IMHO but it’s interesting to see how to refactor a project to using Parcel instead of Create React App.

Lucas Chen

Building a React Slider with Parallax Hover Effects — Focuses mostly on the CSS side of things.

Ryan Mulligan

🔧 Code and Tools

Data Table Component: A Flexible React Data Table Library — Packed with features but remaining easy to set up. Uses React 16.8+ and styled-components. Lots of demos here.

John Betancur

Dayz: A Minimal Calendar Component — Not a date selector but more like Google Calendar, say. There’s a live demo here.

Nathan Stitt

The Hands-On Guide to Learning React Hooks. Read the Article

Progress KendoReact sponsor

React Webcam 2.0: A Component to Work with Webcams — Its main method lets you grab the current frame from the camera.

Moz Morris

use-inline-memo — A React hook for memoizing values and callbacks anywhere in a component.

Andy Wermke

Three Tiny Examples of Using React Hooks

Leah McBeth