---

name: React Tooling description: Debugging, build analysis, and ecosystem tools. metadata: labels: [react, tooling, debug, performance] triggers: files: ['package.json'] keywords: [devtool, bundle, strict mode, profile]

React Tooling

Priority: P2 (OPTIONAL)

Tools for analysis and debugging.

Implementation Guidelines

• DevTools: Use "Highlight Updates" to spot re-renders.
• Debugger: useDebugValue for custom hooks.
• Performance: why-did-you-render to catch wasted renders.
• Bundle: source-map-explorer or bundle-visualizer.
• Linting: eslint-plugin-react-hooks (Errors) + react-refresh.
• Strict Mode: Enable for double-invoke checks (effects/reducers).

Code

Copy// Debugging Hooks
useDebugValue(isOnline ? 'Online' : 'Offline');

// why-did-you-render
if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}