What does the ⚛️ badge on a component in the Components tab indicate?
The component is currently highlighted/selected. The badge confirms React DevTools has identified it as a React component in the tree.
How do you force-trigger a re-render of a component from DevTools without changing props or state?
Select the component in the Components tab and click the ‘Force update’ button (circular arrow icon) in the top-right toolbar.
What is the difference between ‘Highlight updates when components render’ and the Profiler’s flamegraph?
Highlight updates gives a live, real-time overlay showing which components re-rendered (color-coded by frequency). The Profiler flamegraph is a post-hoc, recorded snapshot showing render durations per commit.
How do you inspect the actual fiber node for a selected component from the browser console?
Select the component in the Components tab, then in the console type $r — React DevTools exposes the component instance (class) or the last rendered value (function component) as $r.
What does $r return for a function component vs a class component?
For a function component $r is the fiber’s stateNode or a synthetic object with hooks. For a class component $r is the actual class instance, giving you access to this.state, this.props, and methods.
How can you access the underlying DOM node for a selected React component in DevTools?
After selecting a component, its associated DOM node is stored as $0 in the Elements panel. Alternatively, inspect the component and look at its ref or use ReactDOM.findDOMNode($r) (class components only, deprecated).
What profiler metric is ‘base duration’ and how does it differ from ‘actual duration’?
Base duration is the estimated time to re-render a subtree without memoization (worst case). Actual duration is how long the render actually took, benefiting from bailouts like React.memo and shouldComponentUpdate.
Why might a component show ‘Did not render’ in the Profiler flamegraph?
It was part of the commit but bailed out early — e.g. React.memo, PureComponent, or shouldComponentUpdate returned false, so React skipped re-rendering that subtree.
What does a tall, narrow bar in the Profiler flamegraph indicate versus a wide, flat bar?
Tall/narrow: the component itself took significant time but has a shallow subtree. Wide/flat: the component has a large subtree but individual render times are fast. Width = total inclusive time, height is not used for duration — color indicates self time.
How do you record why each component rendered in the Profiler?
In Profiler settings, enable ‘Record why each component rendered while profiling’. This adds a ‘Why did this render?’ section to each component in the flamegraph, listing changed props, state, hooks, or parent re-renders.
What are the three reasons React DevTools can report for a component re-rendering?
1) Props changed, 2) State or hooks changed, 3) Parent re-rendered (the component is not memoized or memo comparison returned true).
How do you edit a component’s props live in the DevTools Components tab?
Select the component, then in the right panel find the Props section — values are editable in-place. Click a value and type a new one. Changes are immediately reflected in the UI.
Can you edit useState values directly in DevTools?
Yes. In the Components panel, expand the Hooks section. State values managed by useState appear as editable fields — clicking them lets you change the current state value live.
How does DevTools display useReducer state vs useState?
Both appear under the Hooks section. useState shows as ‘State: <value>'. useReducer shows as 'Reducer: <value>' (in v4+). Neither shows the dispatch function — only the current state value.</value></value>
How do you distinguish between multiple useState hooks in DevTools when they don’t have names?
They appear in hook call order. To give them readable names, use the ESLint plugin eslint-plugin-react-hooks or annotate with a custom hook name. DevTools v4.18+ can infer names from variable names via source maps.
What is the ‘Ranked chart’ view in the Profiler and when is it useful?
Ranked chart shows all components that rendered in a commit sorted by self render time, descending. Useful for immediately identifying the slowest individual components in a commit without visually scanning the flamegraph.
How do you identify unnecessary re-renders with DevTools?
Enable ‘Highlight updates’, then interact with the UI. Components that flash frequently without user interaction are suspect. Cross-reference in the Profiler with ‘Why did this render?’ to confirm prop/state identity issues.
What does the ‘Strict Mode’ double-invoke behavior look like in DevTools Profiler?
In development with StrictMode, React intentionally renders components twice. The Profiler may show doubled render counts. React DevTools v4.18+ grays out the intentional second render to reduce confusion.
How do you filter components out of the Components tree in DevTools?
Click the filter icon (funnel) in the Components toolbar. You can filter by component name (regex), component type (host/class/function/memo/forwardRef), or hide components from specific packages (e.g. node_modules).
How do you search for a specific component in a large tree?
Use the search bar (Ctrl/Cmd+F) in the Components tab. It accepts plain text or regex and highlights all matching components, letting you cycle through them.
What is ‘component stacks’ and how does DevTools help with them?
Component stacks are the React-specific equivalent of a JS call stack, showing which components rendered the failing component. DevTools enhances error boundaries and console errors with clickable component stacks.
How can you jump from a component in DevTools to its source code?
Click the </> (source) icon in the Components tab toolbar while a component is selected. This opens the component’s source file in the browser DevTools Sources panel (requires source maps).
What does the ‘Suspend’ boundary indicator look like in DevTools, and what does it tell you?
Suspended components show a clock/hourglass icon in the tree. The nearest Suspense boundary is highlighted, telling you which boundary caught the suspension and what the fallback hierarchy looks like.
How do you inspect context values consumed by a component?
Select the component in the Components tab. In the right panel, the Context section shows all context values the component consumes, with their current values and the provider component name.