---
title: "Using the React DevTools Profiler to Diagnose Performance Issues"
publication: "React Status"
issue: 103
published_at: "2018-08-31"
canonical_url: "https://react.statuscode.com/issues/103"
---

This week's React news       

#103 — August 31, 2018 

[Read on the Web](https://react.statuscode.com/issues/103)   

react status 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ltckex4x683cdfs2dm0w.jpg)](https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/)  

[Using the React DevTools Profiler to Diagnose Performance Issues](https://www.netlify.com/blog/2018/08/29/using-the-react-devtools-profiler-to-diagnose-react-app-performance-issues/) — The most recent [React DevTools](https://github.com/facebook/react-devtools) provides a tab for profiling, and this article covers how Netlify used this profiler to fix a long-standing performance issue in their client-side code. 

Shawn Wang (Netlify)   

[React Riot: A 48 Hour React-Oriented Online Hackathon](http://www.reactriot.com/) — Registration is open for the online React hackathon, taking place this year on September 15-16. A hackathon where you can stay in your pyjamas? Fab. 

Hackbit   

[Data-Driven Guide to Level-Up Your Engineering Team 🚀](https://www.gitprime.com/resources-data-driven-engineering-metrics/?utm_source=email-nl%28reacts%29&utm_medium=nl&utm_campaign=email-nl%28react%29) — We analyzed 10M+ commits and share how you can include data-driven insights to increase velocity. Empowering teams with deep git visibility to determine what’s working, celebrate victories and quickly identify risks. [Request a free trial](https://www.gitprime.com/resources-data-driven-engineering-metrics/?utm_source=email-nl%28reacts%29&utm_medium=nl&utm_campaign=email-nl%28react%29). 

GitPrime sponsor   

[Material-UI 3: React Components That Implement Google's Material Design](https://github.com/mui-org/material-ui) — [Version 3](https://github.com/mui-org/material-ui/releases) is out bringing Babel 7 support and huge space savings in the icons package. 

Material-UI   

[Reworm: The 'Simplest Way' to Manage State](https://github.com/pedronauck/reworm) — Another entrant into the state management game - check out the example code though, it is pretty straightforward. 

Pedro Nauck   

[Pose 3.0: An Animation Library for React and React Native](https://popmotion.io/blog/20180820-introducing-pose-3/) — The popular declarative animation system now supports more UI events to trigger animations and has more elegant state management. 

Popmotion   

[Code Surfer: A Component for Scrolling, Zooming and Highlighting Code Samples](https://github.com/pomber/code-surfer) — Particularly well suited to slidedecks created with something like [mdx-deck.](https://github.com/jxnblk/mdx-deck) 

Rodrigo Pombo  

💻 React Jobs  

[Build High Quality Open-Source at Uber (San Francisco)](https://www.uber.com/careers/list/40899/) — As a Web Platform engineer at Uber, you'll be building the foundation for all web applications at Uber and beyond. 

Uber   

[Find A React Job Through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Create a profile to connect with inspiring companies seeking React devs. 

Vettery  

📘 Tutorials  

[How to Create PDFs From React Components on the Client Side](https://medium.com/@shivekkhurana/how-to-create-pdfs-from-react-components-client-side-solution-7f506d9dfa6d) — Uses html2canvas to convert HTML/DOM to SVG, then that into a PNG, then jsPDF to turn the PNG into a PDF. This results in a PDF that’s really just a big image, but there are [other approaches](https://blog.usejournal.com/lets-make-a-resume-in-react-2c9c5540f51a) if needed. 

Shivek Khurana   

[How to Configure and Code Android In-App Purchases in React Native Apps](https://medium.com/react-native-training/how-to-configure-and-code-android-in-app-purchases-in-react-native-apps-a46247908862) 

Tasos Maroudas   

[Build News and Activity Feeds in Days Instead of Months](https://getstream.io/try-the-api) 

Stream sponsor   

[Dynamic App Themes with CSS Variables and JavaScript](https://itnext.io/css-variables-dynamic-app-themes-86c0db61cbbb) 

Mike Wilcox   

[Combining HOCs with the New React Context API](https://itnext.io/combining-hocs-with-the-new-reacts-context-api-9d3617dccf0b) 

Francisco Varisco   

[React 16.3 Lifecycle Methods](https://medium.com/@mksglu/react-16-3-lifecycle-methods-7ac4e2f2024a) 

Mert Köseoğlu  

🔧 Code and Tools 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/tgnrczhlxc8jruptv51w.jpg)](https://github.com/toomuchdesign/react-minimal-pie-chart)  

[Minimal Pie Chart: Versatile, Lightweight SVG Pie Charts for React](https://github.com/toomuchdesign/react-minimal-pie-chart) — Pass in your data and colors via props, and you’re done. [Demo here.](http://www.andreacarraro.it/react-minimal-pie-chart/) 

Andrea Carraro   

[React Checkbox Tree: A Component for a Tree of Checkboxes](https://jakezatecky.github.io/react-checkbox-tree/) — For selecting items within a filesystem or category tree, say. 

Jake Zatecky   

[react-color-extractor: A Component to Extract Colors from Images](https://github.com/nitin42/react-color-extractor) 

Nitin Tulswani   

[Wexond: A 'Web Browser' Built on Electron and React](https://github.com/wexond/wexond) — An interesting idea. Being Electron-based, it’s using Chromium for rendering, but the UI/chrome is React and styled-components. 

Wexond   

[Deploy & Scale Ultra-Fast React Apps With Predictable Costs](https://try.digitalocean.com/developers/?_dkitrig=React&utm_source=paid_newsletter+react+weekly&utm_medium=display&utm_campaign=2018_Brand&utm_content=8-31-18+react+weekly+cooperpress) — Get $100 toward your next React project on DigitalOcean, the most developer-friendly cloud platform. 

DigitalOcean sponsor   

[A Boilerplate for Creating a SPA in React, with a Full Server](https://github.com/the0neWhoKnocks/boilerplate.react.spa.full-server) 

The One Who Knocks   

[react-key-handler: A React Component to Handle Keyboard Events](https://github.com/ayrton/react-key-handler) — A reasonably old project but that has sprung back into life in the past month. 

Ayrton De Craene         

A **[Cooperpress](https://cooperpress.com/)** publication. 

[Change your email address](https://react.statuscode.com/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://react.statuscode.com/leave/*|UID|*) 

© Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom