---
title: "Introducing the new React DevTools"
publication: "React Status"
issue: 152
published_at: "2019-08-21"
canonical_url: "https://react.statuscode.com/issues/152"
---

This week's React news       

#152 — August 21, 2019 

[Read on the Web](https://react.statuscode.com/issues/152)   React Status Your weekly React news digest, every Wednesday  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/ymxwntqxnucow7tizwq3.jpg)](https://reactjs.org/blog/2019/08/15/new-react-devtools.html)  

[Introducing the New React DevTools](https://reactjs.org/blog/2019/08/15/new-react-devtools.html) — If you’re a React developer, you should be using the DevTools and if you are, they’re now a lot faster and easier to navigate. Here’s [a list of all the changes](https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md#400-august-15-2019). React 15 and above are supported.

Want to get playing right away? There’s now an [interactive tutorial](https://react-devtools-tutorial.now.sh/) so you can learn more about how to use them, and [CodeSandbox has directly integrated the tools](https://twitter.com/CompuIves/status/1164171042430042113) so you can get going quickly. 

Brian Vaughn   

[JavaScript to Know for React](https://kentcdodds.com/blog/javascript-to-know-for-react) — Examples of which JavaScript features in particular you should be familiar with when learning and using React. 

Kent C Dodds   [![\](https://copm.s3.amazonaws.com/4e61f911.png)](https://segment.com/docs/sources/mobile/react-native/?utm_source=newsletter&utm_medium=email&utm_campaign=reactnl) 

[Simplify Event Tracking with a Single API](https://segment.com/docs/sources/mobile/react-native/?utm_source=newsletter&utm_medium=email&utm_campaign=reactnl) — Integrate 250+ tools with the flip of a switch. Power your entire tech stack with the same data. Segment is all you need — in one tool. 

Segment sponsor   

[Announcing the Ionic React Release Candidate](https://ionicframework.com/blog/announcing-ionic-react-release-candidate/) — [Ionic](https://ionicframework.com/) is a cross-platform mobile app delivery framework more commonly associated with Angular, but they’re keen to be as agnostic as possible, so here’s the first RC of their _React_-based variant. 

Ely Lucas (Ionic)   

[Draggin' and Droppin' in React](https://css-tricks.com/draggin-and-droppin-in-react/) — There are a lot of React-focused drag and drop libraries out there, but [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) is the way to go to keep things simple, says Maks. 

Maks Akymenko  

💻 Jobs  

[Frontend Software Engineer (New York)](https://grnh.se/66a1ddd01) — Passionate about React and building high-quality UX? If you’re driven and want to help us continuously ship new, impactful features for our users, then get in touch. 

KUSTOMER   

[React developers are in demand on Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-reactstatus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77585) — Make a free profile, name your salary, and connect with hiring managers from top employers. 

Vettery  

📘 Tutorials and Stories  

[Using `requestAnimationFrame` with React Hooks](https://css-tricks.com/using-requestanimationframe-with-react-hooks/) — _“Animating with `requestAnimationFrame` should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.”_ 

Hunor Márton Borbély   

[Animating a Canvas with React Hooks](http://www.petecorey.com/blog/2019/08/19/animating-a-canvas-with-react-hooks/) — A neat demonstration of using hooks to interact with and animate an HTML5 canvas. 

Pete Corey   

[Rendering Maps in React](https://www.telerik.com/blogs/maps-in-react) — A look at how to display data on a map using React along with Google Maps and MapBox, while comparing both approaches. 

Leigh Halliday   

[A Quick Guide to Refs in React](https://alligator.io/react/createref/) — If you need to get a reference to a DOM node to perform some sort of direct operation upon it, `React.createRef` is what you need. 

William Le   

[Want a Better Way to Store and Serve Images and Videos?](https://cloudinary.com/users/register/free?utm_source=react_status&utm_medium=sponsored_placement&utm_campaign=dev_sign_up&utm_content=sponsored_link&utm_keyword=august_21_2019) — Join a community of over 450K web and mobile developers dynamically managing rich media with Cloudinary. Try it free. 

Cloudinary sponsor   

▶[What's New with React Dev Tools 4](https://www.youtube.com/watch?v=QFKZmBMgvus) — If the things we linked to for the DevTools above weren’t enough.. enjoy Harry Wolff as he presents a live demo of the new DevTools using his own blog as a guinea pig app. 

Harry Wolff   

[How to Create a Service-Oriented React Webapp](https://t.co/cLSzIBFR3w) — Thoughts on turning a static single-page React app into something more dynamic with a backend (ultimately an introduction to [Infrastructure-Components](https://www.infrastructure-components.com/), a project which deploys React-focused backend components to AWS for you). 

Frank Zickert   

▶[Next.js: The React Framework](https://www.youtube.com/watch?v=KC7j3DtOnYE) — A 25 minute talk introducing you to the motivations for using [Next.js](https://nextjs.org/), a popular framework for building React apps including statically generated or server-side ones. 

Tim Neutkens   

[How to Jest Snapshot Test the Difference](https://www.robinwieruch.de/jest-snapshot-difference/) 

Robin Wieruch  

🔧 Code and Tools  

[AdminBro v1.0.0: An 'Autogenerated' React + Node.js Admin Panel](https://medium.com/@wojciechkrysiak/adminbro-v1-0-0-released-admin-panel-for-node-js-apps-with-react-on-the-frontend-bc58b22cbb9e) — I appreciate many will not be a big fan of the name, but this is an interesting project nonetheless. 

Wojciech Krysiak   

[react-shimmer: An Image Component That 'Shimmers' While Loading](https://github.com/gokcan/react-shimmer) — Essentially a ‘this image is loading’ effect. [Here’s a live demo](https://stackblitz.com/edit/react-shimmer-demo?embed=1&file=index.js), complete with code. 

Gokcan Degirmenci   

[Kinvey a Leader in 2019 MQ for Multiexperience Development Platforms](https://www.progress.com/campaigns/gartner-magic-quadrant-multiexperience-development-platforms-mxdp?utm_medium=listings&utm_source=Cooperpress&utm_campaign=KVY-MQ-MXDP-BriefLinkReactStatus) 

Progress Kinvey sponsor   

[React Spinners: A Collection of 'Loading Spinner' Components](https://github.com/davidhu2000/react-spinners) 

David Hu   

[ReactPlayer: A React Component for Playing Media from Remote URLs](https://github.com/CookPete/react-player) — From file paths to YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, and more. 

Pete Cook   

[react-flame-graph: A Component for Visualizing Profiling Data](https://react-flame-graph.now.sh/) — Define the data in a tree of objects and this will render a flame graph. [GitHub repo](https://github.com/bvaughn/react-flame-graph). 

Brian Vaughn         

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