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

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(...)())

Your solution should work (I didn't try copy-pasted like that), but you also have to update react-redux to the latest version.

By the way, I think the proper implementation of React.memo within many HOC would be to be the closest to the component itself : the goal of React.memo is to check if all the new props received by the component are the same as the last props. If any HOC transforms or adds any props to the component - which connect does by mapping the Redux store to the props, React.memo should be aware of it in order to decide wether or not to update the component.

So I would go for something like that :

//import what you need to importconst Component = props => <div>{/* do what you need to do here */}</div>export default compose(  connect(mapStateToProps, dispatchToProps),  /* any other HOC*/  React.memo)(Component);

Same issue here. Fixed by upgrading react-redux to version 5.1.0.