Error: "state.x is undefined" while calling nested memoized selectors

[markerikson]

I'm working on trying out proxy-memoize for the first time, and I'm using the Redux Fundamentals todo app example as the testbed.

I tried updating a couple of the selectors to use memoize(), including calling selectFilteredTodos from selectFilteredTodoIds:

reduxjs/redux-fundamentals-example-app@f270ea1

export const selectFilteredTodos = memoize((state) => {
  console.log('Original state: ', getUntrackedObject(state))
  const { status, colors } = state.filters

  const todos = selectTodos(state)

  const showAllCompletions = status === StatusFilters.All
  if (showAllCompletions && colors.length === 0) {
    return todos
  }

  const completedStatus = status === StatusFilters.Completed
  // Return either active or completed todos based on filter
  return todos.filter((todo) => {
    const statusMatches =
      showAllCompletions || todo.completed === completedStatus
    const colorMatches = colors.length === 0 || colors.includes(todo.color)
    return statusMatches && colorMatches
  })
})

/*
export const selectFilteredTodoIds = createSelector(
  // Pass our other memoized selector as an input
  selectFilteredTodos,
  // And derive data in the output selector
  (filteredTodos) => filteredTodos.map((todo) => todo.id)
)
*/
export const selectFilteredTodoIds = memoize((state) => {
  return selectFilteredTodos(state).map((todo) => todo.id)
})

However, this is throwing an exception when it tries to destructure from state.filters:

TypeError: Cannot destructure property 'status' of 'state.filters' as it is undefined.
    at http://localhost:3000/static/js/main.chunk.js:1194:5
    at http://localhost:3000/static/js/1.chunk.js:66229:17
    at http://localhost:3000/static/js/main.chunk.js:1222:10
    at Object.current (http://localhost:3000/static/js/1.chunk.js:66229:17)
    at Subscription.checkForUpdates [as onStateChange] (http://localhost:3000/static/js/1.chunk.js:95055:47)

I think it's due to the use of nested selectors here. If I copy-paste the filtering logic over into selectFilteredTodoIds and use that instead of selectFilteredTodos(state), it runs fine.

So, my guess is that it has something to do with passing an already-wrapped state value from one memoized selector into another selector.

[dai-shi]

Yeah, nested memoized selectors are tricky. Basically, they are tracking boundaries. So, unless we want to really memoize the result for heavy computation, all inner selectors may not need to be memoized.

Anyway, the undefined error is weird. Probably, there's a bug to deal with nested memoized functions.

[markerikson]

Hmm. Nested selectors seem like a very common use case. Seems pretty important to have working correctly.

We ran into a similar-ish situation in RTK regarding nested use of Immer, and eventually ended up adding an isDraft() check inside of createReducer to let nested updates work correctly.

[dai-shi]

Nested selectors seem like a very common use case.

I mean nested selectors are fine. We just need to memoize at the root.
Well, it's a pitfall anyway, if one doesn't understand the behavior.

I'm trying to fix the bug now.