Recompose: How do I prevent re-render？

[yellowfrogCN]

This library is very cool, but there are some problems that plague me；
Why did I add pure or onlyUpdateForKeys, and every time I click I'll show 're-render'

const enhance = compose(
    pure,
    // onlyUpdateForKeys(['count']),
    withState('count', 'dispatchLocal', 100),
    withHandlers({
        testFn: ({dispatchLocal}) => () => dispatchLocal(() => 100)
    })
)
const ReCompose = ({
    testFn,
    count
}) => {
    console.log('re-render');
    return (
        <div>
            Count: {count}
            <div>
                <button onClick={testFn}>test</button>
            </div>
        </div>
    )
}
export default enhance(ReCompose);

[faergeek]

If you mean why it's rerendering even though the value stays the same, it's because you apply pure before withState and withHandlers. It means that it's "pure" for what's passed from the outside.

But in your case changing value is passed "from the inside". So, to avoid rerenders in your case, you need to place pure after withHandlers. But it doesn't mean you should remove pure at the beginning, it depends on usage.

[yellowfrogCN]

Thank you very much. It seems that I need to practice more to improve my understanding of this library:imp:

[faergeek]

Actually I noticed pattern like this when using recompose:

const enhance = compose(
  pure, // not always needed
  // ...
  // here goes some state (withState),
  // props transformations (withPropsOnChange or something),
  // handlers (withHandlers) and probably some intermediary props used just to "talk"
  // between hocs (e.g. additonal withHandlers containing just reusable functions,
  // not directly used in view)
  // ...

  // "pick" comes from ramda in my case, but lodash (or better, lodash-fp) has similar fn.
  // In fact we pass down only props needed to render our view, nothing more.
  mapProps(pick([ // NOTE: this list of props is the same as...
    'value1',
    'value2',
  ])),
  pure,
)

const View = ({ // ...this list of props (I don't know how to do that better :-))
  value1,
  value2,
}) => (
  // some jsx using destructured values
)

Not sure if it's something recommended by recompose team, but it works really well for me. It makes splitting out View into separate file very easy. In fact, it makes "controller" (really just enhance fn) splittable into parts with separate state, if needed. I really like recompose for how it's easy to refactor afterwards 👍 .

I hope it will help you.