Reselect always re rendering

Question

I'm trying to add reselect to my react code but it seems to be always rerendering.

Everytime I change my state the console prints "testing" even though the input-selector is not changing. I created a simple test to show you guys whats happening.

import { connect } from 'react-redux'
import { createSelector } from 'reselect'

window.testObject = {'x': '5'}
const mapStateToProps = (state, props) => {

  const test = state => {return window.testObject}
  const getTest = createSelector(test, (t)=> console.log('testing'))

  return {
      test: getTest(state),
  }
}


export default const TestContainer = connect(
  mapStateToProps,
)(TestBase)

What am I doing wrong?? I keep re reading the documentation and from what I can tell the console.log should not be running after the first time since the input-selector is not changing. Am I understanding that correctly?

I don't think `reselect` performs a deep comparison. Every time `getTest` is called, a new object is returned. — Felix Kling, May 20 '16 at 21:52
You are correct, should of realized that haha. I'm going to try making the object global and see if it works :) — Charles Haro, May 20 '16 at 22:52
I updated the example to use a global object to no effect. It still prints "testing" in the same way — Charles Haro, May 20 '16 at 22:56

DaxChen · Accepted Answer · 2016-05-24T05:25:28.857

8

You're calling the createSelector every time it re-renders

move the createSelector outside of the mapStateToProps

const getTest = createSelector(...)

const mapStateToProps = (state, props) => ({
  test: getTest(state),
})

export default const TestContainer = connect(
  mapStateToProps,
)(TestBase)

edited May 24 '16 at 05:25

answered May 24 '16 at 01:08

DaxChen

1,869
1
16
21

You just blew my mind. Thank you I'm going to try this right now!! – Charles Haro May 24 '16 at 01:18
what is the usage of reselect? What is the intent of the middleware? – james emanon May 24 '16 at 05:33
Its so that if you have an calculation intensive function you recalculate only when the inputs to the selector change, instead of on every render. It doesn't have anything to do with middleware, you can use it separate from react/redux. – Charles Haro May 24 '16 at 09:03
@DaxChen it's also good to consider moving your selectors into a centralized module of sorts. Promotes reuse. :) – ctrlplusb May 26 '16 at 08:41
You saved my day! – reZach Dec 19 '19 at 05:18

Reselect always re rendering

1 Answers1