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

tsx
1// Debugging Hooks
2useDebugValue(isOnline ? 'Online' : 'Offline');
3
4// why-did-you-render
5if (process.env.NODE_ENV === 'development') {
6  const whyDidYouRender = require('@welldone-software/why-did-you-render');
7  whyDidYouRender(React, {
8    trackAllPureComponents: true,
9  });
10}