@joenoon/mobx-react-hooks

This is a hooks-specific iteration of mobx-react.

You need React version 16.8.0 and above

Class based components are not supported. If you want to transition existing projects from classes to hooks (as most of us do), you can use this package alongside the mobx-react just fine.

• useObserver
• Server Side Rendering`

useObserver

useObserver<T>(baseComponentName = "observed", options?: IUseObserverOptions): T

Think of useObserver like you would think of observer from mobx-react, just with different syntax for hooks.

Here is an example with common usage. Note the use of useObserver and that everything else is plain MobX:

import { useState } from "react"
import { useObserver } from "@joenoon/mobx-react-hooks/macro"
import { observable, action } from "mobx"

const Person = props => {
    useObserver()
    const [person] = useState(() =>
        observable(
            {
                firstName: "John",
                lastName: "FooBar",

                // becomes a computed
                get name() {
                    return `${this.lastName}, ${this.firstName}`
                },

                // becomes an action, bound below
                reset() {
                    this.firstName = "John"
                    this.lastName = "FooBar"
                }
            },
            {
                reset: action.bound
            }
        )
    )
    return (
        <div>
            {person.name}
            <button onClick={() => (person.firstName = "Mike")}>No! I am Mike</button>
            <button onClick={person.reset}>Reset</button>
        </div>
    )
}

The macro solves a few problems:

• Hooks style code structure with less verbosity than alternatives.
• Without the macro, the code necessary to please the eslint rules of hooks is verbose.
• If you use observer(props => ...break a hook rule) you will not be warned - you may think you've done everything correctly until you eventually realize the linter is not analyzing these for you.
• By sticking to this simple pattern for components that handle observable data you can avoid many pitfalls related to expecting reactions in scopes that are not under observation. The macro enforces expected behavior.

Server Side Rendering with useStaticRendering

When using server side rendering, the components are rendered only once. Since components are never unmounted, observer components would in this case leak memory when being rendered server side. To avoid leaking memory, call useStaticRendering(true) when using server side rendering which essentially disables observer.

import { useStaticRendering } from "@joenoon/mobx-react-hooks"

useStaticRendering(true)

This makes sure the component won't try to react to any future data changes.

Prior Works

This project is a fork of mobx-react-lite which offers various ways of doing things. The intention with this library is to offer one clear and concise pattern for using mobx with React Hooks.