React useMemo with observable state

[kykungz]

Hi, I'm wondering what's the correct way to use React's useMemo with MobX observable and React's props/state as its dependencies.

Considering a simple example such as having a threshold value in a MobX Store, which will be used as a setting to filter out numbers that is less than the threshold number.

class Store {
  threshold = 5

  constructor() {
    makeAutoObservable(this)
  }
}

I saw in the docs about Tip: useEffect and observables, which has an example of using useEffect with observables like this:

// Run the effect when `store.threshold` changed.
useEffect(
  () =>
    autorun(() => {
      const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
      const filtered = list.filter(value => value > store.threshold)
      alert(filtered)
    }),
  []
)

Or you can also combine values from React props/state with MobX observable in useEffect:

// Run the effect when `store.threshold` or `props.list` changed.
useEffect(
  () =>
    autorun(() => {
      const filtered = props.list.filter(value => value > store.threshold)
      alert(filtered)
    }),
  [props.list]
)

---

So I'm wondering what's the correct way to do the same thing, but as a memoized value instead of side effects.

// Memoizing value when `store.threshold` changed
const filtered = useMemo(() => {
  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  return list.filter(value => value > store.threshold)
}, [store.threshold])

The above code shows eslint warning as follows:

React Hook useMemo has an unnecessary dependency: 'store.threshold'. Either exclude it or remove the dependency array. Outer scope values like 'store.threshold' aren't valid dependencies because mutating them doesn't re-render the component.

eslint(react-hooks/exhaustive-deps)

Then I found a way to correctly do it without eslint warning using computed function that behaves like a useMemo for observables:

// Caching (memoizing) value when `store.threshold` changed
const filtered = computed(() => {
  const list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  return list.filter(value => value > store.threshold)
}).get()

But when it comes to listening to both props.list and store.threshold, I have no idea how to do it without errors or eslint warning.

// ❌ eslint warning react-hooks/exhaustive-deps

// Memoizing value when `props.list` or `store.threshold` changed
const filtered = useMemo(() => {
  return props.list.filter(value => value > store.threshold)
}, [props.list, store.threshold])

// ❌ changes in `store.threshold` will not be reflected

// Memoizing value when `props.list` or `store.threshold` changed
const filtered = useMemo(() => {
  return computed(() => props.list.filter(value => value > store.threshold)).get()
}, [props.list])

// ❌ changes in `props.list` will not be reflected

// Memoizing value when `props.list` or `store.threshold` changed
const filtered = computed(() => {
  return props.list.filter(value => value > store.threshold)
}).get()

Is there a correct way to do this without breaking the eslint rules? Or my ultimate solution is to disable the eslint rule with:

// Memoizing value when `props.list` or `store.threshold` changed
const filtered = useMemo(() => {
  return props.list.filter(value => value > store.threshold)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.list, store.threshold])

[kykungz]

Just found out a solution when tweaking around with the code.

Instead of returning the final value through .get() inside useMemo

// ❌ changes in `store.threshold` will not be reflected
const filtered = useMemo(() => {
  return computed(() => props.list.filter(value => value > store.threshold)).get()
}, [props.list])

Just return the everything as a computed value from useMemo and use .get() afterwards:

// ✅ changes in `props.list` AND `store.threshold` will now be reflected
const filtered = useMemo(() => {
  return computed(() => props.list.filter(value => value > store.threshold))
}, [props.list]).get()

store.threshold will be tracked through computed function, props.list will be tracked through useMemo. Both changes will be returned as a computed value from computed, to be called .get() at the end.

[urugator]

Memoization + mutable state is indeed tricky:
#3252
#3224

[kykungz]

Code in the both discussions are using MobX observable as dependencies of React hooks (useMemo, useEffect),
which indeed would cause unexpected behavior due to mutable nature of MobX.

But on the above answer, immutable React props/states are handled through React hooks, while MobX mutable state are handled through MobX's computed, which would not cause a problem... isn't it?

[kubk]

I'd suggest not to mix props & Mobx at all. Either do your calculations in Mobx and use its computed or use React immutable model (props, state)

[kykungz]

It is a common situation where we need to mix MobX states with React states isn't it? Like for an example, having user settings store on MobX, which will be used to apply to each component's state.

It is also mentioned in the official docs on how to mix React props in useEffect and use autorun at the same time. So I think it is safe to do so(?)