useState hook value is stale inside of onSnapshot

[kwhitaker]

Hello - I have an observer component that needs to update internal state, but I am trying to do a comparison when the MST state changes, via onSnapshot. However, the state from the useState hook is stale inside of my onSnapshot. Is there a more idiomatic way I should be doing this?

const Store = types.model('Store', {
  arr: types.array(types.array(types.array(types.number)))
}).actions((self) => {
  const setArr = (next) => {
    self.arr = next;
  }
});

const doSomeCompute = (nextArr) => returnSomeValuesBasedOnArr(nextArr);

// I am using useContext to pass the store stuff around
const ObservedComponent = observer(({arr}) => {
  const [state, setState] = useState(doSomeCompute(arr);

  onSnapshot(arr, (snap) => {
     const next = doSomeCompute(snap);
   
    // this fails because `state` is always the initial value
    if (equals(next, state) {
      return;
    }

    setState(next);
  });

  return (
    <SomeBasicComponentThatNeedsTheStateValue  {...state} />;
  );
});

[EmilTholin]

Hi @kwhitaker!

The easiest solution might be to make the computed value into a view and it will be kept in sync automatically:

const Store = types
  .model("Store", {
    arr: types.array(types.array(types.array(types.number)))
  })
  .views((self) => ({
    get computation() {
      return doSomeCompute(self.arr);
    }
  }))
  .actions((self) => ({
    setArr(next) {
      self.arr = next;
    }
  }));

// ...

const ObservedComponent = observer(({ computation }) => {
  return <SomeBasicComponentThatNeedsTheStateValue {...computation} />;
});

If you absolutely don't want to pollute your MST model with this computation you could use the useLocalObservable hook and derive the computed ("view") from the arr prop in the React component instead:

const ObservedComponent = observer(({ arr }) => {
  const state = useLocalObservable(() => ({
    arr, // The initial arr value
    get computation() {
      return doSomeCompute(state.arr);
    }
  }));

  useEffect(() => {
    // Sync the arr from 'props' into the observable 'state'
    state.arr = arr;
  }, [arr]);

  return <SomeBasicComponentThatNeedsTheStateValue {...state.computation} />;
});

[kwhitaker]

This nearly got me there. I had to make computation a function instead of a getter, as it wasn't updating properly when the array changed. Otherwise, it seems to work.

[EmilTholin]

Alright, great! If you could create a minimal reproducible example in e.g. CodeSandbox I could take a look. It might be that computation is dereferenced too early in a non-observer component or something similar.

If it works as a function that's great, but a MobX computed will be more efficient.

[kwhitaker]

I'll try and make a minimal example that reproduces my issue. I must be dereferencing it too early, because when I try to create an example that illustrates the problem, it works (of course).