How to use React.memo with react-redux connect?

Question

Does anyone know how to wrap a React component with React.memo when one is using the connect function from react-redux?

For example, how would you modify the following?

let Button = (props: Props) => (
  <button onClick={props.click}>{props.value}</button>
);

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

I've tried:

let Button = React.memo((props: Props) => (
  <button onClick={props.click}>{props.value}</button>
));

Button = connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

However, the function returned by connect expects a component to be passed so it errors with:

Uncaught Error: You must pass a component to the function returned by connect. Instead received {"compare":null}

Answer 1

React.memo is nothing but a HOC, so you can just use:

Without memo:

connect(
  mapStateToProps,
  mapDispatchToProps
)(Button);

With memo:

connect(
  mapStateToProps,
  mapDispatchToProps
)(React.memo(Button));

And even wrap to connect: (This should be the solution with connect)

React.memo(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(Button)
);

Like we do with withRouter: withRouter(connect(...)())