---

name: react-tooling description: Configure debugging, bundle analysis, and ecosystem tools for React applications. Use when setting up Vite/webpack build tooling, analyzing bundle size, debugging re-renders with React DevTools, or configuring ESLint and StrictMode for React projects. metadata: triggers: files: - 'package.json' keywords: - devtool - bundle - strict mode - React DevTools Profiler - profile React - React profile

React Tooling

Priority: P2 (MEDIUM)

Debugging Workflow

1. Enable StrictMode to catch side-effect bugs during development.
2. Profile with React DevTools Flamegraph to identify expensive components.
3. Trace re-renders using "Highlight Updates" or why-did-you-render.
4. Analyze bundle with source-map-explorer or rollup-plugin-visualizer before shipping.

Setup

See implementation examples for StrictMode, why-did-you-render, and custom hook debug label setup.

Implementation Guidelines

• Analysis: Use source-map-explorer or webpack-bundle-analyzer / rollup-plugin-visualizer (Vite).
• Linting: Mandate eslint-plugin-react-hooks (exhaustive-deps) and Prettier.
• Environment: Use Vite over CRA. Manage environment variables with .env.
• Build: Configure Terser for production minification. Use vite-plugin-pwa for service workers.

Anti-Patterns

• No production profiling: Remove why-did-you-render and debug tools before production builds.
• No skipping StrictMode: Keep <React.StrictMode> in dev to surface side effects early.
• No CRA for new projects: Use Vite for faster builds and better DX.