qwe.js

import * as React from "react";
import * as ReactDOM from "react-dom";
import { observable, action } from "mobx";
import { useLocalStore, useObserver } from "mobx-react-lite";

class CurrentUserModel {
  @observable value = null;

  @action fetch() {
    setTimeout(() => {
      this.value = {
        name: `kana`,
        age: new Date().getSeconds()
      };
    }, 500);
  }
}

const currentUserModel = new CurrentUserModel();

function User({ name, age }) {
  return (
    <>
      <div>Name: {name}</div>
      <div>Age: {age}</div>
    </>
  );
}

function CurrentUser() {
  React.useEffect(() => currentUserModel.fetch(), []);

  return useObserver(() => {
    if (currentUserModel.value == null) {
      return "Loading...";
    } else {
      return (
        <User
          name={currentUserModel.value.name}
          age={currentUserModel.value.age}
        ></User>
      );
    }
  });
}

function App() {
  const state = useLocalStore(() => ({
    isOpen: false,
    toggle() {
      this.isOpen = !this.isOpen;
    }
  }));

  return useObserver(() => (
    <>
      <button onClick={state.toggle}>toggle</button>
      <div>{state.isOpen && <CurrentUser />}</div>
    </>
  ));
}

ReactDOM.render(<App />, document.getElementById("root"));