📊 Spotify's React charting components

Plus 'Why Did You Render' now supports React 17, and a whimsical take on hover transitions.

#216 — November 25, 2020 Read on the Web React Status Your weekly React news digest, every Wednesday 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 ▶  How to Build a React Form Without the Hassle — Building React forms from scratch can be messy. How do you deal with form validation or styling, for example? An efficient and easier way is to use the React form library in KendoReact, a professional UI component library. Learn more in the video. Progress KendoReact sponsor 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 Announcing Gatsby's New File System Route API Lennart Jörgens 💻 Jobs 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 🧑‍💻 Interested in running a job listing in React Status? There's more info here. 📘 Tutorials and Stories 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 🛠 Code and Tools supported by 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 ⚡️ Quick Bits: Small, focused libraries that deliver big value. Try them in your next project: react-gl-transition-image by Jakob Stasilowicz react-collapse by Nikita Butenko react-native-responsive-fontSize by Yeongsu Han use-editable by Phil Pluckthun

This issue was curated by Terence C. Gannon and edited by the Cooperpress team. A Cooperpress publication. Change your email address or Stop getting this newsletter © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom