Reactochart: Chart Components by Spotify — We have featured a number of charting libraries in the past but it’s always interesting to see what a well-known brand like Spotify has on offer (and this set is mature and has been around a while). The documentation is good, with each type of chart (line, bar, pie, histograph, heatmaps, and more) illustrated with its own demo.

Spotify

Boop! A Whimsical Twist on Hover Transitions — We love a bit of whimsy here, and Josh has put together a fantastic tutorial (aimed at intermediate React developers) for creating UI elements with a pleasant, animated feel, without being taxing on the browser.

Josh W Comeau

React Component Code Smells — Yes, there are code smells. Here are some which may betray something spoiling in the component source code.

Anton Gunnarsson

A Thoughtful Way to Use React’s useRef() Hook — If you’ve found your components are unnecessarily re-rendering each time you call the update functions, here’s how to use useRef() to get better control of them.

Aleem Isiaka

Fetching Data in React with useEffect — If you’re confused about side-effects and pure functions, it can be hard to understand useEffect. Max unpacks the issues here.

Max Rozen

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find Your Next Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers.

Vettery

DRY-ing Up Styled-Components — The way styled-components keeps JavaScript and CSS in close proximity is appreciated by many developers but, as the author notes, it can also lead to a lot of repetition. She has a solution.

Allie Stehney

Three React Patterns That Can Be Anti-Patterns — When everybody is rushing in one direction, it can take some courage to buck that trend. The author discusses three red hot trends in React which may blind us to simpler and yet more effective solutions.

Ian Ker-Seymer

A Simple Guide to Dark Mode With Gatsby.js — Dark mode is all the rage, of course, so if you're using Gatsby and want to get up to speed, this is the know-how you’ll need.

Victor Zhou

How to Measure Performance Metrics in React Native Apps

New Relic sponsor

Build a Next.js Application with TypeScript — If you’re considering building your own identity and access management system for your app, Okta has a solution which may be a better choice, as this in-house article illustrates.

Nickolas Fisher

Making Authentication in React Apps Easy With useAuth — Still prefer to roll your own authentication? Dan Wilson, TJ Vantoll and Swizec Teller discussed this recently on the React Wednesdays who figure it can be done in about 10 minutes (or less).

Dan Wilson

An Introduction to React Colorful: A Minimalist and Fast Alternative to React Color — We first featured this library in Issue 203. Now, here’s a walkthrough of why you might want to use it instead of the more fully featured react-color library.

Nathan Sebhastian

The Ultimate Guide to Electron with React — Electron is employed by the likes of Slack, Skype, WhatsApp, GitHub, Microsoft Teams and Twitch. If that’s the kind of company you would like to keep, here’s how to get started with the cross-platform desktop app development system.

Aditya Patnaik

Building a Secure Mobile App With React Native — A solid, high level overview of security considerations to consider before embarking on your next React Native project.

Sophia Martin

Why Did You Render: A React Monkey Patch to Notify You About Avoidable Re-Renders — Can be used to optimize re-renders in your React app or just to track when and why components are re-rendering. It's been around a while but as of this week it supports React 17.

Welldone Software Solutions Ltd.

Next + Netlify Starter: Instant Deployment — If you’ve considered jumping on the PaaS bandwagon, here’s a quick, easy and familiar way to give it a try: a Next.js project which ‘instantly’ deploys to Netlify, as described by one of the Netlify folks.

Cassidy Williams

Stream Announced the Public v2.0 Availability of Their React Native SDK — The React Native Chat SDK v2.0 is fully TypeScripted, based on React hooks and revised for performance improvements.

Stream sponsor

useAudioPlayer: A Hook for Controlling Browser Audio — Last week we featured an article on how to build your own podcasting service. Now, how about a custom audio player app to go with it? This set of React Hooks is used to control the Howler.js audio player.

Erich Kuerschner

react-instagram-embed: Bring Instagram Photos to Your App — With (literally) a billion Instagram users there is no shortage of images you may want to embed in our app. Here's a component to do it.

Shingo Sato