Why Did You Render

https://github.com/welldone-software/why-did-you-render
Admin
Why Did You Render monkey patches React to notify you about avoidable component re-renders, helping...
Tokens:28,573
Snippets:366
Trust Score:8.2
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Install the package as a development dependency.

```bash
npm install --save-dev @welldone-software/why-did-you-render
```

--------------------------------

### Configure Hook Tracking Examples

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Examples showing how different hooks are tracked based on their return values and dependency arrays.

```javascript
// useState returns [value, setter], path '0' gets the value
useState(0)
// WDYR path: '0' → tracks the number/state
// Result: [0, setFn]
// Tracked value: 0

// useContext returns the context value directly
useContext(MyContext)
// WDYR path: undefined → tracks the whole value
// Tracked value: whatever MyContext provides

// useMemo returns [memoValue, deps], dependencies at '1'
const memoValue = useMemo(() => computeExpensive(), [dep1, dep2])
// WDYR path: '1' → dependencies
// dontReport: true → don't notify, just track deps
// Tracked: [dep1, dep2]
```

--------------------------------

### Install why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Commands to add the library as a development dependency using npm or yarn.

```bash
npm install --save-dev @welldone-software/why-did-you-render

# or
yarn add -D @welldone-software/why-did-you-render
```

--------------------------------

### TypeScript Setup

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Includes the necessary type reference and initialization logic for TypeScript projects.

```typescript
// wdyr.ts
/// <reference types="@welldone-software/why-did-you-render" />
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
  });
}
```

--------------------------------

### Usage of printDiff

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Example of setting up objects for comparison using printDiff.

```javascript
// Deep equal objects
const prev = { user: { name: 'Alice', age: 30 } };
const next = { user: { name: 'Alice', age: 30 } };

// In console, right-click printDiff function and "Save as global"
// Then call the function to see detailed diff of all properties
```

--------------------------------

### logDifference Console Output Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Visual representation of how differences are formatted in the browser console.

```text
props.onClick:
  "different functions with the same name"
  prev props.onClick: ƒ onClick() {}
  next props.onClick: ƒ onClick() {}

props.style:
  "different objects that are equal by value"
  prev props.style: {color: 'red', width: '100%'}
  next props.style: {color: 'red', width: '100%'}
```

--------------------------------

### useState Hook Tracking Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Example demonstrating how WDYR tracks the useState hook by extracting the state value.

```javascript
// For useState hook
const [state, setState] = useState(initialValue);

// WDYR tracks as:
// - hookName: 'useState'
// - path: '0'        (extracts first element, the state)
// - rawHookResult: [state, setState]
// - Compares: previous state vs current state

// Notification shows:
// [hook useState result] state.fieldName:
// "different objects that are equal by value"
```

--------------------------------

### Set Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Sets are compared by size and existence of all elements.

```javascript
const prev = new Set([1, 2, 3]);
const next = new Set([1, 2, 3]);

// diffType: 'deepEquals'
// Different Set objects but same contents
```

--------------------------------

### Function Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Functions are compared by name and, if applicable, dependency tracking.

```javascript
// Without dependency tracking
const prev = () => console.log('test');
const next = () => console.log('test');

// diffType: 'function'
// Indicates closure was recreated

// With useCallback tracking
const prev = useCallback(() => {}, [dep1, dep2]);
const next = useCallback(() => {}, [dep1, dep2]);

// diffType: 'function' (if dependencies match)
```

--------------------------------

### Class Component Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

A standard React class component configured for WDYR tracking.

```javascript
class MyComponent extends React.Component {
  state = { count: 0 };
  
  render() {
    return <div>{this.state.count}</div>;
  }
}
MyComponent.whyDidYouRender = true;

// After patching internally:
// - Render method is wrapped
// - Props and state changes are tracked
// - Notifications sent on changes
```

--------------------------------

### Static Property Preservation Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

Demonstrates how custom static properties and WDYR configuration are maintained after the component is patched.

```javascript
MyComponent.customStaticProperty = 'value';
MyComponent.whyDidYouRender = true;

// After patching, WDYRPatchedComponent has:
// - whyDidYouRender property
// - customStaticProperty = 'value'
// - displayName = 'MyComponent'
// - defaultProps from MyComponent
```

--------------------------------

### Example Usage of Component Patching

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

Demonstrates how to enable tracking for a functional component by setting the whyDidYouRender property.

```javascript
// Functional component
const MyButton = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);
MyButton.whyDidYouRender = true;

// After patching:
// - Props changes are tracked via useRef
// - Notified on each render where props differ
// - Owner changes also tracked

// String component (HTML tag)
// WDYR can track native elements if explicitly enabled
```

--------------------------------

### Usage Example of patchMemoComponent

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

Demonstrates how a memoized component is structured before patching and how it behaves after the patch is applied.

```javascript
const MemoizedList = React.memo(({ items }) => (
  <ul>
    {items.map(item => <li key={item.id}>{item.name}</li>)}
  </ul>
), (prev, next) => prev.items === next.items);
MemoizedList.whyDidYouRender = true;

// After patching:
// - Inner component is patched
// - Custom comparison function is preserved
// - Tracked as pure component (notifications only if memo allows render)
```

--------------------------------

### Usage Example for calculateDeepEqualDiffs

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Demonstrates comparing two objects and retrieving the resulting difference array.

```javascript
const prev = { user: { name: 'Alice', age: 30 } };
const next = { user: { name: 'Alice', age: 31 } };

const diffs = calculateDeepEqualDiffs(prev, next, 'props');
// Returns:
// [
//   {
//     pathString: 'props.user.age',
//     diffType: 'different',
//     prevValue: 30,
//     nextValue: 31
//   }
// ]
```

--------------------------------

### Regular Expression Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

RegExp objects are compared by their string representation.

```javascript
const prev = /test/gi;
const next = /test/gi;

// diffType: 'regex'
// Indicates unnecessary RegExp recreation
```

--------------------------------

### Array Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Arrays are compared by length and recursive element equality.

```javascript
const prev = [1, 2, {a: 1}];
const next = [1, 2, {a: 1}]; // Different objects but same values

// diffType: 'deepEquals'
// Indicates entire array is different by reference but equal by value
```

--------------------------------

### Date Object Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Date objects are compared using their getTime() value.

```javascript
const prev = new Date('2024-01-01');
const next = new Date('2024-01-01');

// diffType: 'date'
// Indicates unnecessary Date recreation
```

--------------------------------

### Example usage of tracked useSelector

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Demonstrates how tracking affects a standard useSelector hook call.

```javascript
const user = useSelector(state => state.user);

// When trackExtraHooks includes useSelector:
// - Tracks user value across renders
// - Notifies when user object reference changes
// - Shows difference between previous and current user
```

--------------------------------

### Revert Function Signature and Usage

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Provides the signature for the revert function and an example of how to disable WDYR at runtime.

```typescript
function __REVERT_WHY_DID_YOU_RENDER__(): void
```

```javascript
// Disable WDYR if needed
React.__REVERT_WHY_DID_YOU_RENDER__();
```

--------------------------------

### React Element Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

React elements are compared by type and recursive prop equality.

```javascript
const prev = <Button label="Submit" />;
const next = <Button label="Submit" />;

// diffType: 'reactElement'
// Indicates JSX recreated but props are the same
```

--------------------------------

### Logging scenarios for shouldLog

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Examples of conditions that trigger or suppress logging based on value changes and configuration.

```javascript
// Actual value change
{ propsDifferences: [{diffType: 'different', ...}] }
// → shouldLog returns true

// Deep equal objects (different references)
logOnDifferentValues: true
{ propsDifferences: [{diffType: 'deepEquals', ...}] }
// → shouldLog returns true (because option enabled)
```

```javascript
// Only reference changes, no value differences
{ propsDifferences: [{diffType: 'deepEquals', ...}] }
logOnDifferentValues: false
// → shouldLog returns false

// Hot reload in progress
inHotReload: true
// → shouldLog returns false regardless of differences
```

--------------------------------

### Configure trackExtraHooks

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Examples of how to enable tracking for external library hooks like React-Redux or custom application hooks.

```javascript
// Track React-Redux hooks
whyDidYouRender(React, {
  trackExtraHooks: [
    [ReactRedux, 'useSelector'],
    [ReactRedux, 'useDispatch'],
  ],
});

// Track custom hooks
whyDidYouRender(React, {
  trackExtraHooks: [
    [MyHooksModule, 'useCustomHook'],
    [AnotherLib, 'useAnotherHook'],
  ],
});
```

--------------------------------

### Plain Object Comparison Example

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Plain objects are compared by own property names and recursive value equality.

```javascript
const prev = { a: 1, b: { c: 2 } };
const next = { a: 1, b: { c: 2 } };

// diffType: 'deepEquals'
// Indicates different object structures but same values
```

--------------------------------

### Get WDYR Type

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Determines if a component should be tracked and returns the patched version if applicable.

```typescript
function getWDYRType(origType: React.ComponentType): React.ComponentType | null
```

--------------------------------

### Implement Notifier Type

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/03-types.md

Defines the function signature for custom notification handlers and shows an example implementation for logging re-renders.

```typescript
type Notifier = (updateInfo: UpdateInfo) => void
```

```typescript
const myNotifier: Notifier = (updateInfo: UpdateInfo) => {
  // Log to analytics
  analytics.track('component_rerender', {
    component: updateInfo.displayName,
    reason: updateInfo.reason,
  });
  
  // Or log to remote service
  logger.info('Rerender detected', updateInfo);
};

whyDidYouRender(React, {
  notifier: myNotifier,
});
```

--------------------------------

### Circular Reference Warning

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Example of the console warning generated when a circular reference is detected during prop comparison.

```text
Warning: why-did-you-render couldn't handle circular references in props. RangeError: Maximum call stack size exceeded
```

--------------------------------

### Set Custom Component Name

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Example of a deeply nested component structure where a custom name is useful for identification.

```javascript
withPropsOnChange(withPropsOnChange(withStateHandlers(withPropsOnChange(withState(withPropsOnChange(lifecycle(withPropsOnChange(withPropsOnChange(onlyUpdateForKeys(LoadNamespace(Connect(withState(withState(withPropsOnChange(lifecycle(withPropsOnChange(withHandlers(withHandlers(withHandlers(withHandlers(Connect(lifecycle(Menu)))))))))))))))))))))))
```

--------------------------------

### Evaluate component tracking status

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/08-internals-reference.md

Examples demonstrating how the shouldTrack function evaluates component tracking based on the whyDidYouRender property and hook change status.

```javascript
// Track this component
MyComponent.whyDidYouRender = true;
shouldTrack(MyComponent, {isHookChange: false})
// → true

// Don't track this component
MyComponent.whyDidYouRender = false;
shouldTrack(MyComponent, {isHookChange: false})
// → false

// Track only non-hook changes
MyComponent.whyDidYouRender = {trackHooks: false};
shouldTrack(MyComponent, {isHookChange: false})
// → true
shouldTrack(MyComponent, {isHookChange: true})
// → false
```

--------------------------------

### Custom Notifier Implementation

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/03-types.md

Example of a custom notifier function that processes UpdateInfo to log specific changes in props, state, or hooks.

```typescript
function customNotifier(updateInfo: UpdateInfo) {
  console.log(`${updateInfo.displayName} re-rendered`);
  
  if (updateInfo.reason.propsDifferences) {
    console.log('Props changed:', updateInfo.reason.propsDifferences);
  }
  
  if (updateInfo.reason.stateDifferences) {
    console.log('State changed:', updateInfo.reason.stateDifferences);
  }
  
  if (updateInfo.reason.hookDifferences) {
    console.log('Hook changed:', updateInfo.hookName);
  }
}
```

--------------------------------

### Initialize why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Create a wdyr.js file to initialize the library, ensuring it only runs in development mode.

```jsx
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}
```

--------------------------------

### whyDidYouRender(React, options)

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Initializes the why-did-you-render library with the provided React instance and configuration options.

```APIDOC
## whyDidYouRender(React, options)

### Description
Initializes the library to track re-renders in React components. It accepts a configuration object to customize behavior such as custom notifiers or tracking specific hooks.

### Parameters
- **React** (Object) - Required - The React instance to patch.
- **options** (Object) - Required - Configuration object.
  - **notifier** (Function) - Optional - A custom function to handle update notifications: `(updateInfo: UpdateInfo) => void`.
  - **trackExtraHooks** (Array) - Optional - An array of tuples to track additional hooks, e.g., `[[Library, 'hookName']]`.
```

--------------------------------

### Import the library

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

The primary entry point for the library.

```typescript
import whyDidYouRender from '@welldone-software/why-did-you-render';
```

--------------------------------

### whyDidYouRender(React, userOptions)

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Initializes the library by patching React methods to monitor component re-renders. This function should be invoked at the application startup.

```APIDOC
## whyDidYouRender(React, userOptions)

### Description
Initializes Why Did You Render by monkey-patching React's `createElement`, `createFactory`, and `cloneElement` methods to track component re-renders. Must be called once at application startup.

### Signature
`function whyDidYouRender(React: typeof React, userOptions?: WhyDidYouRenderOptions): typeof React`

### Parameters
- **React** (typeof React) - Required - The React library object to patch. Version 19+ required.
- **userOptions** (WhyDidYouRenderOptions) - Optional - Configuration options for WDYR behavior.

### Return Type
`typeof React` - The patched React object with all original properties plus WDYR additions.

### Example
```javascript
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
  });
}
```
```

--------------------------------

### Initialize why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Import and initialize the library in your entry file, ensuring it runs only in development mode.

```javascript
// wdyr.js - Import this first!
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
  });
}
```

--------------------------------

### Project File Organization

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Overview of the source directory structure, including core logic, utility functions, and component-specific patching modules.

```text
src/
├── index.js                              # Main export
├── whyDidYouRender.js                   # Core initialization
├── normalizeOptions.js                  # Options handling
├── defaultNotifier.js                   # Console logging
├── getUpdateInfo.js                     # Update info assembly
├── calculateDeepEqualDiffs.js           # Difference detection
├── findObjectsDifferences.js            # Object comparison
├── getDisplayName.js                    # Component naming
├── getDefaultProps.js                   # Default props extraction
├── helpers.js                           # React internals access
├── utils.js                             # Type detection
├── shouldTrack.js                       # Tracking decision
├── wdyrStore.js                         # Global state
├── printDiff.js                         # Detailed diff printing
└── patches/
    ├── patchClassComponent.js           # Class component tracking
    ├── patchFunctionalOrStrComponent.js # Function component tracking
    ├── patchMemoComponent.js            # Memo component tracking
    └── patchForwardRefComponent.js      # ForwardRef tracking
```

--------------------------------

### whyDidYouRender(React, options)

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Initializes the whyDidYouRender tracking with specific configuration options.

```APIDOC
## whyDidYouRender(React, options)

### Description
Initializes the whyDidYouRender library to track component re-renders based on the provided configuration options.

### Parameters
- **React** (Object) - Required - The React library instance.
- **options** (Object) - Optional - Configuration object for tracking behavior.

### Options
- **include** (Array<RegExp>) - Optional - List of displayNames to include in tracking.
- **exclude** (Array<RegExp>) - Optional - List of displayNames to exclude from tracking.
- **trackAllPureComponents** (Boolean) - Optional - Whether to track all React.memo and React.PureComponent components.
- **trackHooks** (Boolean) - Optional - Whether to track hook changes.
- **trackExtraHooks** (Array<Array>) - Optional - List of custom hooks to track.
- **logOwnerReasons** (Boolean) - Optional - Whether to log reasons why an owner component re-renders.
- **logOnDifferentValues** (Boolean) - Optional - Whether to track all re-renders even if they could not be avoided.
- **hotReloadBufferMs** (Number) - Optional - Time in ms to ignore updates after hot reload.
- **onlyLogs** (Boolean) - Optional - Whether to print logs without console grouping.
- **collapseGroups** (Boolean) - Optional - Whether to collapse grouped logs.
- **titleColor** (String) - Optional - Color for the log title.
- **diffNameColor** (String) - Optional - Color for the diff name.
- **diffPathColor** (String) - Optional - Color for the diff path.
- **textBackgroundColor** (String) - Optional - Background color for log text.
- **notifier** (Function) - Optional - Custom function to handle notifications.
- **getAdditionalOwnerData** (Function) - Optional - Function to harvest additional data from react elements.
```

--------------------------------

### Component Configuration

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

How to enable why-did-you-render for specific components.

```APIDOC
## Component Configuration

### Description
Enable tracking for a specific component by setting the `whyDidYouRender` property on the component class or function.

### Usage
`MyComponent.whyDidYouRender = true | {options}`
```

--------------------------------

### Initialize the library

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Must be called in development mode only, before rendering components.

```typescript
whyDidYouRender(React, {
  // Configuration options
  trackAllPureComponents?: boolean;
  trackHooks?: boolean;
  include?: RegExp[];
  exclude?: RegExp[];
  // ... more options
});
```

--------------------------------

### React Initialization

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Initializes the library in development mode and ensures it is imported before other application modules.

```javascript
// wdyr.js
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

export default React;
```

```javascript
// index.js
import './wdyr';  // Import first, before anything else
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
```

--------------------------------

### Development Only with Strict Mode

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/02-configuration.md

Initialize the library only in development environments to avoid production overhead.

```javascript
if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
    logOwnerReasons: true,
  });
}
```

--------------------------------

### Configure Notifier Visual Options

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Pass configuration options to the whyDidYouRender function to customize the appearance of console logs.

```javascript
whyDidYouRender(React, {
  collapseGroups: true,
  titleColor: '#333333',
  diffNameColor: '#666666',
  diffPathColor: '#999999',
  textBackgroundColor: '#f5f5f5',
});
```

--------------------------------

### Component Configuration Options

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Defines the type for component-level configuration and demonstrates how to enable or disable tracking for specific components.

```typescript
type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions | boolean
```

```javascript
// Enable tracking with custom options
MyComponent.whyDidYouRender = {
  customName: 'MyCustomName',
  trackHooks: true,
  logOnDifferentValues: true,
};

// Or simply enable tracking
MyComponent.whyDidYouRender = true;

// Disable tracking for specific component
MyComponent.whyDidYouRender = false;
```

--------------------------------

### Get Current Owner

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Retrieves the React Fiber of the currently rendering component's owner for tracking purposes.

```typescript
function getCurrentOwner(): React.Fiber | null
```

--------------------------------

### Initialize Why Did You Render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Call this function once at application startup during development to patch React methods for tracking re-renders.

```javascript
import React from 'react';

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
  });
}
```

--------------------------------

### Track All Pure Components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/02-configuration.md

Enable tracking for all pure components and hooks globally.

```javascript
whyDidYouRender(React, {
  trackAllPureComponents: true,
  trackHooks: true,
});
```

--------------------------------

### Identify avoidable re-renders in memoized components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Example of passing an object literal to a memoized component, which triggers re-renders on every parent update.

```jsx
<MemoBigList style={{width: '100%'}}/>
```

--------------------------------

### Configure Compact Console Output

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Reduces console clutter by collapsing log groups by default.

```javascript
whyDidYouRender(React, {
  trackAllPureComponents: true,
  collapseGroups: true,
  titleColor: '#333',
  diffNameColor: '#666',
  diffPathColor: '#999',
  textBackgroundColor: '#f0f0f0',
});
```

--------------------------------

### Development-Only Environment Checks

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Initialize tracking conditionally based on environment variables or local storage flags to avoid production overhead.

```javascript
const shouldEnableWDYR = 
  process.env.NODE_ENV === 'development' &&
  (process.env.DEBUG_WDYR === 'true' || localStorage.getItem('debug-wdyr'));

if (shouldEnableWDYR) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    trackHooks: true,
    collapseGroups: true,
  });
}
```

--------------------------------

### Static Methods

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Utility methods available on the whyDidYouRender object for state access and metadata retrieval.

```APIDOC
## Static Methods

- `whyDidYouRender.defaultNotifier` - Default console notifier
- `whyDidYouRender.wdyrStore` - Global state access
- `whyDidYouRender.storeOwnerData()` - Store owner metadata
- `whyDidYouRender.getWDYRType()` - Get patched component type
- `whyDidYouRender.getCurrentOwner()` - Get current owner fiber
```

--------------------------------

### Import wdyr in Application Entry

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Import the wdyr file as the very first import in your application's entry point.

```jsx
import './wdyr'; // <--- first import

import 'react-hot-loader';

import React from 'react';
import ReactDOM from 'react-dom';
// ...
import {App} from './app';
// ...
ReactDOM.render(<App/>, document.getElementById('root'));
```

--------------------------------

### Force double render for testing

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Render the application twice in the entry point to verify if tracking is working correctly.

```jsx
const HotApp = hot(App);
HotApp.whyDidYouRender = true;
ReactDOM.render(<HotApp/>, document.getElementById('root'));
ReactDOM.render(<HotApp/>, document.getElementById('root'));
```

--------------------------------

### Log on Different Values

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Demonstrates the difference between tracking equal values versus different values in props or state.

```javascript
render(<Menu a={1}/>)
render(<Menu a={1}/>)
```

```javascript
render(<Menu a={1}/>)
render(<Menu a={2}/>)
```

--------------------------------

### Compare useMemo dependencies

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Tracks the dependency array and does not notify on changes, but displays dependencies in detailed diffs.

```javascript
const memoized = useMemo(() => expensive(), [dep1, dep2]);
// Compares: [dep1, dep2] vs previous dependencies
// Does NOT notify (dontReport: true)
// Dependencies shown only on request in detailed diff
```

--------------------------------

### Track Hook Dependencies

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Demonstrates how the library compares dependency arrays across renders to determine the cause of a re-render.

```javascript
// First render with dep = 5
const callback1 = useCallback(() => console.log(dep), [dep]);

// Next render with same dep = 5
const callback2 = useCallback(() => console.log(dep), [dep]);

// WDYR detects:
// dependenciesMap.get(callback1) → {deps: [5]}
// dependenciesMap.get(callback2) → {deps: [5]}
// deps are equal → callback marked as diffType: 'function'
// Not considered a "bad" re-render cause

// Next render with different dep = 6
const callback3 = useCallback(() => console.log(dep), [dep]);

// WDYR detects:
// dependenciesMap.get(callback1) → {deps: [5]}
// dependenciesMap.get(callback3) → {deps: [6]}
// deps are different → callback marked as diffType: 'different'
// Legitimate re-render cause
```

--------------------------------

### Initialize why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

The main function used to patch React for re-render tracking.

```typescript
whyDidYouRender(React, options?: WhyDidYouRenderOptions): typeof React
```

--------------------------------

### Configure Advanced Tracking Settings

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Pass an object to whyDidYouRender to customize tracking behavior, such as logging different values or setting a custom component name.

```javascript
EnhancedMenu.whyDidYouRender = {
  logOnDifferentValues: true,
  customName: 'Menu'
}
```

--------------------------------

### Enable WDYR on connected components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Apply the whyDidYouRender static property after the connect HOC to avoid console spam from hoisted statics.

```js
  const SimpleComponent = ({a}) => <div data-testid="foo">{a.b}</div>)
  // not before the connect:
  // SimpleComponent.whyDidYouRender = true
  const ConnectedSimpleComponent = connect(
    state => ({a: state.a})
  )(SimpleComponent)
  // after the connect:
  SimpleComponent.whyDidYouRender = true
```

--------------------------------

### Enable Component Tracking

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Set the whyDidYouRender property to true on specific components to enable tracking.

```javascript
// In your components
MyComponent.whyDidYouRender = true;
```

--------------------------------

### Track Specific Components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Enable tracking for individual components by setting a property or using an include regex pattern.

```javascript
// Option A: Set on component
function ExpensiveList({ items }) {
  return items.map(item => <Item key={item.id} data={item} />);
}
ExpensiveList.whyDidYouRender = true;

// Option B: Track by name pattern
whyDidYouRender(React, {
  include: [/ExpensiveList/, /ListItem/],
});
```

--------------------------------

### Configure Babel for why-did-you-render

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Update babel.config.js to use the library as the import source for the React runtime.

```javascript
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-react', {
      runtime: 'automatic',
      development: process.env.NODE_ENV === 'development',
      importSource: '@welldone-software/why-did-you-render',
    }]
  ]
};
```

--------------------------------

### Implement basic custom notifier

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

A simple implementation of a custom notifier that logs re-render reasons to the console.

```javascript
function myNotifier(updateInfo) {
  console.log(`${updateInfo.displayName} re-rendered`);
  console.log('Reason:', updateInfo.reason);
}

whyDidYouRender(React, {
  notifier: myNotifier,
});
```

--------------------------------

### Track Hook Dependencies

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Illustrates how useCallback dependencies are tracked and evaluated during component re-renders.

```javascript
// In component render
const callback = useCallback(() => {
  console.log(userId);
}, [userId]);

// WDYR tracks this as:
// dependenciesMap.set(callback, {
//   hookName: 'useCallback',
//   deps: [userId]
// })

// On next render, when comparing callbacks:
// - If userId is same, function marked as 'function' (not changed)
// - If userId differs, function marked as 'different' (changed due to deps)
```

--------------------------------

### Project Directory Structure

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Visual representation of the source code organization within the repository.

```text
src/
├── index.js                              # Main export
├── whyDidYouRender.js                   # Core initialization & patching
├── normalizeOptions.js                  # Options handling
├── defaultNotifier.js                   # Console logging implementation
├── getUpdateInfo.js                     # Update information assembly
├── calculateDeepEqualDiffs.js           # Deep equality & difference detection
├── findObjectsDifferences.js            # Object-level comparison wrapper
├── getDisplayName.js                    # Component name extraction
├── getDefaultProps.js                   # Default props extraction
├── helpers.js                           # React internals helpers
├── utils.js                             # Type detection utilities
├── shouldTrack.js                       # Tracking eligibility logic
├── wdyrStore.js                         # Global state definition
├── printDiff.js                         # Detailed diff formatting
└── patches/
    ├── patchClassComponent.js           # Class component patching
    ├── patchFunctionalOrStrComponent.js # Functional component patching
    ├── patchMemoComponent.js            # Memo component patching
    └── patchForwardRefComponent.js      # ForwardRef component patching
```

--------------------------------

### Component.whyDidYouRender

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Configures tracking for individual class or function components.

```APIDOC
## Component.whyDidYouRender

### Description
Enables or disables tracking for a specific component by setting the static `whyDidYouRender` property on the component class or function.

### Usage
- **Enable**: Set to `true` or an object containing specific configuration options (e.g., `customName`, `trackHooks`, `logOnDifferentValues`).
- **Disable**: Set to `false`.
```

--------------------------------

### logDifference

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Logs a single set of differences (e.g., all prop changes) with detailed visual formatting and helpful information links.

```APIDOC
## logDifference

### Description
Logs a single set of differences (e.g., all prop changes) with detailed visual formatting and helpful information links.

### Signature
`logDifference({ Component, displayName, hookName, prefixMessage, diffObjType, differences, values }): void`

### Parameters
- **Component** (React.ComponentType) - The component class or function.
- **displayName** (string) - Human-readable component name.
- **hookName** (string | undefined) - Hook name if logging hook differences.
- **prefixMessage** (string) - Prefix like "Re-rendered because" or "And because".
- **diffObjType** ('props' | 'state' | 'hook') - Type of object being logged.
- **differences** (Difference[]) - Array of individual property changes.
- **values** (object) - Object with `prev` and `next` properties (entire objects for reference).
```

--------------------------------

### Compare useContext values

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Tracks the entire context value and notifies if it changes.

```javascript
const contextValue = useContext(MyContext);
// Compares: contextValue vs previous contextValue
// Notifies if changed
```

--------------------------------

### Patch forwardRef component usage

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

Demonstrates how to enable tracking for a forwardRef component.

```javascript
const MyInput = React.forwardRef(({ placeholder }, ref) => (
  <input ref={ref} placeholder={placeholder} />
));
MyInput.whyDidYouRender = true;

// After patching:
// - Inner function is patched
// - Ref forwarding is preserved
// - Changes are tracked
```

--------------------------------

### Configure Component Tracking

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/README.md

Enable tracking for a specific component by setting the whyDidYouRender property.

```typescript
MyComponent.whyDidYouRender = true | {options}
```

--------------------------------

### Configure Expo Managed Workflow

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Babel configuration for Expo projects by passing parameters to babel-preset-expo.

```javascript
// babel.config.js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      [
        "babel-preset-expo",
        {
          jsxImportSource: "@welldone-software/why-did-you-render",
        },
      ],
    ],
  };
};
```

--------------------------------

### Component Tracking Configuration

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

How to enable tracking for specific React components by setting the whyDidYouRender property.

```APIDOC
## Component Tracking Configuration

### Description
Enable tracking for a specific component to monitor unnecessary re-renders. This can be applied to both class and functional components.

### Usage
Set the `whyDidYouRender` static property on your component class or the property on your functional component function.

### Configuration Options
- **whyDidYouRender** (boolean | object) - Required - Set to `true` to enable default tracking, or pass an object for advanced settings.

#### Advanced Settings Object
- **logOnDifferentValues** (boolean) - Optional - If true, triggers notifications even for "legit" re-renders caused by different props or state.
- **customName** (string) - Optional - Overrides the component name in logs, useful for deeply wrapped components.

### Example
```js
// Class component
class BigList extends React.Component {
  static whyDidYouRender = true
}

// Functional component with advanced settings
const EnhancedMenu = props => (<div>...</div>)
EnhancedMenu.whyDidYouRender = {
  logOnDifferentValues: true,
  customName: 'Menu'
}
```
```

--------------------------------

### Configure React Native Babel

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Babel configuration for React Native projects using the bare workflow.

```javascript
module.exports = {
  presets: ['module:metro-react-native-babel-preset'],

  env: {
    development: {
      plugins: [['@babel/plugin-transform-react-jsx', {
        runtime: 'automatic',
        development: process.env.NODE_ENV === 'development',
        importSource: '@welldone-software/why-did-you-render',
      }]],
    },
  },
}
```

--------------------------------

### Console Output Pattern

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

The default notifier displays component re-render reasons, including prop differences and parent-child render relationships.

```text
│ ComponentName
├─ Re-rendered because props.fieldName:
│  │ "different objects that are equal by value"
│  │ prev props.fieldName: {...}
│  │ next props.fieldName: {...}
├─ Rendered by ParentName
│  └─ Re-rendered because props.data:
│     │ "different objects"
```

--------------------------------

### Log all re-renders

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Enable logOnDifferentValues to track all re-renders, even those that might be expected.

```js
render(<BigListPureComponent a={1}/>)
render(<BigListPureComponent a={2}/>)
// will only log if you use {logOnDifferentValues: true}
```

--------------------------------

### Configure Babel Preset

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Required Babel configuration to integrate the library with React's automatic runtime.

```javascript
module.exports = {
  presets: [
    ['@babel/preset-react', {
      runtime: 'automatic',
      development: process.env.NODE_ENV === 'development',
      importSource: '@welldone-software/why-did-you-render',
    }]
  ]
};
```

--------------------------------

### Access Static Properties and Methods

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Provides access to the default notifier, global store, and component inspection utilities.

```typescript
// Default console notifier
whyDidYouRender.defaultNotifier: (updateInfo: UpdateInfo) => void

// Access to global store
whyDidYouRender.wdyrStore: WDYRStore

// Store owner component data
whyDidYouRender.storeOwnerData: (element: React.ReactElement) => void

// Get patched component type
whyDidYouRender.getWDYRType: (origType: React.ComponentType) => React.ComponentType | null

// Get current owner component
whyDidYouRender.getCurrentOwner: () => React.Fiber | null
```

--------------------------------

### Debugging Prop Drilling Issues

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Identify unnecessary prop passes by enabling whyDidYouRender on memoized components to track prop changes.

```javascript
// Parent
function Page({ userId }) {
  return (
    <Parent userId={userId}>
      <Child userId={userId} />
    </Parent>
  );
}

// These re-render when userId changes
const Parent = React.memo(({ userId, children }) => {
  console.log('Parent render');
  return <section>{children}</section>;
});
Parent.whyDidYouRender = true;

const Child = React.memo(({ userId }) => {
  console.log('Child render with userId:', userId);
  return <div>{userId}</div>;
});
Child.whyDidYouRender = true;

// Output shows Parent changed because userId prop changed
// Child changed because userId prop changed
// This pattern helps identify prop drilling opportunities
```

--------------------------------

### Component Patching Flow Diagram

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/05-component-patching.md

Visual representation of the component type detection and patching selection process.

```text
component type passed to createElement
  ↓
getWDYRType() called
  ↓
isReactClassComponent? → patchClassComponent
isForwardRefComponent? → patchForwardRefComponent  
isMemoComponent?      → patchMemoComponent
isFunctionComponent?  → patchFunctionalOrStrComponent
  ↓
Patched component returned
```

--------------------------------

### Include Specific Components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/02-configuration.md

Restrict tracking to components matching the provided regular expressions.

```javascript
whyDidYouRender(React, {
  include: [/ListItem/, /Toolbar/],
});
```

--------------------------------

### React.__REVERT_WHY_DID_YOU_RENDER__

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Disables the why-did-you-render library and restores React to its original state.

```APIDOC
## React.__REVERT_WHY_DID_YOU_RENDER__

### Description
Restores React to its original state, effectively disabling the why-did-you-render instrumentation.

### Signature
`React.__REVERT_WHY_DID_YOU_RENDER__(): void`
```

--------------------------------

### Apply Custom Component Configuration

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Overrides global tracking settings for specific components or disables tracking entirely.

```javascript
// Heavy list component - track with custom name
const UserList = React.memo(({ users }) => {
  return <div>{users.map(u => <UserItem key={u.id} user={u} />)}</div>;
});
UserList.whyDidYouRender = {
  customName: 'UserList [HEAVY]',
  logOnDifferentValues: true,  // Show deepEquals differences
};

// Simple presentational component - disable tracking
const Badge = ({ count }) => <span>{count}</span>;
Badge.whyDidYouRender = false;

whyDidYouRender(React, {
  trackAllPureComponents: true,
});
```

--------------------------------

### Configure Component Tracking

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/02-configuration.md

Set the whyDidYouRender property on a component to enable, customize, or disable tracking for that specific component.

```javascript
// Enable with defaults
Component.whyDidYouRender = true;

// Enable with custom options
Component.whyDidYouRender = {
  customName: 'MyComponentName',
  trackHooks: false,
  logOnDifferentValues: true,
};

// Disable tracking for this component
Component.whyDidYouRender = false;
```

--------------------------------

### Hook Tracking Internal Storage

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Internal implementation details for storing previous hook results and tracking render information.

```javascript
const prevResultRef = useRef(initialHookValue);
// Stores the value extracted from previous render

// Accumulate in:
wdyrStore.hooksInfoForCurrentRender
  // WeakMap<Fiber, Array<{hookName, result}>>
```

--------------------------------

### Enable hook tracking

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/09-usage-patterns.md

Enable hook tracking globally to monitor changes in component hooks.

```javascript
MyComponent.whyDidYouRender = {
  // No specific hook config - use global defaults
};

whyDidYouRender(React, {
  trackHooks: true,  // Enables hook tracking
});
```

--------------------------------

### Configure Custom Notifier

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/01-main-entry-point.md

Replace the default console logging behavior by providing a custom function to the notifier option during initialization.

```javascript
whyDidYouRender(React, {
  notifier: (updateInfo) => {
    console.log('Component re-rendered:', updateInfo.displayName);
    console.log('Reason:', updateInfo.reason);
  }
});
```

--------------------------------

### Comparing Objects with findObjectsDifferences

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Demonstrates the difference between shallow and deep comparison modes when evaluating object property changes.

```javascript
// Shallow comparison
const prev = { style: { color: 'red' } };
const next = { style: { color: 'blue' } };

const diffs = findObjectsDifferences(prev, next, { shallow: true });
// Returns difference for 'style' property (as a whole)

// Deep comparison
const diffs = findObjectsDifferences(prev, next, { shallow: false });
// Returns difference for 'style.color'
```

--------------------------------

### Default Options Configuration

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/08-internals-reference.md

This object represents the default configuration merged with user-provided overrides during the normalization process.

```javascript
{
  include: null,
  exclude: null,
  notifier: <created above>,
  onlyLogs: false,
  consoleLog: console.log,
  consoleGroup: <determined above>,
  consoleGroupEnd: <determined above>,
  logOnDifferentValues: false,
  logOwnerReasons: true,
  trackHooks: true,
  titleColor: '#058',
  diffNameColor: 'blue',
  diffPathColor: 'red',
  textBackgroundColor: 'white',
  trackExtraHooks: [],
  trackAllPureComponents: false,
  ...userOptions,  // Override with user values
}
```

--------------------------------

### Enable component tracking

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/10-api-summary.md

Configure tracking for specific class or function components, optionally with custom settings.

```typescript
// On class components
class MyComponent extends React.Component {
  static whyDidYouRender = true;
}

// On function components
function MyComponent() {}
MyComponent.whyDidYouRender = true;

// With options
MyComponent.whyDidYouRender = {
  customName: 'MyName',
  trackHooks: false,
  logOnDifferentValues: true,
};
```

--------------------------------

### TypeScript Reference

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Add this reference to the top of your wdyr.ts file to include package types.

```tsx
/// <reference types="@welldone-software/why-did-you-render" />
```

--------------------------------

### Compact Console Output

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/02-configuration.md

Customize the visual appearance of console logs by collapsing groups and setting specific colors.

```javascript
whyDidYouRender(React, {
  trackAllPureComponents: true,
  collapseGroups: true,
  titleColor: '#333',
  diffNameColor: '#000',
  diffPathColor: '#666',
});
```

--------------------------------

### Track Class Components

Source: https://github.com/welldone-software/why-did-you-render/blob/master/README.md

Enable tracking for a class component by setting the static whyDidYouRender property to true.

```javascript
class BigList extends React.Component {
  static whyDidYouRender = true
  render(){
    return (
      //some heavy render you want to ensure doesn't happen if its not necessary
    )
  }
}
```

--------------------------------

### Compare useCallback dependencies

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/06-hook-tracking.md

Tracks the dependency array and does not notify on changes, but indicates if the function changed due to dependencies.

```javascript
const memoCallback = useCallback(() => {}, [dep1, dep2]);
// Compares: [dep1, dep2] vs previous dependencies
// Does NOT notify (dontReport: true)
// Shows in diff whether function changed due to deps
```

--------------------------------

### shouldLog(reason, Component)

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/07-notifier-system.md

Determines whether the default notifier should output a message based on the nature of changes and component configuration.

```APIDOC
## shouldLog(reason, Component)

### Description
Determines whether the default notifier should output a message based on the nature of changes and component configuration.

### Signature
`function shouldLog(reason: ReasonForUpdate, Component: React.ComponentType): boolean`

### Parameters
- **reason** (ReasonForUpdate) - Required - The categorized differences from the update.
- **Component** (React.ComponentType) - Required - The component that re-rendered.

### Return Value
- **boolean** - Returns true if the message should be logged, false otherwise.
```

--------------------------------

### findObjectsDifferences(prevObject, nextObject, options)

Source: https://github.com/welldone-software/why-did-you-render/blob/master/_autodocs/04-difference-detection.md

Compares two objects and returns an array of differences or false if they are identical.

```APIDOC
## findObjectsDifferences

### Description
Performs a shallow or deep comparison of object properties to identify differences between two objects.

### Signature
`findObjectsDifferences(prevObject: any, nextObject: any, options?: { shallow?: boolean }): Difference[] | false`

### Parameters
- **prevObject** (any) - Required - Previous object or value.
- **nextObject** (any) - Required - Next or current object or value.
- **options.shallow** (boolean) - Optional (Default: true) - If true, performs a shallow comparison; if false, performs a recursive deep comparison.

### Return Value
- **Difference[]** - An array of identified differences.
- **false** - Returned if the objects are identical.

### Example
```javascript
const prev = { style: { color: 'red' } };
const next = { style: { color: 'blue' } };

// Shallow comparison
const diffs = findObjectsDifferences(prev, next, { shallow: true });

// Deep comparison
const deepDiffs = findObjectsDifferences(prev, next, { shallow: false });
```
```
Tokens:
Raw