# welldone-software/why-did-you-render

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/welldone-software-why-did-you-render).**

12,489 stars · 228 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/welldone-software/why-did-you-render
- Homepage: https://www.npmjs.com/package/@welldone-software/why-did-you-render
- awesome-repositories: https://awesome-repositories.com/repository/welldone-software-why-did-you-render.md

## Topics

`component` `hooks-tracking` `performance` `pure` `purecomponent` `react` `react-native` `render` `tool` `update`

## Description

This project is a performance debugger and render profiler for React and React Native applications. It serves as a diagnostic utility to detect avoidable render cycles and identify the specific props, state, or hook changes that trigger component updates.

The tool distinguishes itself by tracking the execution of both custom and third-party hooks to determine if their return values are causing unnecessary renders. It employs deep equality checks to notify developers when a component re-renders despite its props and state remaining functionally identical.

Broad capabilities include frontend bottleneck detection and render logging. The system provides targeted monitoring through regular expression filtering and allows developers to customize how render notifications are formatted and delivered.

## Tags

### Software Engineering & Architecture

- [Render Tracking Utilities](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/frontend-rendering-loading/render-tracking-utilities.md) — Ships a comprehensive utility for monitoring component re-render cycles and identifying avoidable updates. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/tsx-test.tsx))
- [Deep Equality Comparison](https://awesome-repositories.com/f/software-engineering-architecture/deep-equality-comparison.md) — Implements recursive comparison of nested data structures to determine if a render was functionally necessary.
- [Render Waste Detection](https://awesome-repositories.com/f/software-engineering-architecture/deep-equality-comparison/render-waste-detection.md) — A tool that identifies performance bottlenecks by detecting renders where props and state remain deeply equal. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/jsx-runtime.d.ts))

### Testing & Quality Assurance

- [React Performance Optimization](https://awesome-repositories.com/f/testing-quality-assurance/react-performance-optimization.md) — Identifies and fixes unnecessary component re-renders in React and React Native applications to improve speed.
- [Frontend Bottleneck Detection](https://awesome-repositories.com/f/testing-quality-assurance/frontend-bottleneck-detection.md) — Pinpoints specific UI components that render too frequently despite having stable data.

### Development Tools & Productivity

- [Component Render Loggers](https://awesome-repositories.com/f/development-tools-productivity/component-render-loggers.md) — A capability to log when specific components render and determine if the cause was a change in values. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/README.md))
- [Custom Hook Monitoring](https://awesome-repositories.com/f/development-tools-productivity/custom-hook-monitoring.md) — Tracks specific hooks to isolate the exact cause of component updates. ([source](https://github.com/welldone-software/why-did-you-render#readme))
- [Hook Execution Analysis](https://awesome-repositories.com/f/development-tools-productivity/hook-execution-analysis.md) — Tracks the execution of custom hooks to determine if they are triggering unnecessary component updates. ([source](https://github.com/welldone-software/why-did-you-render/tree/version-8))
- [Hook Execution Tracking](https://awesome-repositories.com/f/development-tools-productivity/hook-execution-tracking.md) — Intercepts hook return values to correlate specific hook updates with component re-renders.
- [Hook Return Value Tracking](https://awesome-repositories.com/f/development-tools-productivity/hook-return-value-tracking.md) — Monitors changes in hook return values to determine if a hook update triggered a component render. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/types.d.ts))
- [React Hook Analysis](https://awesome-repositories.com/f/development-tools-productivity/react-hook-analysis.md) — Monitors custom and third-party hooks to determine if their return values cause avoidable component updates.
- [React Hook Monitors](https://awesome-repositories.com/f/development-tools-productivity/react-hook-monitors.md) — Tracks custom hook execution to determine if return value changes trigger unnecessary renders.
- [React Render Debugging](https://awesome-repositories.com/f/development-tools-productivity/react-render-debugging.md) — Tracks the specific props and state changes that trigger a component to update during development.
- [React Performance Debuggers](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools/react-performance-debuggers.md) — Detects avoidable render cycles and identifies the specific causes of component updates.
- [Component Filtering](https://awesome-repositories.com/f/development-tools-productivity/component-filtering.md) — A filtering mechanism using regular expressions to include or exclude specific components from the monitoring process. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/types.d.ts))
- [React Native Debuggers](https://awesome-repositories.com/f/development-tools-productivity/state-debugging-tools/react-native-debuggers.md) — Provides a debugging utility that monkey patches the React reconciler to notify developers of inefficient rendering in mobile apps.
- [Targeted Component Monitoring](https://awesome-repositories.com/f/development-tools-productivity/targeted-component-monitoring.md) — A feature to monitor selected components for re-renders using manual flags, regular expression filters, or pure component targeting. ([source](https://github.com/welldone-software/why-did-you-render/tree/version-8))
- [Third-party Hook Monitoring](https://awesome-repositories.com/f/development-tools-productivity/third-party-hook-monitoring.md) — Monitors third-party or custom hooks to detect when they trigger unnecessary component renders. ([source](https://github.com/welldone-software/why-did-you-render/blob/master/README.md))

### User Interface & Experience

- [Render Profilers](https://awesome-repositories.com/f/user-interface-experience/component-rendering-engines/render-profilers.md) — Identifies unnecessary component re-renders by analyzing changes in React props and state.
- [Higher-Order Components](https://awesome-repositories.com/f/user-interface-experience/functional-components/higher-order-components.md) — Wraps components in higher-order components to monitor lifecycle events and capture render snapshots.

### Web Development

- [Update Cause Analysis](https://awesome-repositories.com/f/web-development/performance-optimizations/component-update-optimizations/update-cause-analysis.md) — A logging system that identifies changes in props, state, or parent updates as the reason for a component re-render. ([source](https://github.com/welldone-software/why-did-you-render#readme))

### Programming Languages & Runtimes

- [Module Monkey Patching](https://awesome-repositories.com/f/programming-languages-runtimes/module-monkey-patching.md) — Overrides core React rendering functions to intercept update cycles and inject tracking logic.

### Part of an Awesome List

- [Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/development-tools.md) — Utility to detect and notify about avoidable re-renders.