HoangNguyen0403 React Tooling
Priority: P2 (MEDIUM)
Debugging Workflow
- Enable StrictMode to catch side-effect bugs during development.
- Profile with React DevTools Flamegraph to identify expensive components.
- Trace re-renders using "Highlight Updates" or
why-did-you-render. - Analyze bundle with
source-map-explorerorrollup-plugin-visualizerbefore shipping.
Setup
See implementation examples for StrictMode, why-did-you-render, and custom hook debug label setup.
Implementation Guidelines
- Analysis: Use
source-map-explorerorwebpack-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-pwafor service workers.
Anti-Patterns
- No production profiling: Remove
why-did-you-renderand 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.