temp attempt

README.md

@@ -20,7 +20,9 @@ For example, if you pass `style={{width: '100%'}}` to a big pure component it wo
 It can also help you to simply track when and why a certain component re-renders.
 
 ## 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 use version @^8.
+* For React 17 and 16, please use version @^7.
 
 ```
 npm install @welldone-software/why-did-you-render --save-dev
@@ -29,8 +31,9 @@ or
 ```
 yarn add --dev @welldone-software/why-did-you-render
 ```
+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
 ['@babel/preset-react', {
   runtime: 'automatic',
@@ -39,18 +42,8 @@ If you use the `automatic` JSX transformation, set the library to be the import
 }]
 ```
 
-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.
+For people using React-Native, it seems like `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. If you know how to support this, please open an issue or contribute to the library.
 
-```js
-module.exports = {
-  presets: ['module:metro-react-native-babel-preset'],
-
-  env: {
-    development: {
-      plugins: [['@babel/plugin-transform-react-jsx', { runtime: 'classic' }]],
-    },
-  },
-}
 ```
 
 > Notice: Create React App (CRA) ^4 **does use the `automatic` JSX transformation.**

src/getUpdateInfo.js

@@ -1,3 +1,5 @@
+import { isEmpty } from 'lodash';
+
 import findObjectsDifferences from './findObjectsDifferences';
 import wdyrStore from './wdyrStore';
 
@@ -27,9 +29,12 @@ function getUpdateReason(prevProps, prevState, prevHook, nextProps, nextState, n
   const prevOwnerData = wdyrStore.ownerDataMap.get(prevProps);
   const nextOwnerData = wdyrStore.ownerDataMap.get(nextProps);
 
+  const stateDifferences = findObjectsDifferences(prevState, nextState);
+  const propsDifferences = findObjectsDifferences(prevProps, nextProps);
+
   return {
-    propsDifferences: findObjectsDifferences(prevProps, nextProps),
-    stateDifferences: findObjectsDifferences(prevState, nextState),
+    propsDifferences: stateDifferences && isEmpty(propsDifferences) ? false : propsDifferences,
+    stateDifferences,
     hookDifferences: findObjectsDifferences(prevHook, nextHook, { shallow: false }),
     ownerDifferences: getOwnerDifferences({ prevOwnerData, nextOwnerData }),
   };

tests/getUpdateInfo.test.js

@@ -68,7 +68,7 @@ describe('getUpdateInfo', () => {
     });
   });
 
-  test('Same state', () => {
+  test('Same eq by value state', () => {
     const input = {
       Component: TestComponent,
       displayName: getDisplayName(TestComponent),
@@ -84,7 +84,7 @@ describe('getUpdateInfo', () => {
       ...input,
       displayName: 'TestComponent',
       reason: {
-        propsDifferences: [],
+        propsDifferences: false,
         stateDifferences: [],
         hookDifferences: false,
         ownerDifferences: false,
@@ -108,7 +108,7 @@ describe('getUpdateInfo', () => {
       ...input,
       displayName: 'TestComponent',
       reason: {
-        propsDifferences: [],
+        propsDifferences: false,
         stateDifferences: [],
         hookDifferences: false,
         ownerDifferences: false,
@@ -163,7 +163,7 @@ describe('getUpdateInfo', () => {
       ...input,
       displayName: 'TestComponent',
       reason: {
-        propsDifferences: [],
+        propsDifferences: false,
         stateDifferences: [
           {
             pathString: 'a',
@@ -265,7 +265,7 @@ describe('getUpdateInfo', () => {
       ...input,
       displayName: 'TestComponent',
       reason: {
-        propsDifferences: [],
+        propsDifferences: false,
         stateDifferences: [
           {
             pathString: 'a',
@@ -367,7 +367,7 @@ describe('getUpdateInfo', () => {
       ...input,
       displayName: 'TestComponent',
       reason: {
-        propsDifferences: [],
+        propsDifferences: false,
         stateDifferences: [
           {
             pathString: 'a',

tests/index.test.js

@@ -26,7 +26,7 @@ test('dont swallow errors', () => {
     );
   };
 
-  expect(mountBrokenComponent).toThrow(/(Cannot read property 'propTypes' of null|Cannot read properties of null \(reading 'propTypes'\))/);
+  expect(mountBrokenComponent).toThrow(/expected a string.*but got.*null/);
 
   global.flushConsoleOutput()
     .map(output => ({

tests/librariesTests/styled-components.test.js

@@ -72,9 +72,9 @@ test('styled-components wrap of a memoized component', () => {
   });
 });
 
-test('styled-components with forward ref', () => {
-  const InnerComponent = React.forwardRef((props, ref) =>
-    <div ref={ref}>foobar</div>
+test.only('styled-components with forward ref', () => {
+  const InnerComponent = (props) => (
+    <div ref={props.ref}>foobar</div>
   );
 
   const StyledInnerComponent = styled(InnerComponent)``;
@@ -87,19 +87,19 @@ test('styled-components with forward ref', () => {
   };
 
   const { rerender } = rtl.render(
-    <Wrapper a={[]}/>
+    <Wrapper a={['b']}/>
   );
   rerender(
-    <Wrapper a={[]}/>
+    <Wrapper a={['b']}/>
   );
 
   expect(updateInfos).toHaveLength(1);
   expect(updateInfos[0].reason).toEqual({
     propsDifferences: [{
       pathString: 'a',
       diffType: diffTypes.deepEquals,
-      prevValue: [],
-      nextValue: [],
+      prevValue: ['b'],
+      nextValue: ['b'],
     }],
     stateDifferences: false,
     hookDifferences: false,
@@ -108,8 +108,8 @@ test('styled-components with forward ref', () => {
       propsDifferences: [{
         pathString: 'a',
         diffType: diffTypes.deepEquals,
-        prevValue: [],
-        nextValue: [],
+        prevValue: ['b'],
+        nextValue: ['b'],
       }],
       stateDifferences: false,
     },