How to use the recompose.shouldUpdate function in recompose

const onlyUpdateForKeys = propKeys => {
  const hoc = shouldUpdate((props, nextProps) => {
    const a = !isEq(pick(nextProps, propKeys), pick(props, propKeys));
    return a;
  });

  // if (process.env.NODE_ENV !== "production") {
  //   return BaseComponent =>
  //     setDisplayName(wrapDisplayName(BaseComponent, "onlyUpdateForKeys"))(
  //       hoc(BaseComponent)
  //     );
  // }
  return hoc;
};

children: PropTypes.func.isRequired,
  // Injected
  userData: PropTypes.shape({
    isLoading: PropTypes.bool.isRequired,
    error: PropTypes.object,
    user: PropTypes.object, // see graphql query shape
  }).isRequired,
};

// React component
const FetchLoggedInUser = compose(
  setDisplayName('FetchUser'),
  graphql(LoggedInUserQuery, graphqlOptions),
  // a render is triggered because the reference of the userData prop changes
  // although the objects content didn't change
  shouldUpdate((props, nextProps) => !deepEqual(props, nextProps))
)(FetchUser);

// HoC
const withUser = mapDataToProps => Component => {
  const WrappedWithUser = props => (
    
      {userData => {
        const mappedProps = mapDataToProps
          ? mapDataToProps(userData)
          : userData;
        return ;
      }}
    
  );
  WrappedWithUser.displayName = `withUser(${getDisplayName(Component)})`;
  return WrappedWithUser;

}
    AntdCardTemp.prototype.render = function () {
        var _a = this.props, children = _a.children, globalOptions = _a.globalOptions, tempKey = _a.tempKey, uiSchemaOptions = _a.uiSchemaOptions, mergeSchema = _a.mergeSchema, ItemButtons = _a.ItemButtons, meta = _a.meta;
        var tempOptions = Object.assign({}, globalOptions[tempKey] || {}, uiSchemaOptions[tempKey] || {});
        var uiSchema = mergeSchema.uiSchema, title = mergeSchema.title;
        var _b = meta || {}, _c = _b.isValid, isValid = _c === void 0 ? true : _c, _d = _b.errorText, errorText = _d === void 0 ? "" : _d, _e = _b.isShow, isShow = _e === void 0 ? true : _e;
        console.log("antdCardTemp render");
        return ( : ""} bodyStyle={{
            "display": isShow === false ? "none" : "block"
        }} {...tempOptions}>
                {children}
                {!isValid ? errorText : ""}
            );
    };
    AntdCardTemp = __decorate([
        compose(shouldUpdate(function () { return false; }), connect(mapMetaStateToProps), shouldUpdate(function (curProps, nextProps) {
            return !isEqual(curProps.meta, nextProps.meta);
        }))
    ], AntdCardTemp);
    return AntdCardTemp;
}(React.PureComponent));
export { AntdCardTemp };

const onlyUpdateForKeys = propKeys => {
  const hoc = shouldUpdate((props, nextProps) => {
    const a = !isEqual(pick(nextProps, propKeys), pick(props, propKeys));
    console.log('a:',a)
    return a;
  });

  if (process.env.NODE_ENV !== "production") {
    return BaseComponent =>
      setDisplayName(wrapDisplayName(BaseComponent, "onlyUpdateForKeys"))(
        hoc(BaseComponent)
      );
  }
  return hoc;
};

};
        }),
    }),
    withProps(props => ({
      visibleToRegister: props.visible,
      disabledToRegister:
        isBoolean(props.enabled) && !props.disabled
          ? !props.enabled
          : props.disabled,
      requiredToRegister: props.required,
    })),
    connect(
      mapStateToProps,
      mapDispatchToProps
    ),
    shouldUpdate((props, nextProps) => {
      const prevResolvedProps = omit(props.mapProps(props), excludedKeys);
      const resolvedProps = omit(props.mapProps(nextProps), excludedKeys);
      const isEqualResolvedProps = some(resolvedProps, (value, key) => {
        return !isEqual(value, prevResolvedProps[key]);
      });
      return isEqualResolvedProps;
    }),
    withProps(props => ({
      ref: props.setReRenderRef,
    })),
    pure
  )(FieldContainer);
};

autofocus,
}) => (
  <div data-property="{property}" data-comp="condition">
    <button disabled="{!canBeClosed}" title="Remove condition" data-comp="delete-condition">
    
    
  </button></div>
);

const hasChanged = shouldUpdate(
  (props, nextProps) =&gt;
    !R.equals(props.matcher, nextProps.matcher) ||
    !R.equals(props.mutate.path, nextProps.mutate.path),
);

export default hasChanged(({ matcher, mutate, autofocus }) =&gt; {
  const [, props] = R.pipe(
    R.toPairs,
    R.partition(([prop]) =&gt; prop[0] === '$'),
  )(matcher);
  const ignoreActivePropsPropsPredicate = R.compose(
    R.not,
    R.contains(R.__, R.map(R.head, props)),
  );

  const allSuggestions = ContextService.getAllProperties().map((prop) =&gt; ({

import React from "react";
import { compose, shouldUpdate } from "recompose";

export default compose<{}, {}>(shouldUpdate(() => false))(function NotFound(
  props,
) {
  return <div>NotFound!</div>;
});

render() {
            const ComponentWithHoc = recompose_1.compose(react_redux_1.connect(meta_1.mapActionsStateToProps), react_redux_1.connect(null, mapDispatchToProps), recompose_1.shouldUpdate((props, nextProps) => {
                return false;
            }))(Component);
            return react_1.default.createElement(ComponentWithHoc, Object.assign({}, this.props));
        }
    }

render() {
                const { mergeSchema, getHocOptions } = this.props;
                const { type } = mergeSchema;
                const arrayHocOptions = getHocOptions(this.props, "array");
                const { ItemChildButtons = null, ItemButtons = null } = arrayHocOptions || {};
                let ItemChildButtonsWithHoc, ItemButtonsWithHoc;
                if (ItemChildButtons) {
                    ItemChildButtonsWithHoc = compose(shouldUpdate(() => false), connect(mapFormItemDataProps), shouldUpdate((prev, next) => {
                        let { formItemData = [] } = prev;
                        let { formItemData: formItemData1 = [] } = next;
                        if (formItemData.size && formItemData1.size) {
                            return formItemData.size !== formItemData1.size;
                        }
                        return formItemData.length !== formItemData1.length;
                    }), handlers, connect(mapMetaStateToProps), shouldUpdate((curProps, nextProps) => {
                        return !isEqual(curProps.meta, nextProps.meta);
                    }))(ItemChildButtons);
                }
                if (ItemButtons) {
                    ItemButtonsWithHoc = compose(handlers, connect(mapMetaStateToProps), shouldUpdate((curProps, nextProps) => {
                        return !isEqual(curProps.meta, nextProps.meta);
                    }))(ItemButtons);
                }
                if (type === "array") {

import React from "react";
import { compose, shouldUpdate } from "recompose";

type Props = {};

export default compose(shouldUpdate(() => false))(function Error(
  props: Props,
) {
  return <div>Error!</div>;
});