React Developer Tools is a browser developer extension for inspecting React components and observing when they render. Enable Highlight Updates When Components Render in the Components panel to diagnose state-driven updates. section 5.2.5
Use the extension to check whether:
- A counter re-renders after incrementing or resetting. section 5.2.5
- Resetting an already-zero value produces no visible render highlight. section 5.2.5
- A to-do list fails because code mutates an array and passes the same reference back to state. section 5.2.5
Figure 5.25 Open the Components panel for React Developer Tools, open the gear menu, and select the Highlight Updates When Components Render check box.
Follow the interface steps for opening Components, locating the gear menu, and enabling render highlights. section 5.2.5
