Debugging Code and the React Developer Tools

Earlier in this chapter, you learned that component functions may execute quite frequently and that you can prevent unnecessary executions using memo() and useMemo() (and that you shouldn't always prevent it).

Identifying component executions by adding console.log() inside the component functions is one way of gaining insight into a component. It's the approach used throughout this chapter. However, for large React apps with dozens, hundreds, or even thousands of components, using console.log() can get tedious.

That's why the React team also built an official tool to help with gaining app insights. The React developer tools are an extension that can be installed into all major browsers (Chrome, Firefox, and Edge). You can find and install the extension by simply searching the web for "<your browser> react developer tools" (e.g., "chrome react developer tools").

Once you have installed the...