The React Developer Tools components inspector is a live debugging interface for examining the rendered component tree rather than static source. It exposes component relationships, properties, stateful hooks, memoization, and rendering activity while the application runs. section 4.4.1 section 4.5
Use the inspector to:
- Inspect the complete component tree, optionally including HTML nodes. section 4.4.3
- Select components visually, search the tree, and filter matching nodes, including regular-expression searches. section 4.4.3
- View component properties, identify memoized nodes, and modify supported props directly. section 4.4.3
- Inspect and manipulate values managed by useState and useReducer, while context values remain view-only. section 4.4.3
- Highlight rendering components to investigate which parts of the tree update. section 4.4.1
Dark-mode application
Connect React Developer Tools to a dark-mode application using React context, memoization, and hooks. Select components such as Title or Header, inspect their properties and memoized status, then edit a string or Boolean and observe the immediate re-render. Select a stateful component to change its hook value directly; run the example with `$ npm run dev -w ch04/dark-mode`. section 4.4.3
