0

I've updated the app to use Mobx-react 6 along with Mobx state tree. I'm not able to get the latest value inside the component when I use custom store hooks.

import { observer, MobXProviderContext, useObserver } from 'mobx-react';

function useStores() {
  return useContext(MobXProviderContext);
}

function useJob() {
  const { jobStore } = useStores();
  return useObserver(() => jobStore);
}



//USAGE

function ChildDocs(props) {
  const jobStore = useJob();
  const { validChildDocuments, setCurrentChildDoc, currentChildDoc, noneDocuments } = jobStore;
  
  //This won't update although the value in the store is null after re-mount. This shows the old value
  console.log('verificationDataStore=', currentChildDoc.verificationDataStore);

}
export default observer(ChildDocs);
Pavan
  • 985
  • 2
  • 15
  • 27
  • Not quite understand why you need useObserver here `return useObserver(() => jobStore);`? It is usually used for jsx part of component. Did you try to remove it? – Danila Jun 26 '20 at 15:37
  • Nope Lemme remove it and see! – Pavan Jun 26 '20 at 15:50
  • I initially did not use the observer HOC cos I though useObserver would take care of that. – Pavan Jun 26 '20 at 15:50
  • Same issue even after removing useObserver(()) – Pavan Jun 26 '20 at 15:54
  • `useObserver` is basically alternative to observer HOC. It probably won't matter in this situation, it's just unneeded here. Next thing you want to check is that `currentChildDoc` and its properties are observable? – Danila Jun 26 '20 at 15:54
  • They're. They're part of a Mobx state tree. That'd make them observable by default. – Pavan Jun 26 '20 at 15:59
  • Maybe something wrong with they way you pass stores to ``? Everything else looks normal in your snippet. – Danila Jun 26 '20 at 17:45
  • I found the cause of my issue. Using `import 'mobx-react/batchingForReactDom';` Solved it for me. Some warnings are not worth ignoring it seems :D – Pavan Jun 29 '20 at 13:01
  • Can you vote to close this question – Pavan Jun 29 '20 at 13:02

0 Answers0