Install mobx-react peer dependency error on react v18.0.0

[SkyVan1eM]

Intended outcome:

install mobx-react without any react peer dependency

Actual outcome:

when installing mobx-react , "could not resolve dependency" and searching for react 16 || 17

How to reproduce the issue:

install react app, and it install react 18, and when try to install mobx-react

Versions

react@18.0.0

[mweststrate]

React 18 isn't supported yet, although it probably works, so the error is correct. Please follow the react 18 issue instead.

…

On Sat, 9 Apr 2022, 16:13 Vadim, ***@***.***> wrote: *Intended outcome:* install mobx-react without any react peer dependency *Actual outcome:* when installing mobx-react , "could not resolve dependency" and searching for react 16 || 17 *How to reproduce the issue:* install react app, and it install react 18, and when try to install mobx-react *Versions* ***@***.*** — Reply to this email directly, view it on GitHub <#3363>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBF4NMFIMXB4D4SU53LVEGNCVANCNFSM5S7FHXAQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[slezhov]

try to use
npm install mobx-react --force

[xaviergonz]

I recently updated mobx-react-component to support react 18.

@FredyC
Since part of its code matches mobx-react-lite some of the changes I had to made might apply to support react 18.

The most important change was to change useForceUpdate to use useSyncExternalStore

import { useSyncExternalStore } from "use-sync-external-store/shim"

function useForceUpdate() {
    type OnStoreChange = () => void

    const stateObjRef = useRef([])

    const getStateObj = useCallback(() => stateObjRef.current, [])

    const onStoreChangeRef = useRef<OnStoreChange | undefined>()

    const updateStateObj = useCallback(() => {
        stateObjRef.current = []
        onStoreChangeRef.current?.()
    }, [])

    const subscribe = useCallback((onStoreChange: OnStoreChange) => {
        onStoreChangeRef.current = onStoreChange

        return () => {
            onStoreChangeRef.current = undefined
        }
    }, [])

    useSyncExternalStore(subscribe, getStateObj)

    return updateStateObj
}

Also I had to change some tests that used fake timers to use real ones or they wouldn't pass (still looking into it), added some missing "act" calls and removed some tests that relied on using the real react render instead of the testing library render.

Here are all the changes:

xaviergonz/mobx-react-component@0e4c330...master

[blackrabbit99]

@mweststrate do you have any plans or estimate to support React@18 for mobx-react ?

[mweststrate]

Yes, WIP, no ETA

…

On Mon, 25 Apr 2022, 19:06 Artem Zakharchenko, ***@***.***> wrote: @mweststrate <https://github.com/mweststrate> do you have any plans or estimate to support ***@***.*** for mobx-react ? — Reply to this email directly, view it on GitHub <#3363 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBE5FFZ5IBKH53ZI6CDVG3NJVANCNFSM5S7FHXAQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[abhi-go]

Thanks Michael! Looking forward to trying out MST/Mobx-react with React 18.

[mweststrate]

Should be fixed in mobx-react-lite@3.4.0 / mobx-react@7.4.0