react-fast-compare - npm Package Compare versions

Comparing version 3.0.0-beta.1 to 3.0.0

CHANGELOG.md

 # Changelog
 
-## UNRELEASED
+## 3.0.0 (2020-01-31)
 
 **Features:**
-- Update library to include ES.next support for `Map`, `Set`, `ArrayBuffer`. [#36](https://github.com/FormidableLabs/react-fast-compare/pull/36).
+- [#36](https://github.com/FormidableLabs/react-fast-compare/pull/36). Update to `fast-deep-equal@3.1.1` with modified support for ES.next data types: `Map`, `Set`, `ArrayBuffer`.
+- [#57](https://github.com/FormidableLabs/react-fast-compare/pull/57). Minor refactoring to reduce min+gz size.
 
 **Breaking changes:**
-- Update to `fast-deep-equal@3.1.1` with modified support for ES.next data types.
 
+- instances of different classes are now considered unequal
+- support for ES6 Map and Set instances
+- support for ES6 typed arrays
+
 **Infrastructure:**
+
 - Upgrade lots of `devDependenices`
@@ -41,2 +46,3 @@ - Use `fast-deep-equal` tests directly in our correctness tests.
 **Breaking changes:**
+
 - `null` and `Object` comparison
@@ -43,0 +49,0 @@ - new behavior: functions are no longer treated as equal

index.d.ts

 declare module 'react-fast-compare' {
-  const exportedEqual: (a: any, b: any) => boolean
-  export default exportedEqual
+  const isEqual: (a: any, b: any) => boolean
+  export default isEqual
 }

index.js

@@ -1,2 +0,1 @@
-'use strict';
 /* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
@@ -42,3 +41,3 @@
     //    it = a.entries();
-    //    for (i = it.next(); !i.done; i = it.next())
+    //    while (!(i = it.next()).done)
     //      if (!b.has(i.value[0])) return false;
@@ -52,6 +51,6 @@ //    ```
       it = a.entries();
-      for (i = it.next(); !i.done; i = it.next())
+      while (!(i = it.next()).done)
         if (!b.has(i.value[0])) return false;
       it = a.entries();
-      for (i = it.next(); !i.done; i = it.next())
+      while (!(i = it.next()).done)
         if (!equal(i.value[1], b.get(i.value[0]))) return false;
@@ -64,3 +63,3 @@ return true;
       it = a.entries();
-      for (i = it.next(); !i.done; i = it.next())
+      while (!(i = it.next()).done)
         if (!b.has(i.value[0])) return false;
@@ -97,4 +96,3 @@ return true;
     for (i = length; i-- !== 0;) {
-      var key = keys[i];
-      if (key === '_owner' && a.$$typeof) {
+      if (keys[i] === '_owner' && a.$$typeof) {
         // React-specific: avoid traversing React elements' _owner.
@@ -108,3 +106,3 @@ //  _owner contains circular references
       // all other properties should be traversed as usual
-      if (!equal(a[key], b[key])) return false;
+      if (!equal(a[keys[i]], b[keys[i]])) return false;
     }
@@ -121,7 +119,7 @@ // END: react-fast-compare
 
-module.exports = function exportedEqual(a, b) {
+module.exports = function isEqual(a, b) {
   try {
     return equal(a, b);
   } catch (error) {
-    if (((error.message || '').match(/stack|recursion/i)) || (error.number === -2146828260)) {
+    if (((error.message || '').match(/stack|recursion/i))) {
       // warn on circular references, don't crash
@@ -132,3 +130,3 @@ // browsers give this different errors name and messages:
       // edge: "Error", "Out of stack space"
-      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
+      console.warn('react-fast-compare cannot handle circular refs');
       return false;
@@ -135,0 +133,0 @@ }

package.json

 {
   "name": "react-fast-compare",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0",
   "description": "Fastest deep equal comparison for React. Perfect for shouldComponentUpdate. Also really fast general-purpose deep comparison",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -10,4 +10,6 @@ # react-fast-compare
 
-The fastest deep equal comparison for React. Really fast general-purpose deep comparison.
-Great for `shouldComponentUpdate`. This is a fork of the brilliant
+The fastest deep equal comparison for React. Very quick general-purpose deep
+comparison, too. Great for `React.memo` and `shouldComponentUpdate`.
+
+This is a fork of the brilliant
 [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) with some
@@ -35,3 +37,3 @@ extra handling for React.
 - should as fast as [fast-deep-equal](https://github.com/epoberezkin/fast-deep-equal) via a single unified library, and with added guardrails for circular references.
-- small: under 700 bytes minified+gzipped
+- small: under 650 bytes minified+gzipped
 
@@ -46,4 +48,9 @@ ## Usage
 
-// react usage
-class ExpensiveRenderer extends React.Component {
+// React.memo
+// only re-render ExpensiveComponent when the props have deeply changed
+const DeepMemoComponent = React.memo(ExpensiveComponent, isEqual);
+
+// React.Component shouldComponentUpdate
+// only re-render AnotherExpensiveComponent when the props have deeply changed
+class AnotherExpensiveComponent extends React.Component {
   shouldComponentUpdate(nextProps) {
@@ -58,3 +65,3 @@ return !isEqual(this.props, nextProps);
 
-## Do I Need `shouldComponentUpdate`?
+## Do I Need `React.memo` (or `shouldComponentUpdate`)?
 
@@ -65,6 +72,7 @@ > What's faster than a really fast deep comparison? No deep comparison at all.
 
-Deep checks in React's `shouldComponentUpdate` should not be used blindly.
-First, see if a
+Deep checks in `React.memo` or a `shouldComponentUpdate` should not be used blindly.
+First, see if the default
+[React.memo](https://reactjs.org/docs/react-api.html#reactmemo) or
 [PureComponent](https://reactjs.org/docs/react-api.html#reactpurecomponent)
-would work for you. If it won't (if you need deep checks), it's wise to make
+will work for you. If it won't (if you need deep checks), it's wise to make
 sure you've correctly indentified the bottleneck in your application by
@@ -74,10 +82,8 @@ [profiling the performance](https://reactjs.org/docs/optimizing-performance.html#profiling-components-with-the-chrome-performance-tab).
 identified the minimum number of places to apply them, then this library may
-be for you! For more information about making your app faster, check out the
-[Optimizing Performance](https://reactjs.org/docs/optimizing-performance.html)
-section of the React docs.
+be for you!
 
 ## Benchmarking this Library
 
-All tests carried out locally on a MacBook. The absolute values are much less
-important than the relative differences between packages.
+The absolute values are much less important than the relative differences
+between packages.
 
@@ -90,2 +96,4 @@ Benchmarking source can be found
 
+The results below are from a local test on a laptop.
+
 ### Generic Data
@@ -125,10 +133,10 @@
 
-## fast-deep-equal Versioning
+## Differences between this library and `fast-deep-equal`
 
-react-fast-compare@3 tracks fast-deep-equal@3.1.1
+`react-fast-compare` is based on `fast-deep-equal`, with some additions:
 
-Now that `fast-deep-equal` has separate es5, es6, and es6 + React entry points, the main differences with this library are:
+- `react-fast-compare` has `try`/`catch` guardrails for stack overflows from undetected (non-React) circular references.
+- `react-fast-compare` has a _single_ unified entry point for all uses. No matter what your target application is, `import equal from 'react-fast-compare'` just works. `fast-deep-equal` has multiple entry points for different use cases.
 
-- `try/catch` guardrails for stack overflows from undetected circular references.
-- A single unified entry point for **all** uses. No matter what your target application is, `import equal from 'react-fast-compare'` just works.
+This version of `react-fast-compare` tracks `fast-deep-equal@3.1.1`.
 
@@ -135,0 +143,0 @@ ## License

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16073

increased by2.41%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

160

increased by5.26%

Worsened metrics

Lines of code

117

decreased by-1.68%

No dependency changes