Sending mobx stores as props to components is a must ?

[tolgaisik]

In this beginning example i had a feeling that we must pass stores to components to be able to use it. It brings the idea of using context api.

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


class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

const TimerView = observer(({ timer }) => (
    <button onClick={() => timer.reset()}>Seconds passed: {timer.secondsPassed}</button>
))

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

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

However i tested that we do not need such. We can just import stores and use it where ever we want. For example below,

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


class Timer {
    secondsPassed = 0

    constructor() {
        makeAutoObservable(this)
    }

    increase() {
        this.secondsPassed += 1
    }

    reset() {
        this.secondsPassed = 0
    }
}

const myTimer = new Timer()

const TimerView = observer(() => (
    <button onClick={() => myTimer.reset()}>Seconds passed: {myTimer.secondsPassed}</button>
))

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

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

This works fine too and updates states and keeps the reactivity alright. I am confused that why would i pass the stores to the components. Is it something done on purpose ?

[urugator]

Testability, reusability, SSR.
If you import specific store instance, then your component is hardwired to that instance.
Otherwise doesn't matter.