3

I want to compose (recompose) a React component with recompose.pure and an other hoc.
In what order should I do this ?

  • compose(pure, anOtherHoc)(MyComp);
  • compose(anOtherHoc, pure)(MyComp);

What is the criterion for deciding this ?

import { compose, pure } from "recompose";
const MyComp = ({}) => (<div>test</div>);
export default compose(pure, anOtherHoc)(MyComp);
asicfr
  • 1,061
  • 1
  • 13
  • 30

1 Answers1

3

Each argument passed to the compose function creates another wrapper around the component you are enhancing.

So it really depends on anOtherHoc – is that a pure component, i.e. does it only have to be updated when the props that are passed to it have changed?

If yes, put pure first, and it will wrap anOtherHoc, which in turn wraps MyComp.

If not, put it after anotherHoc, then MyComp will wrap pure, which will wrap MyComp.

Patrick Hund
  • 19,163
  • 11
  • 66
  • 95
  • In my case, anOtherHoc is "injectIntl" from react-intl. The state of that injectIntl may change for external reason (language changes). So injectIntl must be before pure ?? is that right ? – asicfr Oct 27 '17 at 14:59
  • I'm not familiar with this library, I would just go ahead and test if switching languages continues to work when you wrap it in "pure" – Patrick Hund Oct 27 '17 at 15:10