#18 - add react-redux test + demo,

notify about a re-rendered element in props and ignore if it's props are different,
improve memoized tracking performance,
fix hooks notifications of memoized components were tracked as of inner WDYR component,
fix memoized components notifications

demo/nollup.config.js

@@ -19,6 +19,8 @@ module.exports = {
       exclude: 'node_modules/**'
     }),
     node_resolve(),
-    commonjs()
+    commonjs({
+      exclude: ['node_modules/react-redux/**']
+    })
   ]
 }

demo/src/index.js

@@ -19,6 +19,7 @@ import useReducer from './hooks/useReducer'
 import useContext from './hooks/useContext'
 import useMemo from './hooks/useMemo'
 import strict from './strict'
+import reactRedux from './reactRedux'
 
 import whyDidYouRender from './whyDidYouRender'
 
@@ -38,7 +39,8 @@ const demosList = {
   useReducer,
   useContext,
   useMemo,
-  strict
+  strict,
+  reactRedux
 }
 
 const defaultDemoName = 'bigList'

demo/src/reactRedux/index.js

@@ -0,0 +1,62 @@
+import React from 'react'
+import ReactDom from 'react-dom'
+import {createStore} from 'redux'
+import connect from 'react-redux/lib/connect/connect'
+import Provider from 'react-redux/lib/components/Provider'
+import _ from  'lodash'
+
+connect = connect.default
+Provider = Provider.default
+
+export default {
+  description: 'React Redux',
+  fn({domElement, whyDidYouRender}){
+    whyDidYouRender(React)
+
+    const initialState = {a: {b: 'c'}}
+
+    const rootReducer = (state, action) => {
+      if(action.type === 'randomObj'){
+        return {a: {b: `${Math.random()}`}}
+      }
+
+      if(action.type === 'deepEqlObj'){
+        return _.cloneDeep(state)
+      }
+
+      return state
+    }
+
+    const store = createStore(rootReducer, initialState)
+
+    const SimpleComponent = ({a, randomObj, deepEqlObj, sameObj}) => {
+      return (
+        <div>
+          {`{a.b} is: ${a.b}`}
+          <button onClick={sameObj}>Same State</button>
+          <button onClick={deepEqlObj}>Deep Equal State</button>
+          <button onClick={randomObj}>Random Object</button>
+        </div>
+      )
+    }
+
+    const ConnectedSimpleComponent = connect(
+      state => ({a: state.a}),
+      ({
+        randomObj: () => ({type: 'randomObj'}),
+        deepEqlObj: () => ({type: 'deepEqlObj'}),
+        sameObj: () => ({type: 'sameObj'})
+      })
+    )(SimpleComponent)
+
+    ConnectedSimpleComponent.whyDidYouRender = true
+
+    const Main = () => (
+      <Provider store={store}>
+        <ConnectedSimpleComponent/>
+      </Provider>
+    )
+
+    ReactDom.render(<Main/>, domElement)
+  }
+}

package.json

@@ -16,7 +16,7 @@
     "start": "cross-env PORT=3003 NODE_ENV=development node demo/serve",
     "build": "cross-env NODE_ENV=production rollup --config",
     "test": "cross-env NODE_ENV=development TEST=true jest",
-    "test:watch": "yarn test --watchAll",
+    "test:watch": "yarn test --watch",
     "lint": "esw . --ext=js --cache --cache-location .temp/eslint-cache",
     "lint:fix": "yarn lint --fix",
     "lint:watch": "yarn lint --watch",
@@ -64,12 +64,16 @@
     "husky": "^1.3.1",
     "jest": "^24.7.1",
     "jest-cli": "^24.7.1",
+    "jest-dom": "^3.1.3",
     "magic-string": "^0.25.2",
     "nollup": "^0.5.3",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-hot-loader": "^4.8.3",
+    "react-redux": "^7.0.2",
     "react-test-renderer": "^16.8.6",
+    "react-testing-library": "^6.1.2",
+    "redux": "^4.0.1",
     "rimraf": "^2.6.3",
     "rollup": "^1.10.0",
     "rollup-plugin-babel": "^4.3.2",

src/calculateDeepEqualDiffs.js

@@ -63,9 +63,18 @@ function accumulateDeepEqualDiffs(a, b, diffsAccumulator, pathString = ''){
   }
 
   if(isReactElement(a) && isReactElement(b)){
-    return a.type === b.type ?
-      trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement) :
-      trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    if(a.type !== b.type){
+      return trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    }
+
+    else{
+      const reactElementPropsAreDeepEqual =
+        accumulateDeepEqualDiffs(a.props, b.props, diffsAccumulator, `${pathString}.props`)
+
+      return reactElementPropsAreDeepEqual ?
+        trackDiff(a, b, diffsAccumulator, pathString, diffTypes.reactElement) :
+        trackDiff(a, b, diffsAccumulator, pathString, diffTypes.different)
+    }
   }
 
   if(isFunction(a) && isFunction(b)){

src/calculateDeepEqualDiffs.test.js

@@ -228,6 +228,12 @@ describe('calculateDeepEqualDiffs', () => {
     const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
 
     expect(diffs).toEqual([
+      {
+        pathString: '.a.props',
+        prevValue: {children: 'hi!'},
+        nextValue: {children: 'hi!'},
+        diffType: diffTypes.deepEquals
+      },
       {
         pathString: '.a',
         prevValue: prevValue.a,
@@ -259,6 +265,49 @@ describe('calculateDeepEqualDiffs', () => {
     const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
 
     expect(diffs).toEqual([
+      {
+        pathString: '.a.props',
+        prevValue: {},
+        nextValue: {},
+        diffType: diffTypes.deepEquals
+      },
+      {
+        pathString: '.a',
+        prevValue: prevValue.a,
+        nextValue: nextValue.a,
+        diffType: diffTypes.reactElement
+      },
+      {
+        pathString: '',
+        prevValue,
+        nextValue,
+        diffType: diffTypes.deepEquals
+      }
+    ])
+  })
+
+  test('react class pure component instance', () => {
+    class MyComponent extends React.PureComponent{
+      render(){
+        return <div>hi!</div>
+      }
+    }
+
+    const tooltip = <MyComponent/>
+    const tooltip2 = <MyComponent/>
+
+    const prevValue = {a: tooltip}
+    const nextValue = {a: tooltip2}
+
+    const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
+
+    expect(diffs).toEqual([
+      {
+        pathString: '.a.props',
+        prevValue: {},
+        nextValue: {},
+        diffType: diffTypes.deepEquals
+      },
       {
         pathString: '.a',
         prevValue: prevValue.a,
@@ -288,6 +337,47 @@ describe('calculateDeepEqualDiffs', () => {
     const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
 
     expect(diffs).toEqual([
+      {
+        pathString: '.a.props',
+        prevValue: {},
+        nextValue: {},
+        diffType: diffTypes.deepEquals
+      },
+      {
+        pathString: '.a',
+        prevValue: prevValue.a,
+        nextValue: nextValue.a,
+        diffType: diffTypes.reactElement
+      },
+      {
+        pathString: '',
+        prevValue,
+        nextValue,
+        diffType: diffTypes.deepEquals
+      }
+    ])
+  })
+
+  test('react memoized functional component instance', () => {
+    const MyFunctionalComponent = React.memo(() => (
+      <div>hi!</div>
+    ))
+
+    const tooltip = <MyFunctionalComponent a={1}/>
+    const tooltip2 = <MyFunctionalComponent a={1}/>
+
+    const prevValue = {a: tooltip}
+    const nextValue = {a: tooltip2}
+
+    const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
+
+    expect(diffs).toEqual([
+      {
+        pathString: '.a.props',
+        prevValue: {a: 1},
+        nextValue: {a: 1},
+        diffType: diffTypes.deepEquals
+      },
       {
         pathString: '.a',
         prevValue: prevValue.a,
@@ -363,6 +453,12 @@ describe('calculateDeepEqualDiffs', () => {
     const diffs = calculateDeepEqualDiffs(prevValue, nextValue)
 
     expect(diffs).toEqual([
+      {
+        pathString: '.b[0].tooltip.props',
+        prevValue: {children: 'hi'},
+        nextValue: {children: 'hi'},
+        diffType: diffTypes.deepEquals
+      },
       {
         pathString: '.b[0].tooltip',
         prevValue: prevValue.b[0].tooltip,

src/defaultNotifier.js

@@ -46,7 +46,7 @@ function logDifference({Component, displayName, hookName, prefixMessage, diffObj
     options.consoleLog({[displayName]: Component}, `${prefixMessage} of ${diffObjType} changes:`)
     differences.forEach(({pathString, diffType, prevValue, nextValue}) => {
       options.consoleGroup(
-        `%c${diffObjType === 'hook' ? `hook ${hookName} ` : `${diffObjType}.`}%c${pathString}%c`,
+        `%c${diffObjType === 'hook' ? `[hook ${hookName} result]` : `${diffObjType}.`}%c${pathString}%c`,
         `color:${options.diffNameColor};`, `color:${options.diffPathColor};`, 'color:default;'
       )
       options.consoleLog(