@welldone-software/why-did-you-render - npm Package Compare versions

Comparing version 8.0.3 to 10.0.1

dist/whyDidYouRender.js

 /**
- * @welldone-software/why-did-you-render 8.0.3
+ * @welldone-software/why-did-you-render 10.0.1
  * MIT Licensed
  * Generated by Vitali Zaidman <[e-mail]> (https://github.com/vzaidman)
- * Generated at 2024-06-08
+ * Generated at 2025-01-18
  */
@@ -48,4 +48,6 @@
     ownerDataMap: new WeakMap(),
-    /* An array of hooks tracked during one render */
-    hooksPerRender: []
+    /* An array of infos for hooks tracked during current render */
+    hooksInfoForCurrentRender: new WeakMap(),
+    /* Owner before element creation started */
+    ownerBeforeElementCreation: null
   };
@@ -69,3 +71,3 @@
   function _callSuper(t, o, e) {
-    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+    return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e, _getPrototypeOf(t).constructor) : o.apply(t, e));
   }
@@ -82,3 +84,3 @@ function _classCallCheck(a, n) {
   function _createClass(e, r, t) {
-    return r && _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
+    return _defineProperties(e.prototype, r), Object.defineProperty(e, "prototype", {
       writable: !1
@@ -90,3 +92,3 @@ }), e;
     if (!t) {
-      if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e  ) {
+      if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) {
         t && (r = t);
@@ -252,2 +254,8 @@ var n = 0,
   }
+  function _superPropGet(t, o, e, r) {
+    var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e);
+    return 2 & r && "function" == typeof p ? function (t) {
+      return p.apply(e, t);
+    } : p;
+  }
   function _toConsumableArray(r) {
@@ -306,7 +314,9 @@ return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
 
-  // copied from https://github.com/facebook/react/packages/shared/ReactSymbols.js
+  // copied from https://github.com/facebook/react/blob/fc5ef50da8e975a569622d477f1fed54cb8b193d/packages/react-devtools-shared/src/backend/shared/ReactSymbols.js#L26
   var hasSymbol = typeof Symbol === 'function' && Symbol["for"];
-  var REACT_ELEMENT_TYPE = hasSymbol ? Symbol["for"]('react.element') : 0xeac7;
+  var LEGACY_ELEMENT_NUMBER = 0xeac7;
+  var LEGACY_ELEMENT_SYMBOL_STRING = hasSymbol && Symbol["for"]('react.element');
+  var ELEMENT_SYMBOL_STRING = hasSymbol && Symbol["for"]('react.transitional.element');
   var isReactElement = function isReactElement(object) {
-    return object.$$typeof === REACT_ELEMENT_TYPE;
+    return [].concat(_toConsumableArray(hasSymbol ? [ELEMENT_SYMBOL_STRING, LEGACY_ELEMENT_SYMBOL_STRING] : []), [LEGACY_ELEMENT_NUMBER]).includes(object.$$typeof);
   };
@@ -553,3 +563,3 @@ // end
         }
-        wdyrStore.options.consoleGroup("%c".concat(diffObjType === 'hook' ? "[hook ".concat(hookName, " result]") : "".concat(diffObjType, "."), "%c").concat(pathString, "%c"), "color:".concat(wdyrStore.options.diffNameColor, ";"), "color:".concat(wdyrStore.options.diffPathColor, ";"), 'color:default;');
+        wdyrStore.options.consoleGroup("%c".concat(diffObjType === 'hook' ? "[hook ".concat(hookName, " result]") : "".concat(diffObjType, "."), "%c").concat(pathString, "%c"), "background-color: ".concat(wdyrStore.options.textBackgroundColor, ";color:").concat(wdyrStore.options.diffNameColor, ";"), "background-color: ".concat(wdyrStore.options.textBackgroundColor, ";color:").concat(wdyrStore.options.diffPathColor, ";"), 'background-color: ${wdyrStore.options.textBackgroundColor};color:default;');
         wdyrStore.options.consoleLog("".concat(diffTypesDescriptions[diffType], ". (more info at ").concat(hookName ? moreInfoHooksUrl : moreInfoUrl, ")"));
@@ -573,8 +583,10 @@ wdyrStore.options.consoleLog(_defineProperty({}, "prev ".concat(pathString), prevValue), '!==', _defineProperty({}, "next ".concat(pathString), nextValue));
       hookName = updateInfo.hookName,
+      prevOwner = updateInfo.prevOwner,
+      nextOwner = updateInfo.nextOwner,
       prevProps = updateInfo.prevProps,
       prevState = updateInfo.prevState,
-      prevHook = updateInfo.prevHook,
+      prevHookResult = updateInfo.prevHookResult,
       nextProps = updateInfo.nextProps,
       nextState = updateInfo.nextState,
-      nextHook = updateInfo.nextHook,
+      nextHookResult = updateInfo.nextHookResult,
       reason = updateInfo.reason;
@@ -584,3 +596,3 @@ if (!shouldLog(reason, Component, wdyrStore.options)) {
     }
-    wdyrStore.options.consoleGroup("%c".concat(displayName), "color: ".concat(wdyrStore.options.titleColor, ";"));
+    wdyrStore.options.consoleGroup("%c".concat(displayName), "background-color: ".concat(wdyrStore.options.textBackgroundColor, ";color: ").concat(wdyrStore.options.titleColor, ";"));
     var prefixMessage = 'Re-rendered because';
@@ -622,4 +634,4 @@ if (reason.propsDifferences) {
         values: {
-          prev: prevHook,
-          next: nextHook
+          prev: prevHookResult,
+          next: nextHookResult
         },
@@ -630,52 +642,54 @@ hookName: hookName
     if (reason.propsDifferences && reason.ownerDifferences) {
-      var prevOwnerData = wdyrStore.ownerDataMap.get(prevProps);
-      var nextOwnerData = wdyrStore.ownerDataMap.get(nextProps);
-      wdyrStore.options.consoleGroup("Rendered by ".concat(nextOwnerData.displayName));
-      var _prefixMessage = 'Re-rendered because';
-      if (reason.ownerDifferences.propsDifferences) {
-        logDifference({
-          Component: nextOwnerData.Component,
-          displayName: nextOwnerData.displayName,
-          prefixMessage: _prefixMessage,
-          diffObjType: 'props',
-          differences: reason.ownerDifferences.propsDifferences,
-          values: {
-            prev: prevOwnerData.props,
-            next: nextOwnerData.props
-          }
-        });
-        _prefixMessage = 'And because';
-      }
-      if (reason.ownerDifferences.stateDifferences) {
-        logDifference({
-          Component: nextOwnerData.Component,
-          displayName: nextOwnerData.displayName,
-          prefixMessage: _prefixMessage,
-          diffObjType: 'state',
-          differences: reason.ownerDifferences.stateDifferences,
-          values: {
-            prev: prevOwnerData.state,
-            next: nextOwnerData.state
-          }
-        });
-      }
-      if (reason.ownerDifferences.hookDifferences) {
-        reason.ownerDifferences.hookDifferences.forEach(function (_ref3, i) {
-          var hookName = _ref3.hookName,
-            differences = _ref3.differences;
-          return logDifference({
+      var prevOwnerData = wdyrStore.ownerDataMap.get(prevOwner);
+      var nextOwnerData = wdyrStore.ownerDataMap.get(nextOwner);
+      if (prevOwnerData && nextOwnerData) {
+        wdyrStore.options.consoleGroup("Rendered by ".concat(nextOwnerData.displayName));
+        var _prefixMessage = 'Re-rendered because';
+        if (reason.ownerDifferences.propsDifferences) {
+          logDifference({
             Component: nextOwnerData.Component,
             displayName: nextOwnerData.displayName,
             prefixMessage: _prefixMessage,
-            diffObjType: 'hook',
-            differences: differences,
+            diffObjType: 'props',
+            differences: reason.ownerDifferences.propsDifferences,
             values: {
-              prev: prevOwnerData.hooks[i].result,
-              next: nextOwnerData.hooks[i].result
-            },
-            hookName: hookName
+              prev: prevOwnerData.props,
+              next: nextOwnerData.props
+            }
           });
-        });
+          _prefixMessage = 'And because';
+        }
+        if (reason.ownerDifferences.stateDifferences) {
+          logDifference({
+            Component: nextOwnerData.Component,
+            displayName: nextOwnerData.displayName,
+            prefixMessage: _prefixMessage,
+            diffObjType: 'state',
+            differences: reason.ownerDifferences.stateDifferences,
+            values: {
+              prev: prevOwnerData.state,
+              next: nextOwnerData.state
+            }
+          });
+        }
+        if (reason.ownerDifferences.hookDifferences) {
+          reason.ownerDifferences.hookDifferences.forEach(function (_ref3, i) {
+            var hookName = _ref3.hookName,
+              differences = _ref3.differences;
+            return logDifference({
+              Component: nextOwnerData.Component,
+              displayName: nextOwnerData.displayName,
+              prefixMessage: _prefixMessage,
+              diffObjType: 'hook',
+              differences: differences,
+              values: {
+                prev: prevOwnerData.hooksInfo[i].result,
+                next: nextOwnerData.hooksInfo[i].result
+              },
+              hookName: hookName
+            });
+          });
+        }
+        wdyrStore.options.consoleGroupEnd();
       }
-      wdyrStore.options.consoleGroupEnd();
     }
@@ -729,2 +743,3 @@ if (!reason.propsDifferences && !reason.stateDifferences && !reason.hookDifferences) {
       diffPathColor: 'red',
+      textBackgroundColor: 'white',
       trackExtraHooks: [],
@@ -766,52 +781,63 @@ trackAllPureComponents: false
 
-  function getOwnerDifferences(_ref) {
-    var prevOwnerData = _ref.prevOwnerData,
-      nextOwnerData = _ref.nextOwnerData;
+  function getOwnerDifferences(prevOwner, nextOwner) {
+    if (!prevOwner || !nextOwner) {
+      return false;
+    }
+    var prevOwnerData = wdyrStore.ownerDataMap.get(prevOwner);
+    var nextOwnerData = wdyrStore.ownerDataMap.get(nextOwner);
     if (!prevOwnerData || !nextOwnerData) {
       return false;
     }
-
-    // in strict mode prevOwnerData might be twice as lengthy because of double renders
-    var prevOwnerDataHooks = prevOwnerData.hooks.length === nextOwnerData.hooks.length * 2 ? prevOwnerData.hooks.slice(prevOwnerData.hooks.length / 2) : prevOwnerData.hooks;
-    var hookDifferences = prevOwnerDataHooks.map(function (_ref2, i) {
-      var hookName = _ref2.hookName,
-        result = _ref2.result;
+    try {
+      // in strict mode a re-render happens twice as opposed to the initial render that happens once.
+      var prevOwnerDataHooks = prevOwnerData.hooksInfo.length === nextOwnerData.hooksInfo.length * 2 ? prevOwnerData.hooksInfo.slice(prevOwnerData.hooksInfo.length / 2) : prevOwnerData.hooksInfo;
+      var hookDifferences = prevOwnerDataHooks.map(function (_ref, i) {
+        var hookName = _ref.hookName,
+          result = _ref.result;
+        return {
+          hookName: hookName,
+          differences: findObjectsDifferences(result, nextOwnerData.hooksInfo[i].result, {
+            shallow: false
+          })
+        };
+      });
       return {
-        hookName: hookName,
-        differences: findObjectsDifferences(result, nextOwnerData.hooks[i].result, {
-          shallow: false
-        })
+        propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props),
+        stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state),
+        hookDifferences: hookDifferences.length > 0 ? hookDifferences : false
       };
-    });
-    return {
-      propsDifferences: findObjectsDifferences(prevOwnerData.props, nextOwnerData.props),
-      stateDifferences: findObjectsDifferences(prevOwnerData.state, nextOwnerData.state),
-      hookDifferences: hookDifferences.length > 0 ? hookDifferences : false
-    };
+    } catch (e) {
+      wdyrStore.options.consoleLog('whyDidYouRender error in getOwnerDifferences. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
+        errorInfo: {
+          error: e,
+          prevOwner: prevOwner,
+          nextOwner: nextOwner,
+          options: wdyrStore.options
+        }
+      });
+      return false;
+    }
   }
-  function getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook) {
-    var prevOwnerData = wdyrStore.ownerDataMap.get(prevProps);
-    var nextOwnerData = wdyrStore.ownerDataMap.get(nextProps);
+  function getUpdateReason(prevOwner, prevProps, prevState, prevHookResult, nextOwner, nextProps, nextState, nextHookResult) {
     return {
       propsDifferences: findObjectsDifferences(prevProps, nextProps),
       stateDifferences: findObjectsDifferences(prevState, nextState),
-      hookDifferences: findObjectsDifferences(prevHook, nextHook, {
+      hookDifferences: findObjectsDifferences(prevHookResult, nextHookResult, {
         shallow: false
       }),
-      ownerDifferences: getOwnerDifferences({
-        prevOwnerData: prevOwnerData,
-        nextOwnerData: nextOwnerData
-      })
+      ownerDifferences: getOwnerDifferences(prevOwner, nextOwner)
     };
   }
-  function getUpdateInfo(_ref3) {
-    var Component = _ref3.Component,
-      displayName = _ref3.displayName,
-      hookName = _ref3.hookName,
-      prevProps = _ref3.prevProps,
-      prevState = _ref3.prevState,
-      prevHook = _ref3.prevHook,
-      nextProps = _ref3.nextProps,
-      nextState = _ref3.nextState,
-      nextHook = _ref3.nextHook;
+  function getUpdateInfo(_ref2) {
+    var Component = _ref2.Component,
+      displayName = _ref2.displayName,
+      hookName = _ref2.hookName,
+      prevOwner = _ref2.prevOwner,
+      nextOwner = _ref2.nextOwner,
+      prevProps = _ref2.prevProps,
+      prevState = _ref2.prevState,
+      prevHookResult = _ref2.prevHookResult,
+      nextProps = _ref2.nextProps,
+      nextState = _ref2.nextState,
+      nextHookResult = _ref2.nextHookResult;
     return {
@@ -821,9 +847,12 @@ Component: Component,
       hookName: hookName,
+      prevOwner: prevOwner,
       prevProps: prevProps,
       prevState: prevState,
-      prevHook: prevHook,
+      prevHookResult: prevHookResult,
+      nextOwner: nextOwner,
       nextProps: nextProps,
       nextState: nextState,
-      nextHook: nextHook,
-      reason: getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, nextHook)
+      nextHookResult: nextHookResult,
+      reason: getUpdateReason(prevOwner, prevProps, prevState, prevHookResult, nextOwner, nextProps, nextState, nextHookResult),
+      ownerDataMap: wdyrStore.ownerDataMap
     };
@@ -892,3 +921,3 @@ }
         };
-        var origRender = _get((_getPrototypeOf(WDYRPatchedClassComponent.prototype)), "render", _this) || _this.render;
+        var origRender = _superPropGet((WDYRPatchedClassComponent), "render", _this, 1) || _this.render;
 
@@ -920,4 +949,6 @@ // this probably means that render is an arrow function or this.render.bind(this) was called on the original class
                 displayName: displayName,
+                prevOwner: this._WDYR.prevOwner,
                 prevProps: this._WDYR.prevProps,
                 prevState: this._WDYR.prevState,
+                nextOwner: wdyrStore.ownerBeforeElementCreation,
                 nextProps: this.props,
@@ -928,6 +959,7 @@ nextState: this.state
             }
+            this._WDYR.prevOwner = wdyrStore.ownerBeforeElementCreation;
             this._WDYR.prevProps = this.props;
             this._WDYR.prevState = this.state;
           }
-          return _get(_getPrototypeOf(WDYRPatchedClassComponent.prototype), "render", this) ? _get(_getPrototypeOf(WDYRPatchedClassComponent.prototype), "render", this).call(this) : null;
+          return _superPropGet(WDYRPatchedClassComponent, "render", this, 1) ? _superPropGet(WDYRPatchedClassComponent, "render", this, 3)([]) : null;
         }
@@ -938,3 +970,3 @@ }]);
       WDYRPatchedClassComponent.displayName = displayName;
-    } catch (e) {
+    } catch (_e) {
       // not crucial if displayName couldn't be set
@@ -957,7 +989,10 @@ }
     var FunctionalComponent = typeof FunctionalOrStringComponent === 'string' ? getFunctionalComponentFromStringComponent(FunctionalOrStringComponent) : FunctionalOrStringComponent;
-    function WDYRFunctionalComponent() {
-      var nextProps = arguments[0];
-      var ref = wdyrStore.React.useRef();
-      var prevProps = ref.current;
-      ref.current = nextProps;
+    function WDYRFunctionalComponent(nextProps, refMaybe) {
+      var prevPropsRef = wdyrStore.React.useRef();
+      var prevProps = prevPropsRef.current;
+      prevPropsRef.current = nextProps;
+      var prevOwnerRef = wdyrStore.React.useRef();
+      var prevOwner = prevOwnerRef.current;
+      var nextOwner = wdyrStore.ownerBeforeElementCreation;
+      prevOwnerRef.current = nextOwner;
       if (prevProps) {
@@ -967,2 +1002,4 @@ var updateInfo = getUpdateInfo({
           displayName: displayName,
+          prevOwner: prevOwner,
+          nextOwner: nextOwner,
           prevProps: prevProps,
@@ -976,7 +1013,10 @@ nextProps: nextProps
       }
-      return FunctionalComponent.apply(void 0, arguments);
+      for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        args[_key - 2] = arguments[_key];
+      }
+      return FunctionalComponent.apply(void 0, [nextProps, refMaybe].concat(args));
     }
     try {
       WDYRFunctionalComponent.displayName = displayName;
-    } catch (e) {
+    } catch (_e) {
       // not crucial if displayName couldn't be set
@@ -1010,3 +1050,3 @@ }
       PatchedInnerComponent.displayName = getDisplayName(WrappedFunctionalComponent);
-    } catch (e) {
+    } catch (_e) {
       // not crucial if displayName couldn't be set
@@ -1019,3 +1059,3 @@ }
       WDYRMemoizedFunctionalComponent.displayName = displayName;
-    } catch (e) {
+    } catch (_e) {
       // not crucial if displayName couldn't be set
@@ -1044,3 +1084,3 @@ }
       WDYRForwardRefFunctionalComponent.displayName = displayName;
-    } catch (e) {
+    } catch (_e) {
       // not crucial if displayName couldn't be set
@@ -1053,25 +1093,28 @@ }
 
+  function getCurrentOwner() {
+    var reactSharedInternals = wdyrStore.React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
+    var reactDispatcher = reactSharedInternals === null || reactSharedInternals === void 0 ? void 0 : reactSharedInternals.A;
+    return reactDispatcher === null || reactDispatcher === void 0 ? void 0 : reactDispatcher.getOwner();
+  }
+
   var initialHookValue = Symbol('initial-hook-value');
-  function trackHookChanges(hookName, _ref, hookResult) {
-    var hookPath = _ref.path;
-    var nextHook = hookPath ? lodash.get(hookResult, hookPath) : hookResult;
-    var renderNumberForTheHook = wdyrStore.React.useRef(true);
-
-    // TODO: improve
-    var isSecondCycleOfRenders = wdyrStore.hooksPerRender[0] && wdyrStore.hooksPerRender[0].renderNumberForTheHook !== renderNumberForTheHook.current;
-    if (isSecondCycleOfRenders) {
-      wdyrStore.hooksPerRender = [];
+  function trackHookChanges(hookName, _ref, rawHookResult) {
+    var pathToGetTrackedHookResult = _ref.path;
+    var nextResult = pathToGetTrackedHookResult ? lodash.get(rawHookResult, pathToGetTrackedHookResult) : rawHookResult;
+    var prevResultRef = wdyrStore.React.useRef(initialHookValue);
+    var prevResult = prevResultRef.current;
+    prevResultRef.current = nextResult;
+    var ownerInstance = getCurrentOwner();
+    if (!ownerInstance) {
+      return rawHookResult;
     }
-    wdyrStore.hooksPerRender.push({
+    if (!wdyrStore.hooksInfoForCurrentRender.has(ownerInstance)) {
+      wdyrStore.hooksInfoForCurrentRender.set(ownerInstance, []);
+    }
+    var hooksInfoForCurrentRender = wdyrStore.hooksInfoForCurrentRender.get(ownerInstance);
+    hooksInfoForCurrentRender.push({
       hookName: hookName,
-      result: nextHook,
-      renderNumberForTheHook: renderNumberForTheHook.current
+      result: nextResult
     });
-    renderNumberForTheHook.current++;
-    var ComponentHookDispatchedFromInstance = wdyrStore.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED && wdyrStore.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
-    var prevHookRef = wdyrStore.React.useRef(initialHookValue);
-    if (!ComponentHookDispatchedFromInstance) {
-      return hookResult;
-    }
-    var Component = ComponentHookDispatchedFromInstance.type.ComponentForHooksTracking || ComponentHookDispatchedFromInstance.type;
+    var Component = ownerInstance.type.ComponentForHooksTracking || ownerInstance.type;
     var displayName = getDisplayName(Component);
@@ -1081,20 +1124,15 @@ var isShouldTrack = shouldTrack(Component, {
     });
-    if (!isShouldTrack) {
-      return hookResult;
-    }
-    var newPrevHookRef = prevHookRef.current;
-    prevHookRef.current = hookResult;
-    if (newPrevHookRef !== initialHookValue) {
-      var notification = getUpdateInfo({
+    if (isShouldTrack && prevResult !== initialHookValue) {
+      var updateInfo = getUpdateInfo({
         Component: Component,
         displayName: displayName,
         hookName: hookName,
-        prevHook: hookPath ? lodash.get(newPrevHookRef, hookPath) : newPrevHookRef,
-        nextHook: nextHook
+        prevHookResult: prevResult,
+        nextHookResult: nextResult
       });
-      if (notification.reason.hookDifferences) {
-        wdyrStore.options.notifier(notification);
+      if (updateInfo.reason.hookDifferences) {
+        wdyrStore.options.notifier(updateInfo);
       }
     }
-    return hookResult;
+    return rawHookResult;
   }
@@ -1174,5 +1212,5 @@ function createPatchedComponent(Component, _ref2) {
   function storeOwnerData(element) {
-    var OwnerInstance = wdyrStore.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current;
-    if (OwnerInstance) {
-      var Component = OwnerInstance.type.ComponentForHooksTracking || OwnerInstance.type;
+    var owner = getCurrentOwner();
+    if (owner) {
+      var Component = owner.type.ComponentForHooksTracking || owner.type;
       var displayName = getDisplayName(Component);
@@ -1183,27 +1221,13 @@ var additionalOwnerData = {};
       }
-      wdyrStore.ownerDataMap.set(element.props, {
+      wdyrStore.ownerDataMap.set(owner, {
         Component: Component,
         displayName: displayName,
-        props: OwnerInstance.pendingProps,
-        state: OwnerInstance.stateNode ? OwnerInstance.stateNode.state : null,
-        hooks: wdyrStore.hooksPerRender,
+        props: owner.pendingProps,
+        state: owner.stateNode ? owner.stateNode.state : null,
+        hooksInfo: wdyrStore.hooksInfoForCurrentRender.get(owner) || [],
         additionalOwnerData: additionalOwnerData
       });
+      wdyrStore.hooksInfoForCurrentRender["delete"](owner);
     }
   }
-  function resetHooksPerRenderIfNeeded() {
-    // Intercept assignments to ReactCurrentOwner.current to reset hooksPerRender
-    var currentOwner = null;
-    if (wdyrStore.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
-      Object.defineProperty(wdyrStore.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, 'current', {
-        get: function get() {
-          return currentOwner;
-        },
-        set: function set(value) {
-          currentOwner = value;
-          wdyrStore.hooksPerRender = [];
-        }
-      });
-    }
-  }
   function trackHooksIfNeeded() {
@@ -1226,4 +1250,3 @@ var hooksSupported = !!wdyrStore.React.useState;
         var originalHook = hookParent[hookName];
-        var newHookName = hookName[0].toUpperCase() + hookName.slice(1);
-        var newHook = function WhyDidYouRenderReWrittenHook() {
+        var newHook = function useWhyDidYouRenderReWrittenHook() {
           for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -1235,2 +1258,3 @@ args[_key] = arguments[_key];
             dontReport = hookTrackingConfig.dontReport;
+          var shouldTrackHookChanges = !dontReport;
           if (dependenciesPath && lodash.isFunction(hookResult)) {
@@ -1242,3 +1266,3 @@ dependenciesMap.set(hookResult, {
           }
-          if (!dontReport) {
+          if (shouldTrackHookChanges) {
             trackHookChanges(hookName, hookTrackingConfig, hookResult);
@@ -1249,3 +1273,3 @@ }
         Object.defineProperty(newHook, 'name', {
-          value: newHookName,
+          value: hookName + 'WDYR',
           writable: false
@@ -1288,3 +1312,2 @@ });
     });
-    resetHooksPerRenderIfNeeded();
     React.createElement = function (origType) {
@@ -1297,2 +1320,3 @@ var WDYRType = getWDYRType(origType);
         try {
+          wdyrStore.ownerBeforeElementCreation = getCurrentOwner();
           var element = wdyrStore.origCreateElement.apply(React, [WDYRType].concat(rest));
@@ -1304,3 +1328,3 @@ if (wdyrStore.options.logOwnerReasons) {
         } catch (e) {
-          wdyrStore.options.consoleLog('whyDidYouRender error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
+          wdyrStore.options.consoleLog('whyDidYouRender error in createElement. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
             errorInfo: {
@@ -1325,2 +1349,3 @@ error: e,
     React.cloneElement = function () {
+      wdyrStore.ownerBeforeElementCreation = getCurrentOwner();
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
@@ -1365,2 +1390,3 @@ args[_key3] = arguments[_key3];
   whyDidYouRender.getWDYRType = getWDYRType;
+  whyDidYouRender.getCurrentOwner = getCurrentOwner;
   Object.assign(whyDidYouRender, React__namespace);
@@ -1367,0 +1393,0 @@

jsx-dev-runtime.js

@@ -8,32 +8,33 @@ /* eslint-disable*/
 
-module.exports = jsxDevRuntime
-module.exports.jsxDEV = function jsxDEV(){
-  var args = Array.prototype.slice.call(arguments)
-
-  if(wdyrStore.React && wdyrStore.React.__IS_WDYR__){
-    var origType = args[0]
-    var rest = args.slice(1)
-
-    var WDYRType = WDYR.getWDYRType(origType)
-    if(WDYRType){
-      try{
-        var element = origJsxDev.apply(null, [WDYRType].concat(rest))
-        if(wdyrStore.options.logOwnerReasons){
-          WDYR.storeOwnerData(element)
+module.exports = {
+  ...jsxDevRuntime,
+  jsxDEV(...args) {
+    if (wdyrStore.React && wdyrStore.React.__IS_WDYR__) {
+      var origType = args[0]
+      var rest = args.slice(1)
+  
+      var WDYRType = WDYR.getWDYRType(origType)
+      if (WDYRType) {
+        try {
+          wdyrStore.ownerBeforeElementCreation = WDYR.getCurrentOwner();
+          var element = origJsxDev.apply(null, [WDYRType].concat(rest))
+          if (wdyrStore.options.logOwnerReasons) {
+            WDYR.storeOwnerData(element)
+          }
+          return element
+        } catch(e) {
+          wdyrStore.options.consoleLog('whyDidYouRender JSX transform error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
+            errorInfo: {
+              error: e,
+              componentNameOrComponent: origType,
+              rest: rest,
+              options: wdyrStore.options
+            }
+          })
         }
-        return element
-      }catch(e){
-        wdyrStore.options.consoleLog('whyDidYouRender JSX transform error. Please file a bug at https://github.com/welldone-software/why-did-you-render/issues.', {
-          errorInfo: {
-            error: e,
-            componentNameOrComponent: origType,
-            rest: rest,
-            options: wdyrStore.options
-          }
-        })
       }
     }
+    
+    return origJsxDev.apply(null, args)
   }
-
-  return origJsxDev.apply(null, args)
-}
+};

package.json

 {
   "name": "@welldone-software/why-did-you-render",
   "description": "Monkey patches React to notify you about avoidable re-renders.",
-  "version": "8.0.3",
+  "version": "10.0.1",
   "repository": "git+https://github.com/welldone-software/why-did-you-render.git",
@@ -31,22 +31,14 @@ "license": "MIT",
     "start": "cross-env PORT=3003 NODE_ENV=development node demo/serve",
-    "start:classic": "cross-env USE_CLASSIC_JSX=true yarn start",
     "build": "cross-env NODE_ENV=production rollup --config --bundleConfigAsCjs",
-    "test": "yarn test:automatic && yarn test:classic",
-    "test:automatic": "cross-env yarn _test",
-    "test:classic": "cross-env USE_CLASSIC_JSX=true yarn _test",
-    "_test": "jest --config=jest.config.js",
-    "test:watch": "yarn test:automatic --watch",
-    "test:ci": "yarn test --coverage && coveralls < coverage/lcov.info",
-    "lint": "eslint . --ext=js --max-warnings 0 --cache --cache-location .cache/eslint-cache",
-    "clear": "rimraf .cache dist demo/dist",
+    "test": "jest --config=jest.config.js",
+    "test:ci": "yarn test --coverage",
+    "lint": "eslint . --max-warnings 0 --cache --cache-location .cache/eslint-cache",
+    "clear": "rimraf .cache dist demo/dist node_modules",
     "watch": "concurrently --names \"Serve,Test\" \"npm:start\" \"npm:test:watch\"",
-    "checkHealth": "yarn lint && yarn test",
-    "version": "yarn checkHealth && yarn build",
+    "checkHealth": "yarn build && yarn lint && yarn test && yarn cypress:test",
+    "version": "yarn checkHealth",
     "postversion": "git push && git push --tags",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run --browser chrome",
-    "_cypress:run:ci": "yarn cypress:run --record --parallel --group main",
-    "_cypress:run:ci:classic": "yarn cypress:run --record --parallel --group classic",
-    "cypress:ci": "start-server-and-test start http://localhost:3003 _cypress:run:ci",
-    "cypress:ci:classic": "start-server-and-test start:classic http://localhost:3003 _cypress:run:ci:classic"
+    "cypress:test": "start-server-and-test start http://localhost:3003 cypress:run"
   },
@@ -58,5 +50,2 @@ "comments": {
     "resolutions": {
-      "coveralls": [
-        "removed while it's not passing the audit and travis doesn't work"
-      ],
       "source-map@^0.7.4": [
@@ -67,4 +56,5 @@ "fixes https://github.com/mozilla/source-map/issues/432 or we get:",
       ],
-      "eslint@^8": [
-        "react eslint plugins doesn't play nicely with eslint 9 so we force using eslint 8 for now"
+      "rollup-plugin-react-refresh": [
+        "Uses my forked github https://github.com/vzaidman/rollup-plugin-react-refresh",
+        "Until the PR from that is merged to the official library https://github.com/PepsRyuu/rollup-plugin-react-refresh/pull/10"
       ]
@@ -77,3 +67,3 @@ }
   "peerDependencies": {
-    "react": "^18"
+    "react": "^19"
   },
@@ -85,36 +75,34 @@ "resolutions": {
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
-    "@babel/plugin-transform-class-properties": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@rollup/plugin-alias": "^5.1.0",
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@eslint/compat": "^1.2.4",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
-    "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^16.0.0",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-redux": "^7.1.33",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@types/react-redux": "^7.1.34",
     "@welldone-software/jest-console-handler": "^2.0.1",
-    "acorn-walk": "^8.3.2",
-    "astring": "^1.8.6",
+    "acorn-walk": "^8.3.4",
+    "astring": "^1.9.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.7.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.1",
     "create-react-class": "^15.7.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.11.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-cypress": "^3.3.0",
-    "eslint-plugin-jest": "^28.6.0",
-    "eslint-plugin-react": "^7.34.2",
-    "express": "^4.19.2",
+    "cypress": "^13.17.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-jest": "^28.10.0",
+    "eslint-plugin-react": "^7.37.3",
+    "express": "^4.21.2",
     "express-history-api-fallback": "^2.2.1",
-    "husky": "^9.0.11",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
@@ -124,21 +112,21 @@ "jest-cli": "^29.7.0",
     "nollup": "^0.21.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-hot-loader": "^4.13.1",
-    "react-is": "^18.3.1",
-    "react-redux": "^9.1.2",
-    "react-router-dom": "^6.23.1",
-    "react-router-dom-5": "npm:react-router-dom@^5.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "react-refresh": "^0.16.0",
+    "react-router-dom": "^7.1.1",
     "redux": "^5.0.1",
-    "rimraf": "^5.0.7",
-    "rollup": "^4.18.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.29.1",
     "rollup-plugin-alias": "^2.2.0",
     "rollup-plugin-commonjs-alternate": "^0.8.0",
-    "rollup-plugin-license": "^3.4.0",
+    "rollup-plugin-license": "^3.5.3",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-react-refresh": "https://github.com/vzaidman/rollup-plugin-react-refresh.git#5c2f09bc28dbb8ab711b7d095f61fbc8d295fcd6",
     "source-map": "npm:source-map@^0.8.0-beta.0",
-    "start-server-and-test": "^2.0.4",
-    "styled-components": "^6.1.11",
-    "typescript": "^5.4.5"
+    "start-server-and-test": "^2.0.9",
+    "styled-components": "^6.1.13",
+    "typescript": "^5.7.2"
   }
-}
+}

README.md

@@ -8,5 +8,5 @@ <p align="center">
 [![npm version](https://badge.fury.io/js/%40welldone-software%2Fwhy-did-you-render.svg)](https://badge.fury.io/js/%40welldone-software%2Fwhy-did-you-render)
-[![Build Status](https://travis-ci.com/welldone-software/why-did-you-render.svg?branch=master)](https://travis-ci.com/welldone-software/why-did-you-render)
+[![Build Status](https://github.com/welldone-software/why-did-you-render/actions/workflows/main.yml/badge.svg)](https://github.com/welldone-software/why-did-you-render/actions/workflows/main.yml)
 ![NPM](https://img.shields.io/npm/l/@welldone-software/why-did-you-render?style=flat)
-![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/@welldone-software/why-did-you-render)
+[![@welldone-software/why-did-you-render](https://snyk.io/advisor/npm-package/@welldone-software/why-did-you-render/badge.svg)](https://snyk.io/advisor/npm-package/@welldone-software/why-did-you-render)
 [![Coverage Status](https://coveralls.io/repos/github/welldone-software/why-did-you-render/badge.svg?branch=add-e2e-tests-using-cypress)](https://coveralls.io/github/welldone-software/why-did-you-render?branch=add-e2e-tests-using-cypress)
@@ -16,11 +16,21 @@
 
-For example, if you pass `style={{width: '100%'}}` to a big pure component it would always re-render on every element creation:
+For example, if you pass `style={{width: '100%'}}` to a big memo component it would always re-render on every element creation:
 ```jsx
-<BigListPureComponent style={{width: '100%'}}/>
+<MemoBigList style={{width: '100%'}}/>
 ```
-
 It can also help you to simply track when and why a certain component re-renders.
 
+> [!CAUTION]
+> The library was not tested with [React Compiler](https://react.dev/learn/react-compiler) at all. I believe it's completely incompatible with it.
+
+> [!CAUTION]
+> Not all re-renders are *"bad"*. Sometimes shenanigan to reduce re-renders can either hurt your App's performance or have a neglagable effect, in which case it would be just a waste of your efforts, and complicate your code. Try to focus on heavier components when optimizing and use the [React profiler](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html) inside the React dev-tools to measure the effects of any changes.
+
+> [!NOTE]
+I've joined the React team, specifically working on React tooling. This role has opened up exciting opportunities to enhance the developer experience for React users— and your input could offer valuable insights to help me with this effort. Please join the conversation in the [discussion thread](https://github.com/welldone-software/why-did-you-render/discussions/309)!
+
 ## Setup
-The latest version of the library was tested [(unit tests and E2E)]((https://travis-ci.com/welldone-software/why-did-you-render.svg?branch=master)) with **`React@18`** only. For React 17 and 16, please use version @^7.
+The latest version of the library was tested [(unit tests and E2E)]((https://travis-ci.com/welldone-software/why-did-you-render.svg?branch=master)) with **`React@19`** only.
+* [For `React 18`, please see the readme for version @^8](https://github.com/welldone-software/why-did-you-render/tree/version-8).
+* [For `React 17` and `React 16`, please see the readme for version @^7](https://github.com/welldone-software/why-did-you-render/tree/version-7).
 
@@ -32,6 +42,7 @@ ```
 ```
-yarn add --dev @welldone-software/why-did-you-render
+yarn add @welldone-software/why-did-you-render -D
 ```
+Set the library to be the React's importSource and make sure `preset-react` is in `development` mode.
 
-If you use the `automatic` JSX transformation, set the library to be the import source, and make sure `preset-react` is in `development` mode.
+This is because `React 19` requires using the `automatic` [JSX transformation](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). 
 ```js
@@ -45,4 +56,8 @@ ['@babel/preset-react', {
 
-Unfortunately, the `metro-react-native-babel-preset` that comes with react-native out of the box does not allow you to change the options of the `babel/plugin-transform-react-jsx` plugin. Just add the plugin with options as listed below and start react-native packager as usual. Default env for babel is "development". If you do not use expo when working with react-native, the following method will help you.
+### React Native
 
+#### Bare workflow
+
+Add the plugin as listed below and start react-native packager as usual. Default env for babel is "development". If you do not use expo when working with react-native, the following method will help you.
+
 ```js
@@ -54,3 +69,7 @@ module.exports = {
     development: {
-      plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]],
+      plugins: [['@babel/plugin-transform-react-jsx', {
+        runtime: 'automatic',
+        development: process.env.NODE_ENV === 'development',
+        importSource: '@welldone-software/why-did-you-render',
+      }]],
     },
@@ -61,6 +80,27 @@ },
 
-> Notice: Create React App (CRA) ^4 **does use the `automatic` JSX transformation.**
+#### Expo managed
+
+You can pass params to `@babel/preset-react` through `babel-preset-expo`
+
+```js
+// babel.config.js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      [
+        "babel-preset-expo",
+        {
+          jsxImportSource: "@welldone-software/why-did-you-render",
+        },
+      ],
+    ],
+  };
+};
+```
+
+> Notice: Create React App (CRA) ^4 **uses the `automatic` JSX transformation.**
 > [See the following comment on how to do this step with CRA](https://github.com/welldone-software/why-did-you-render/issues/154#issuecomment-773905769)
 
-Create a `wdyr.js` file and import it as **the first import** in your application.
+Create a `wdyr.js` file and import it as **the very first import** in your application.
 
@@ -79,3 +119,6 @@ `wdyr.js`:
 
-> **Notice: The library should *NEVER* be used in production because it slows down React**
+> [!CAUTION]
+> The library should *NEVER* be used in production because:
+> - It significantly slows down React
+> - It monkey patches React and can result in unexpected behavior
 
@@ -87,5 +130,6 @@ In [Typescript](https://github.com/welldone-software/why-did-you-render/issues/161), call the file wdyr.ts and add the following line to the top of the file to import the package's types:
 
-Import `wdyr` as the first import (even before `react-hot-loader`):
+Import `wdyr` as the first import (even before `react-hot-loader` if you use it):
 
 `index.js`:
+
 ```jsx
@@ -95,3 +139,2 @@ import './wdyr'; // <--- first import
 import 'react-hot-loader';
-import {hot} from 'react-hot-loader/root';
 
@@ -103,10 +146,8 @@ import React from 'react';
 // ...
-const HotApp = hot(App);
-// ...
-ReactDOM.render(<HotApp/>, document.getElementById('root'));
+ReactDOM.render(<App/>, document.getElementById('root'));
 ```
 
-If you use `trackAllPureComponents` like we suggest, all pure components ([React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)) will be tracked.
+If you use `trackAllPureComponents`, all pure components ([React.PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent) or [React.memo](https://reactjs.org/docs/react-api.html#reactmemo)) will be tracked.
 
-Otherwise, add `whyDidYouRender = true` to component classes/functions you want to track. (f.e `Component.whyDidYouRender = true`)
+Otherwise, add `whyDidYouRender = true` to ad-hoc components to track them. (f.e `Component.whyDidYouRender = true`)
 
@@ -125,2 +166,4 @@ More information about what is tracked can be found in [Tracking Components](#tracking-components).
 
+// For react-native you might want to use 
+// the __DEV__ flag instead of process.env.NODE_ENV === 'development'
 if (process.env.NODE_ENV === 'development') {
@@ -212,3 +255,3 @@ const whyDidYouRender = require('@welldone-software/why-did-you-render');
   ```
-  
+
 ## Options
@@ -229,3 +272,4 @@ Optionally you can pass in `options` as the second parameter. The following options are available:
 - `diffPathColor`
-- `notifier: ({Component, displayName, hookName, prevProps, prevState, prevHook, nextProps, nextState, nextHook, reason, options, ownerDataMap}) => void`
+- `textBackgroundColor`
+- `notifier: ({Component, displayName, hookName, prevProps, prevState, prevHookResult, nextProps, nextState, nextHookResult, reason, options, ownerDataMap}) => void`
 - `getAdditionalOwnerData: (element) => {...}`
@@ -272,3 +316,3 @@
 
-> There is currently a problem with rewriting exports of imported files in webpack. A workaround is available here: [#85 - trackExtraHooks cannot set property](https://github.com/welldone-software/why-did-you-render/issues/85)
+> This feature is rewriting exports of imported files. There is currently a problem with that approach in webpack. A workaround is available here: [#85 - trackExtraHooks cannot set property](https://github.com/welldone-software/why-did-you-render/issues/85)
 
@@ -315,6 +359,7 @@ #### logOwnerReasons
 
-#### titleColor / diffNameColor / diffPathColor
+#### titleColor / diffNameColor / diffPathColor / textBackgroundColor
 ##### (default titleColor: `'#058'`)
 ##### (default diffNameColor: `'blue'`)
 ##### (default diffPathColor: `'red'`)
+##### (default textBackgroundColor: `'white`)
 
@@ -341,3 +386,3 @@ Controls the colors used in the console notifications
     * Try causing an issue by temporary rendering the whole app twice in it's entry point:
-    
+
         `index.js`:
@@ -344,0 +389,0 @@ ```jsx

types.d.ts

@@ -23,4 +23,4 @@ import * as React from 'react';
   nextState: any;
-  prevHook: any;
-  nextHook: any;
+  prevHookResult: any;
+  nextHookResult: any;
   reason: ReasonForUpdate;
@@ -47,2 +47,3 @@ options: WhyDidYouRenderOptions;
   diffPathColor?: string;
+  textBackgroundColor?: string;
   notifier?: Notifier;
@@ -52,3 +53,3 @@ customName?: string;
 
-export type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions|boolean
+export type WhyDidYouRenderComponentMember = WhyDidYouRenderOptions | boolean
 
@@ -55,0 +56,0 @@ export type Notifier = (options: UpdateInfo) => void

No alert changes

Improved metrics

Total package byte prevSize

340015

increased by2.46%

Dev dependency count

54

decreased by-3.57%

Lines of code

1442

increased by2.12%

Number of lines in readme file

411

increased by12.3%

No dependency changes