Leveling Up With React DevTools
It has officially been six weeks in Flatiron School’s Software Engineering bootcamp. After three initial weeks of vanilla Javascript, enter React.js! Before I get into my blog topic, I will share some basics of React.
As I have learned over the last few weeks, React is a Javascript library that enables developers to build structured bits of reusable code, called components. According to the React documentation, components are much like functions in Javascript. They accept arbitrary inputs, or “props,” and return React elements, which tell the application what to render on the screen. But, uniquely, components allow rendered data to change over time by managing “state.”
Moreover, I would like to discuss one of the handiest tools of a React developer — the React DevTools! Functioning as a browser extension, the DevTools are a means to debug and explore a React application from inside of the browser.
The browser extension adds two selections to the browser’s DevTools, components and profiler. The components tab allows for inspecting and editing the React root and subcomponents within the application. Furthermore, the developer can select the rendered component and see the current props and state of the component.
I find the component section most valuable because I can track the state of my variables as the components rerender. Admittedly, it takes some time to get used to, but it is much more effective and sophisticated than relying on console.log statements to catch nasty state bugs! It’s also helpful to see the component dependency structure with the prop values to ensure I’m passing down the correct props.
The other addition, profiler, is only accessible for applications built with React 16.5 and on. However, according to the React docs, its primary use is to collect timing information about each rendered component to identify performance bottlenecks in React applications.
And lastly, one of my favorite things about the React DevTools extension is that it glows when anything rendered in the browser was built with React. It has made me realize just how widespread this library is and left me excited to continue building with it. As always, thanks for reading!
