# React Tooling > 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. - Skill: `hoangnguyen0403/react-tooling` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds add hoangnguyen0403/react-tooling` - Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/react-tooling/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403) - Updated: 2026-08-19 - Page: https://skillmd.com/skills/hoangnguyen0403/react-tooling --- # 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](references/example.md#strictmode--why-did-you-render-setup) 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 `` in dev to surface side effects early. - **No CRA for new projects**: Use Vite for faster builds and better DX.