Properly store owner data for cloned elements

src/whyDidYouRender.js

@@ -119,11 +119,27 @@ export default function whyDidYouRender(React, userOptions){
 
   const origCreateElement = React.createElement
   const origCreateFactory = React.createFactory
+  const origCloneElement = React.cloneElement
 
   let componentsMap = new WeakMap()
   const ownerDataMap = new WeakMap()
   const hooksRef = {current: []}
 
+  function storeOwnerData(element){
+    const OwnerInstance = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current
+    if(OwnerInstance){
+      const Component = OwnerInstance.type.ComponentForHooksTracking || OwnerInstance.type
+      const displayName = getDisplayName(Component)
+      ownerDataMap.set(element.props, {
+        Component,
+        displayName,
+        props: OwnerInstance.pendingProps,
+        state: OwnerInstance.stateNode != null ? OwnerInstance.stateNode.state : null,
+        hooks: hooksRef.current
+      })
+    }
+  }
+
   // Intercept assignments to ReactCurrentOwner.current and reset hooksRef
   let currentOwner = null
   if(React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED){
@@ -161,18 +177,7 @@ export default function whyDidYouRender(React, userOptions){
 
         const element = origCreateElement.apply(React, [WDYRPatchedComponent, ...rest])
         if(options.logOwnerReasons){
-          const OwnerInstance = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current
-          if(OwnerInstance){
-            const Component = OwnerInstance.type.ComponentForHooksTracking || OwnerInstance.type
-            const displayName = getDisplayName(Component)
-            ownerDataMap.set(element.props, {
-              Component,
-              displayName,
-              props: OwnerInstance.pendingProps,
-              state: OwnerInstance.stateNode != null ? OwnerInstance.stateNode.state : null,
-              hooks: hooksRef.current
-            })
-          }
+          storeOwnerData(element)
         }
 
         return element
@@ -205,6 +210,17 @@ export default function whyDidYouRender(React, userOptions){
 
   Object.assign(React.createFactory, origCreateFactory)
 
+  React.cloneElement = (...args) => {
+    const element = origCloneElement.apply(React, args)
+    if(options.logOwnerReasons){
+      storeOwnerData(element)
+    }
+
+    return element
+  }
+
+  Object.assign(React.cloneElement, origCloneElement)
+
   if(options.trackHooks){
     const nativeHooks = Object.entries(hooksConfig).map(([hookName, hookTrackingConfig]) => {
       return [React, hookName, hookTrackingConfig]
@@ -232,7 +248,8 @@ export default function whyDidYouRender(React, userOptions){
   React.__REVERT_WHY_DID_YOU_RENDER__ = () => {
     Object.assign(React, {
       createElement: origCreateElement,
-      createFactory: origCreateFactory
+      createFactory: origCreateFactory,
+      cloneElement: origCloneElement
     })
 
     componentsMap = null

tests/logOwnerReasons.test.js

@@ -49,6 +49,19 @@ function createOwners(Child){
   return {Owner, ClassOwner, HooksOwner}
 }
 
+function CloneOwner({children}){
+  /* eslint-disable no-unused-vars */
+  const [a, setA] = React.useState(1)
+  const [b, setB] = React.useState(1)
+  /* eslint-enable */
+  React.useEffect(() => {
+    setA(2)
+    setB(2)
+  }, [])
+
+  return React.cloneElement(children)
+}
+
 describe('logOwnerReasons - function child', () => {
   const Child = () => null
   Child.whyDidYouRender = true
@@ -188,6 +201,41 @@ describe('logOwnerReasons - function child', () => {
       }
     })
   })
+
+  test('owner uses cloneElement', () => {
+    rtl.render(<CloneOwner><Child/></CloneOwner>)
+
+    expect(updateInfos).toHaveLength(1)
+    expect(updateInfos[0].reason).toEqual({
+      propsDifferences: [],
+      stateDifferences: false,
+      hookDifferences: false,
+      ownerDifferences: {
+        propsDifferences: false,
+        stateDifferences: false,
+        hookDifferences: [
+          {
+            hookName: 'useState',
+            differences: [{
+              pathString: '',
+              diffType: diffTypes.different,
+              prevValue: 1,
+              nextValue: 2
+            }]
+          },
+          {
+            hookName: 'useState',
+            differences: [{
+              pathString: '',
+              diffType: diffTypes.different,
+              prevValue: 1,
+              nextValue: 2
+            }]
+          }
+        ]
+      }
+    })
+  })
 })