Search code examples
javascriptreactjsredux

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

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}

Solution

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