welldone-software/why-did-you-render

This system is a React debugging library that identifies and explains the specific reasons why components re-render. It tracks changes in props, state, and hooks, while supporting modern React patterns such as hooks, memoization, forward refs, and class components. The tool provides detailed diagnostic diffs and integrates with popular ecosystem libraries like Redux and styled-components to ensure accurate rendering analysis.

6 changes.

The project upgraded its core dependency to React 19, replacing the legacy JSX transform with automatic runtime support and modernizing the build tooling to use Rollup 4 and Yarn. Concurrently, the demo application was rebuilt with Nollup for faster development and updated to demonstrate React 18/19 patterns, including SSR and modern hooks. The library also enhanced its diagnostic capabilities by adding detailed hook tracking and value diffs for re-render analysis.

8 changes.

This period focused on extending the library's patching capabilities to support class, forwardRef, and memoized components, ensuring accurate update notifications for all major React patterns. A robust testing infrastructure was established, including unit tests for core logic and hooks, integration tests for popular ecosystem libraries, and end-to-end Cypress tests to validate rendering behavior across various scenarios.

A pre-commit hook has been added to the .husky directory. This ensures that \yarn test\ is automatically executed before every commit, helping to catch test failures early in the development workflow.

.husky · high confidence

Added the initial Cypress support structure to enable end-to-end testing, including the e2e entry point, custom commands, and custom assertions. The support/e2e.js file imports the custom commands and assertions modules. A new custom command, visitAndSpyConsole, is available to visit a URL while spying on console logs and groups, allowing tests to verify console output. Additionally, a custom assertion called calledWithMatches is added to chai, enabling tests to assert that spies were called with specific arguments a certain number of times.

cypress/support · high confidence

The library now supports tracking and notifying updates for class components, React.forwardRef components, and React.memo components. Previously, these component types were likely ignored or handled incorrectly, leading to missing update notifications. The new implementation in \src/patches\ correctly wraps these components to detect prop/state changes, ensuring that developers receive accurate update reasons for all major React component patterns.

src/patches · high confidence

The pre-built distribution files for the \whyDidYouRender\ library have been removed from the \dist\ directory. This includes the ES module entry points (\dist/es/whyDidYouRender.js\ and \whyDidYouRender.min.js\), the source map (\whyDidYouRender.min.js.map\), and the CommonJS entry points (\dist/lib/whyDidYouRender.js\ and \whyDidYouRender.min.js\). Users relying on these specific paths in their build process will need to adjust their imports or ensure the build step regenerates these artifacts.

dist · high confidence

The demo application has been updated to use React 18, replacing the legacy \react-dom\ render API with \react-dom/client\'s \createRoot\ and \hydrateRoot\ methods. This structural change enables the addition of new demonstration scenarios, including Server-Side Rendering (SSR) hydration, React Strict Mode behavior, and support for modern React APIs such as \cloneElement\, \createFactory\, and hooks like \useContext\, \useReducer\, \useMemo\, and \useCallback\. The demo also now includes examples for \styled-components\, \react-redux\ (both hooks and HOC patterns), and \forwardRef\, providing a comprehensive showcase of the library's capabilities in a current React environment.

demo/src · high confidence

The demo application has been migrated from a standard Rollup build to Nollup, enabling faster development with React Refresh hot module replacement. This change introduces a new development server configuration (demo/nollup.config.js and demo/serve.js) that serves the app via an ESM bundle (app.\hash\.js) and adds a dedicated Server-Side Rendering (SSR) example accessible at /ssrComponent. The static assets have been reorganized into a public directory, and the legacy Rollup configuration has been removed.

demo · high confidence

The library now provides deeper insights into why components re-render. It tracks changes in React hooks (useState, useReducer, useMemo, useCallback, useSyncExternalStore) and displays detailed value differences for deep-equal objects via a new \printDiff\ utility. Additionally, it identifies the specific parent component causing the re-render and supports \Set\ diffs and React 19 element symbols for more accurate detection.

src · high confidence

The library now targets React 19, requiring users to configure the Babel \@babel/preset-react\ with \runtime: 'automatic'\ and set the \importSource\ to \@welldone-software/why-did-you-render\. This change enables support for the modern JSX transform via new \jsx-runtime.js\ and \jsx-dev-runtime.js\ entry points, replacing the previous \React.createElement\ monkey-patching approach. The build configuration has been updated to use \@rollup/plugin-\*\ packages, and the test environment now enforces React 19 compatibility.

(repo-wide) · high confidence

Added end-to-end tests for React component rendering behavior; Added integration tests for React Redux, React Router DOM, and Styled Components; Added test suite and test infrastructure; Added tests for React hooks tracking in whyDidYouRender; Added tests for patching various React component types.

The library now requires React 19 (peer dependency) and has updated its development dependencies to match, including Jest 29, ESLint 9, and Rollup 4. The build system has migrated from the legacy \rollup-plugin-babel\ to \@rollup/plugin-babel\ and \@rollup/plugin-commonjs\, and the project has switched from npm to Yarn, replacing \package-lock.json\ with \yarn.lock\. Additionally, the package now explicitly exports \jsx-runtime\ and \jsx-dev-runtime\ entry points and includes TypeScript definition files (\types.d.ts\).

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 54 → 56 (+2.4)
• Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

• Code Health 65 → 65 (+0.0)
• Architecture 97 → 97 (+0.4)
• Maturity 48 → 48 (+0.0)
• Readiness 48 → 55 (+6.2)
• Security 63 → 70 (+7.5)

• Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
• Medium CVE: [GHSA redacted] (yarn.lock)

• High CVE: [GHSA redacted] (yarn.lock)
• Medium CVE: [GHSA redacted] (yarn.lock)
• Outdated (npm): lodash

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

welldone-software/why-did-you-render was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.