#150 — August 7, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

5 Tips to Help You Avoid React Hooks Pitfalls — Given how much they’re covered now, it’s easy to forget hooks are less than a year old :-) Here, Kent explores some of their ‘gotchas’ and the best way to avoid them.

Kent C Dodds

How Does React's Development Mode Work? — React’s development mode informs you about various things that could cause problems in your app, but these checks are turned off in production for performance reasons. This is an explanation of just how that works.

Dan Abramov

New Introduction to Gatsby Course with Jason Lengstorf — Build blazing 🔥 fast website by default with Gatsby. In this course, you'll build up a blog from scratch and deploy your brand new blog to Netlify for the world to see.

Frontend Masters sponsor

Apollo Client, Now with React HooksApollo Client is a popular library for handling state and fetching when using GraphQL-based APIs. It now includes official support for React hooks including a special hook for performing queries in a lazy fashion.

Hugh Willson

React Native Gets A Shiny New Homepage — The React Native team have been working on a new homepage design – looks great. I think the React Native blog is looking a little sharper too.

Facebook

💻 Jobs

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

X-Team

React Developers Are in Demand on Vettery — Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.

Vettery

📘 Tutorials and Stories

22 Handy Tools for React Developers in 2019 — OK, it’s a listicle but enough depth and explanation is provided for each of the items to make it genuinely useful.

JS Manifest

Build Your Own Tic Tac Toe Game with Hooks and Styled Components — A complete tutorial that also digs into the ‘minimax’ approach the logic can take to make an ‘unbeatable’ player.

Oleksandr Khomenko

Simplify Event Tracking with a Single API — Collect data once with Segment and send it to 200+ tools. Get a free developer account.

Segment sponsor

How Redux Connect Compares to the New Redux Hooks

Terence Jeong

How to Fetch Data with React Hooks — Not sure how we missed this before, but it’s still a great tutorial now and uses Hacker News APIs as the back-end guinea pig.

Robin Wieruch

▶  Building a YouTube 'Clone' Using React — An hour long video boil-down of how to create a new front-end for YouTube with React, powered in the backend by YouTube’s API to provide the videos.

JavaScript Mastery

🔧 Code and Tools

React Archer: Draw Arrows Between DOM Elements

Pierre Poupin

React Spaces: Divide a Page or Container into Scrollable and Resizable 'Spaces' — It’s not quite 1990s style HTML ‘frames’ but.. it’s not miles away either 😄

Allan Eagle

React-Flippy: A 'Flipping' Card Component — You get a front side, a back side, and the ability to flip horizontally or vertically.

Berkay Aydın

📕 20 Patterns to Watch for in Engineering Teams

GitPrime sponsor

webpack Bundle Analyzer: See What Files Make Up Your Bundle — Get an interactive, zoomable treemap of your bundle contents. Handy if you want to trim things down and see how much of an impact your dependencies are having.

webpack-contrib

A React-Powered Button Containing a 'Loading Spinner' — A code example of creating buttons that have embedded loading spinners.

CodeSandbox