2

I'm using reselect to query my state and props. When I add a log statement to my component, I can see that it is being rendered over and over again.

If I return a find (non-array, one object) from the getFiltered method I see that it doesn't render over and over again. If I return a filter from the getFiltered method I see that it does render over and over again.

I assume its to do with some array === array going on somewhere. How do I fix it? I've tried using lodash's isEqual as per the documentation. I'm feeding the result of getFiltered into my state. It looks like the state thinks its changing for some reason

export const getProjects = state => state.availability.projects.list;

export const getProjectId = (state, props) => props.project.id;

// WORKS! - Don't see re-render log statements
export const getFiltered = createSelector([getProjects, getProjectId],
(projects, projectId) => projects.find(project => project));

// Doesn't work - I do see re-render statements in the console
export const getFiltered = createSelector([getProjects, getProjectId],
(projects, projectId) => projects.filter(project => project));
Sebastian Patten
  • 7,157
  • 4
  • 45
  • 51
  • Reselect should memoize the result of the function and not run it again if the input hasn't changed. Check that the values returned by `getProjects` and `getProjectId` are not changing. – Emanuele Feliziani Aug 15 '19 at 17:28
  • It looks like the output of getFiltered is causing the re-render rather than the input. I have the same code for find and filter. And filter causes a re-render – Sebastian Patten Aug 15 '19 at 17:30
  • Yes, but with Reselect, if the input does not change, the function isn't even run, so the output cannot possibly change. That's why I suggested to look at that. With `find` you are returning the exact same object, that's why you don't see the re-render. `filter`, instead, returns a new array every time it runs, but Reselect should ensure that the function is not run at all if the input values are the same. – Emanuele Feliziani Aug 15 '19 at 17:34
  • Sounds like - as you said, it should only run the function if the inputs are changing. When i console log them they look the same. Maybe because its an array as an input, it looks different each time? – Sebastian Patten Aug 15 '19 at 17:47
  • The only other peculiarity that im doing is running this createSelector for multiple of the same components. So i have a mapStateToProps for each instance – Sebastian Patten Aug 15 '19 at 17:49
  • Are the input selectors memoized with Reselect as well? Check if they are using one of the array methods that return a new array, such as `map`, `reduce`, `slice`, etc. Can you paste more of the code, including the react component that uses this? – Emanuele Feliziani Aug 15 '19 at 17:51
  • @SebastianPattenn How did you solve it? I'm facing the exact problem – DroidLearner Jan 15 '21 at 07:49

0 Answers0