React 19 support #3985

imjordanxd · 2024-12-09T22:50:11Z

Code change checklist

Added/updated unit tests
~~Updated /docs. For new functionality, at least API.md should be updated~~ N/A
Verified that there is no significant performance drop (yarn mobx test:performance)

Note: before merging, I think I should also dup any propType checks inside render to be compatible across multiple React versions. I also intentionally haven't bumped the types for react and react-dom to keep the propTypes types such as Validator, Requireable etc.

changeset-bot · 2024-12-09T22:50:16Z

🦋 Changeset detected

Latest commit: f1dbfeb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
mobx-react-lite	Minor
mobx-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/mobx-react-lite/__tests__/observer.test.tsx

imjordanxd · 2024-12-11T03:16:38Z

packages/mobx-react-lite/__tests__/useLocalStore.deprecated.test.tsx

@@ -377,7 +377,7 @@ describe("is used to keep observable within component body", () => {
            })
            expect(container.querySelector("span")!.innerHTML).toBe("22")
            expect(counterRender).toBe(2)
-            expect(observerRender).toBe(3)


React now renders the observer an extra time for some reason. The reaction only fires once though when the store mutates

these hooks are all basically anti-pattern anyway, so good enough :)

imjordanxd · 2024-12-11T03:17:06Z

packages/mobx-react-lite/src/ObserverComponent.ts

+    if (children && render) {
+        console.error(
+            "MobX Observer: Do not use children and render in the same time in `Observer`"
+        )
+    }


propTypes removed in v19 so I've duped this inside the render body

imjordanxd · 2024-12-11T03:17:18Z

packages/mobx-react/__tests__/hooks.test.tsx

@@ -49,7 +49,7 @@ test("computed properties react to props when using hooks", async () => {
    act(() => {
        jest.runAllTimers()
    })
-    expect(seen).toEqual(["parent", 0, "parent", 2])
+    expect(seen).toEqual(["parent", 0, "parent", 2, 2])


ditto: https://github.com/mobxjs/mobx/pull/3985/files#r1879267971

mweststrate · 2024-12-11T20:19:44Z

packages/mobx-react-lite/__tests__/useLocalObservable.test.tsx

+                }, [multiplier])
+                useEffect(() => setMultiplier(3), [])
+            },
+            {


NIT: This pattern reoccures quite a few times in the test, might be nice to make a utility for it? (separate PR is fine if interested)

mweststrate

This looks great, thanks so much for picking this up!

levrik · 2024-12-17T08:49:23Z

packages/mobx-react-lite/src/ObserverComponent.ts

 interface IObserverProps {
    children?(): React.ReactElement | null
    render?(): React.ReactElement | null
 }

 function ObserverComponent({ children, render }: IObserverProps) {
+    if (children && render) {
+        console.error(
+            "MobX Observer: Do not use children and render in the same time in `Observer`"


typo: in the same time -> at the same time

Venryx · 2025-03-08T20:57:48Z

I must be missing something, but I am getting TypeScript errors when trying to use [email protected] in a repo with [email protected] and @types/[email protected].

The errors relate to exports such as React.Requireable not being available in @types/[email protected]:

node_modules/mobx-react/dist/propTypes.d.ts:2:38 - error TS2694: Namespace 'React' has no exported member 'Requireable'.
2     observableArray: import("react").Requireable<any>;

node_modules/mobx-react/dist/propTypes.d.ts:3:54 - error TS2694: Namespace 'React' has no exported member 'Validator'.  
3     observableArrayOf: (typeChecker: import("react").Validator<any>) => import("react").Requireable<any>;

Does anyone else see the same issue? (will keep looking into it in the meantime, but it seems to me that mobx-react is just relying on react type exports that no longer exist)

Venryx · 2025-03-09T17:55:03Z

Okay yeah, it looks like in @types/react@18, there were Requireable and Validator exports: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/da70d4aee37cd531df1fc030c1e068fe51d3b5e9/types/react/v18/index.d.ts#L4149-L4157

    /**
     * @deprecated Use `Validator` from the ´prop-types` instead.
     */
    type Validator<T> = PropTypes.Validator<T>;

    /**
     * @deprecated Use `Requireable` from the ´prop-types` instead.
     */
    type Requireable<T> = PropTypes.Requireable<T>;

However, as seen, they were marked as deprecated.

And then in @types/react@19, they were removed (ctrl+f shows no results): https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts

So if Requireable and Validator are still needed by mobx-react, they need to import from the prop-types package now, not react.

One remaining error is in mobx-react, where it references import("react").Requireable and Validator, where those are now only in prop-types, not mobx-react: mobxjs/mobx#3985 (comment) Ignoring for now / until I get a response.

mweststrate · 2025-03-09T18:36:04Z

PropTypes are deprecated in MobX-react as well, so happy to accept a PR to remove them.

…

On Sun, Mar 9, 2025, 18:55 Stephen Wicklund ***@***.***> wrote: Okay yeah, it looks like in @***@***.***, there were Requireable and Validator exports: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/da70d4aee37cd531df1fc030c1e068fe51d3b5e9/types/react/v18/index.d.ts#L4149-L4157 /** * @deprecated Use `Validator` from the ´prop-types` instead. */ type Validator<T> = PropTypes.Validator<T>; /** * @deprecated Use `Requireable` from the ´prop-types` instead. */ type Requireable<T> = PropTypes.Requireable<T>; However, as seen, they were marked as deprecated. And then in @***@***.***, they were removed (ctrl+f shows no results): https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts So if Requireable and Validator are still needed by mobx-react, they need to import from the prop-types package now, not react. — Reply to this email directly, view it on GitHub <#3985 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBG2DFC6432BF537XHD2TSFB5AVCNFSM6AAAAABTJ3OL32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBYHE4DOOJXGM> . You are receiving this because you modified the open/close state.Message ID: ***@***.***> [image: Venryx]*Venryx* left a comment (mobxjs/mobx#3985) <#3985 (comment)> Okay yeah, it looks like in @***@***.***, there were Requireable and Validator exports: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/da70d4aee37cd531df1fc030c1e068fe51d3b5e9/types/react/v18/index.d.ts#L4149-L4157 /** * @deprecated Use `Validator` from the ´prop-types` instead. */ type Validator<T> = PropTypes.Validator<T>; /** * @deprecated Use `Requireable` from the ´prop-types` instead. */ type Requireable<T> = PropTypes.Requireable<T>; However, as seen, they were marked as deprecated. And then in @***@***.***, they were removed (ctrl+f shows no results): https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts So if Requireable and Validator are still needed by mobx-react, they need to import from the prop-types package now, not react. — Reply to this email directly, view it on GitHub <#3985 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBG2DFC6432BF537XHD2TSFB5AVCNFSM6AAAAABTJ3OL32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDOMBYHE4DOOJXGM> . You are receiving this because you modified the open/close state.Message ID: ***@***.***>

Venryx · 2025-03-09T20:27:04Z

@mweststrate Okay, I've created a PR for it here: #4534

imjordanxd added 3 commits October 15, 2024 09:12

deprecate IObserver options and its properties in JSDoc

71f03ee

Merge branch 'mobxjs:main' into main

763fea1

Preparing for React 19 - some tests fail

e160182

RTL hooks error

461c5e7

imjordanxd commented Dec 10, 2024

View reviewed changes

packages/mobx-react-lite/__tests__/observer.test.tsx Show resolved Hide resolved

skipping legacy context tests

b9da1d6

imjordanxd force-pushed the jordant/react-19 branch from c4e02b1 to b9da1d6 Compare December 10, 2024 22:31

skipping propTypes and defaultProps forwarding tests

92b9b2d

imjordanxd force-pushed the jordant/react-19 branch from 93a3ecd to 92b9b2d Compare December 10, 2024 22:36

imjordanxd added 4 commits December 11, 2024 09:47

skipping class propTypes test

907dd70

render time check

90a2272

changed some assertions

9ce6d94

added extra render

012bf17

imjordanxd marked this pull request as ready for review December 11, 2024 03:15

imjordanxd requested a review from mweststrate December 11, 2024 03:15

imjordanxd commented Dec 11, 2024

View reviewed changes

imjordanxd added 2 commits December 11, 2024 14:37

added todo

1532c2e

added warning for legacy context types in function components

58b3605

mweststrate mentioned this pull request Dec 11, 2024

[email protected] [email protected] Could not resolve dependency #3986

Closed

mweststrate reviewed Dec 11, 2024

View reviewed changes

added changeset

f1dbfeb

mweststrate approved these changes Dec 11, 2024

View reviewed changes

mweststrate merged commit 2587df3 into mobxjs:main Dec 11, 2024
1 check passed

github-actions bot mentioned this pull request Dec 11, 2024

Next release #3987

Merged

levrik reviewed Dec 17, 2024

View reviewed changes

Venryx mentioned this pull request Mar 9, 2025

Resolve TypeScript errors in React 19 (by removing the deprecated propTypes.ts) #4534

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React 19 support #3985

React 19 support #3985

imjordanxd commented Dec 9, 2024 •

edited

Loading

changeset-bot bot commented Dec 9, 2024 •

edited

Loading

imjordanxd Dec 11, 2024 •

edited

Loading

mweststrate Dec 11, 2024

imjordanxd Dec 11, 2024

imjordanxd Dec 11, 2024

mweststrate Dec 11, 2024

mweststrate left a comment

levrik Dec 17, 2024 •

edited

Loading

Venryx commented Mar 8, 2025 •

edited

Loading

Venryx commented Mar 9, 2025

mweststrate commented Mar 9, 2025 via email

Venryx commented Mar 9, 2025

React 19 support #3985

React 19 support #3985

Conversation

imjordanxd commented Dec 9, 2024 • edited Loading

Code change checklist

changeset-bot bot commented Dec 9, 2024 • edited Loading

🦋 Changeset detected

imjordanxd Dec 11, 2024 • edited Loading

Choose a reason for hiding this comment

mweststrate Dec 11, 2024

Choose a reason for hiding this comment

imjordanxd Dec 11, 2024

Choose a reason for hiding this comment

imjordanxd Dec 11, 2024

Choose a reason for hiding this comment

mweststrate Dec 11, 2024

Choose a reason for hiding this comment

mweststrate left a comment

Choose a reason for hiding this comment

levrik Dec 17, 2024 • edited Loading

Choose a reason for hiding this comment

Venryx commented Mar 8, 2025 • edited Loading

Venryx commented Mar 9, 2025

mweststrate commented Mar 9, 2025 via email

Venryx commented Mar 9, 2025

imjordanxd commented Dec 9, 2024 •

edited

Loading

changeset-bot bot commented Dec 9, 2024 •

edited

Loading

imjordanxd Dec 11, 2024 •

edited

Loading

levrik Dec 17, 2024 •

edited

Loading

Venryx commented Mar 8, 2025 •

edited

Loading