Mobx and React - ChoDragon9/posts GitHub Wiki

import { makeAutoObservable } from "mobx"

class Timer {
  secondsPassed = 0;

  constructor() {
    makeAutoObservable(this)
  }

  increaseTimer() {
    this.secondsPassed += 1
  }
}

export const myTimer = new Timer();

import { observer } from "mobx-react-lite"

const TimerView = observer(({timer}) => (
  <span>Seconds passed: {timer.secondsPassed}</span>
));

ReactDOM.render(<TimerView timer={myTimer} />, document.body);

import { observer } from "mobx-react-lite"

const TimerView = observer(() => (
  <span>Seconds passed: {myTimer.secondsPassed}</span>
));

ReactDOM.render(<TimerView />, document.body);

const TimerView = observer(() => {
  const [timer] = React.useState(() => myTimer);
  return <span>Seconds passed: {timer.secondsPassed}</span>
});

ReactDOM.render(<TimerView />, document.body);

const MyComponent = observer(({todos, user}) => (
  <div>
    {user.name}
    <ul>
      {todos.map(todo => (
        <TodoView todo={todo} key={todo.id} />
      ))}
    </ul>
  </div>
));

const MyComponent = observer(({todos, user}) => (
  <div>
    {user.name}
    <TodosView todos={todos} />
  </div>
));

const TodosView = observer(({todos}) => (
  <ul>
    {todos.map(todo => (
      <TodoView todo={todo} key={todo.id} />
    ))}
  </ul>
));