MobXProviderContext sample

App.tsx

import { action, observable } from 'mobx'
import { MobXProviderContext, observer, Provider } from 'mobx-react'
import React, { useContext } from 'react'

class CounterViewModel {
    @observable count: number = 0

    @action.bound public plus() {
        this.count++
    }

    @action.bound public minus() {
        this.count--
    }
}

export function App() {
    return (
        <Provider counter={new CounterViewModel()}>
            <Counter />
        </Provider>
    )
}

const Counter = observer(() => {
    const { counter }: { counter: CounterViewModel } = useContext(
        MobXProviderContext,
    )
    return (
        <div>
            <div>{counter.count}</div>
            <button onClick={counter.minus}>-</button>
            <button onClick={counter.plus}>+</button>
        </div>
    )
})

@jaeyow If you want to introduce mobx for the first time, you don't have to care about the legacy mobx-react Provider. It was because of the performance problem that react team removed the legacy Context from core and introduced the new Context API. MobXProviderContext is an effort by mobx maintainers to ensure backward compatibility while using the Context API internally.