wix-incubator / repluggable

Pluggable micro frontends in React+Redux apps
MIT License
172 stars 13 forks source link

Extend connect shouldComponentUpdate option with additional argument #228

Closed katmai7 closed 1 year ago

katmai7 commented 1 year ago

Attempt to make shouldComponentUpdate connect option compatible with redux connect(areOwnPropsEqual, etc.). By exposing ownProps/stateProps to shouldComponentUpdate connect options.

Why? The result of shouldComponentUpdate mainly controlled by API from shell and it's not possible to do via props, so I can't control optimisation per component instance.

Example: In this example, AuthorizationTooltip children is not rendered if isPerformingAction() returns true. In some cases I want children to be rendered, but I can't control it per component instance, only globally.

export function createAuthorizationTooltip(boundShell: Shell) {
  return connectWithShell<
    {},
    AuthorizationTooltipProps,
    AuthorizationTooltipStateProps
  >(mapStateToProps, undefined, boundShell, {
    shouldComponentUpdate: (shell) => {
      return !shell.getAPI(MouseAPI).isPerformingAction();
    },
  })(AuthorizationTooltipPure);
}

After fix: Now, I can control optimisation with ownProps.

export function createAuthorizationTooltip(boundShell: Shell) {
  return connectWithShell<
    {},
    AuthorizationTooltipProps,
    AuthorizationTooltipStateProps
  >(mapStateToProps, undefined, boundShell, {
    shouldComponentUpdate: (shell, ownProps) => {
      if (ownProps?.skipOptimisation) {
        return true;
      }

      return !shell.getAPI(MouseAPI).isPerformingAction();
    },
  })(AuthorizationTooltipPure);
}