Use propsOrStateMapsEqual in connect so that tearoffs don't cause unn…

…ecessary rerenders (#608)
Workiva · Jul 17, 2020 · 0736cf5 · 0736cf5
1 parent 63be6c0
commit 0736cf5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/lib/src/over_react_redux/over_react_flux.dart b/lib/src/over_react_redux/over_react_flux.dart
@@ -355,9 +355,9 @@ mixin InfluxStoreMixin<S> on flux.Store {
 /// If you do not provide [mergeProps], the wrapped component receives {...ownProps, ...stateProps, ...dispatchProps}
 /// by default.
 ///
-/// - [areOwnPropsEqual] does an equality check using JS `===` (equivalent to [identical]) by default.
-/// - [areStatePropsEqual] does a shallow Map equality check using JS `===` (equivalent to [identical]) by default.
-/// - [areMergedPropsEqual] does a shallow Map equality check using JS `===` (equivalent to [identical]) by default.
+/// - [areOwnPropsEqual] does an equality check using [propsOrStateMapsEqual] by default.
+/// - [areStatePropsEqual] does a shallow Map equality check using [propsOrStateMapsEqual] by default.
+/// - [areMergedPropsEqual] does a shallow Map equality check using [propsOrStateMapsEqual] by default.
 ///
 /// - [context] can be utilized to provide a custom context object created with `createContext`.
 /// [context] is how you can utilize multiple stores. While supported, this is not recommended.
@@ -417,9 +417,11 @@ UiFactory<TProps> Function(UiFactory<TProps>)
   Map Function(TActions actions, TProps ownProps) mapActionsToPropsWithOwnProps,
   Map Function(TProps stateProps, TProps dispatchProps, TProps ownProps)
       mergeProps,
-  bool Function(TProps nextProps, TProps prevProps) areOwnPropsEqual,
-  bool Function(TProps nextProps, TProps prevProps) areStatePropsEqual,
-  bool Function(TProps nextProps, TProps prevProps) areMergedPropsEqual,
+  // Use default parameter values instead of ??= in the function body to allow consumers
+  // to specify `null` and fall back to the JS default.
+  bool Function(TProps nextProps, TProps prevProps) areOwnPropsEqual = propsOrStateMapsEqual,
+  bool Function(TProps nextProps, TProps prevProps) areStatePropsEqual = propsOrStateMapsEqual,
+  bool Function(TProps nextProps, TProps prevProps) areMergedPropsEqual = propsOrStateMapsEqual,
   Context context,
   bool pure = true,
   bool forwardRef = false,
@@ -570,7 +572,7 @@ UiFactory<TProps> Function(UiFactory<TProps>)
   // In dev mode, if areStatePropsEqual is not specified, pass in a version
   // that warns for common pitfall cases.
   assert(() {
-    if (areStatePropsEqual == null) {
+    if (areStatePropsEqual == propsOrStateMapsEqual) {
       bool areStatePropsEqualWrapper(TProps nextProps, TProps prevProps) {
         const propHasher = CollectionLengthHasher();
 

diff --git a/lib/src/over_react_redux/over_react_redux.dart b/lib/src/over_react_redux/over_react_redux.dart
@@ -90,9 +90,9 @@ typedef dynamic Dispatcher(dynamic action);
 /// by default.
 ///
 /// - [areStatesEqual] does an equality check using JS `===` (equivalent to [identical]) by default.
-/// - [areOwnPropsEqual] does a shallow Map equality check using JS `===` (equivalent to [identical]) by default.
-/// - [areStatePropsEqual] does a shallow Map equality check using JS `===` (equivalent to [identical]) by default.
-/// - [areMergedPropsEqual] does a shallow Map equality check using JS `===` (equivalent to [identical]) by default.
+/// - [areOwnPropsEqual] does a shallow Map equality check using [propsOrStateMapsEqual] by default.
+/// - [areStatePropsEqual] does a shallow Map equality check using [propsOrStateMapsEqual] by default.
+/// - [areMergedPropsEqual] does a shallow Map equality check using [propsOrStateMapsEqual] by default.
 ///
 /// - [context] can be utilized to provide a custom context object created with `createContext`.
 /// [context] is how you can utilize multiple stores. While supported, this is not recommended. :P
@@ -149,9 +149,11 @@ UiFactory<TProps> Function(UiFactory<TProps>) connect<TReduxState, TProps extend
   Map Function(dynamic Function(dynamic) dispatch, TProps ownProps) mapDispatchToPropsWithOwnProps,
   Map Function(TProps stateProps, TProps dispatchProps, TProps ownProps) mergeProps,
   bool Function(TReduxState nextState, TReduxState prevState) areStatesEqual,
-  bool Function(TProps nextProps, TProps prevProps) areOwnPropsEqual,
-  bool Function(TProps nextProps, TProps prevProps) areStatePropsEqual,
-  bool Function(TProps nextProps, TProps prevProps) areMergedPropsEqual,
+  // Use default parameter values instead of ??= in the function body to allow consumers
+  // to specify `null` and fall back to the JS default.
+  bool Function(TProps nextProps, TProps prevProps) areOwnPropsEqual = propsOrStateMapsEqual,
+  bool Function(TProps nextProps, TProps prevProps) areStatePropsEqual = propsOrStateMapsEqual,
+  bool Function(TProps nextProps, TProps prevProps) areMergedPropsEqual = propsOrStateMapsEqual,
   Context context,
   bool pure = true,
   bool forwardRef = false,

diff --git a/lib/src/util/equality.dart b/lib/src/util/equality.dart
@@ -1,6 +1,8 @@
 /// Returns whether maps [a] and [b] have [identical] sets of values for the same keys.
 ///
 /// Identity is not used for `Function`s found within the maps since tear-offs are not canonicalized.
+///
+/// Behavior is similar to JS shallow equality.
 //
 // Ported from https://github.com/reduxjs/react-redux/blob/573db0bfc8d1d50fdb6e2a98bd8a7d4675fecf11/src/utils/shallowEqual.js
 //