[React MobX] MobX React integration

Posted on 2021-10-30 Edited on 2024-09-12 In Programming Language , Front-end Development , React , MobX Views: Word count in article: 3.6k Reading time ≈ 3 mins.

MobX React integration

While MobX works independently from React, they are most commonly used together. In The gist of MobX you have already seen the most important part of this integration: the observer HoC that you can wrap around a React component.

Installation

$ npm install -s mobx-react-lite

# Or 
# $ npm install -s mobx-react

Usage

// src/main.js

import React from "react"
import ReactDOM from "react-dom"
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"

class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

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

const myTimer = new Timer()

// A function component wrapped with `observer` will react
// to any future change in an observable it used before.
const TimerView = observer(({ timer } : { timer: Timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

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

setInterval(() => {
    myTimer.increaseTimer()
}, 1000)

Hint: you can play with the above example yourself on CodeSandbox - https://codesandbox.io/s/minimal-observer-p9ti4?file=/src/index.tsx.

The observer HoC automatically subscribes React components to any observables that are used during rendering. As a result, components will automatically re-render when relevant observables change. It also makes sure that components don’t re-render when there are no relevant changes. So, observables that are accessible by the component, but not actually read, won’t ever cause a re-render.

In practice this makes MobX applications very well optimized out of the box and they typically don’t need any additional code to prevent excessive rendering.

For observer to work, it doesn’t matter how the observables arrive in the component, only that they are read. Reading observables deeply is fine, complex expression like todos[0].author.displayName work out of the box. This makes the subscription mechanism much more precise and efficient compared to other frameworks in which data dependencies have to be declared explicitly or be pre-computed (e.g. selectors).

FAQs

Property ‘timer’ does not exist on type ‘{ children?: ReactNode; }’. TS2339

Declare { timer } : { timer: Timer } type to fix that issue.

Property 'timer' does not exist on type '{ children?: ReactNode; }'.  TS2339

    20 | // A function component wrapped with `observer` will react
    21 | // to any future change in an observable it used before.
  > 22 | const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

// A function component wrapped with `observer` will react
// to any future change in an observable it used before.
- const TimerView = observer(({ timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)
+ const TimerView = observer(({ timer } : { timer: Timer }) => <span>Seconds passed: {timer.secondsPassed}</span>)

Can not find module

Export component to fix that issue.

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

+ export default function TimerPage() {
+     return (
+         <TimerView timer={myTimer}></TimerView>
+     );
}