Why is undefined when deriving a specific object from Mobx?

Question

React

Good day, I'm trying to display information from Mobx, but when accessing a specific object - undefined, but if I access a global variable, then everything is fine. I suspect it's asynchronous, can anyone share a solution?
Link to CodeSandbox

Answer 1

When you access a value, it doesn't exist yet.
Changes are not tracked.
DB class - you need to add a default value:

class DB {
  info = null;
  ...

The Episodes component - add the DB.info value as a dependency to the effect:

const Episodes = observer(() => {
  useEffect(() => {
    ...
  }, [ DB.info ]);
  ...

If you do not want to see the default info value inside Episodes, then its instance should be rendered only if there is data, in App replace with . return <Episodes />;return DB.info && <Episodes />;