mobx-react-lite: useObserver completely follow component effects

useObserver.tsx

import { getDependencyTree, Reaction } from "mobx"
import React, { useRef, useState, useLayoutEffect } from "react"
import { isUsingStaticRendering } from "./staticRendering"
import { printDebugValue } from "./utils/printDebugValue"

function observerComponentNameFor(baseComponentName: string) {
    return `observer${baseComponentName}`
}

function useMyObserverWithReaction<T>(fn: () => T, baseComponentName: string = "observed"): any {
    if (isUsingStaticRendering()) {
        return fn()
    }
    const reactionRef = useRef<Reaction | null>(null)
    const [_, setState] = useState([])
    const forceUpdate = () => setState([])

    useLayoutEffect(() => {
        const reaction = new Reaction(observerComponentNameFor(baseComponentName), () => {
            forceUpdate()
        })
        reactionRef.current = reaction
        forceUpdate()
        return () => {
            reaction.dispose()
            reactionRef.current = null
        }
    }, [0])
    const reaction = reactionRef.current
    React.useDebugValue<Reaction | null>(
        reaction,
        reaction => reaction && printDebugValue(reaction)
    )
    let rendering: any = null
    if (reaction) {
        reaction.track(() => (rendering = fn()))
    } else {
        rendering = fn() // keep hooks
    }
    return rendering
}

export { useMyObserverWithReaction as useObserver }