majiayu000 React Tooling
Priority: P2 (OPTIONAL)
Tools for analysis and debugging.
Implementation Guidelines
- DevTools: Use "Highlight Updates" to spot re-renders.
- Debugger:
useDebugValuefor custom hooks. - Performance:
why-did-you-renderto catch wasted renders. - Bundle:
source-map-explorerorbundle-visualizer. - Linting:
eslint-plugin-react-hooks(Errors) +react-refresh. - Strict Mode: Enable for double-invoke checks (effects/reducers).
Code
// 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,
});
}