react 19

[bardak-dev]

привет! клёвая либа но что мы будем с ней делать на 19 версии ректа?)

[betula]

Hello,
Can you explain more about your problem with React 19?

[bardak-dev]

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#libraries-depending-on-react-internals-may-block-upgrades

[designbyadrian]

After upgrading to React 19, I'm presented with this error:

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')
    at Object.<anonymous> (/Users/attila/Repositories/@london-dynamics/cms/node_modules/use-between/release/index.js:28:53)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
    at async nodeImport (file:///Users/attila/Repositories/@london-dynamics/cms/node_modules/vite/dist/node/chunks/dep-CDnG8rE7.js:52999:15)

[betula]

Hello, guys!

Every weekend I try to sit down and fix this issue, but I keep hitting a brick wall of resistance. If anyone wants to help speed up this fix, please lend a hand. The solution is quite simple at the moment:

Here's a description of what has changed, along with a link to the React repository on GitHub where you can see that a few fields have been renamed, but everything else remains the same.

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#libraries-depending-on-react-internals-may-block-upgrades

New Name of Shared Internals Driver

You can view the new name of the shared internals driver in the https://github.com/facebook/react/blob/main/packages/react/src/ReactClient.js#L110.

New Location of ReactCurrentDispatcher for Hooks

The new location of ReactCurrentDispatcher for hooks in the shared internal driver can be found
https://github.com/facebook/react/blob/main/packages/react/src/ReactSharedInternalsClient.js#L25.

Required Update in use-between Code

To support React 19, the use-between library needs to update the retrieval of ReactCurrentDispatcher for hooks. The necessary change can be seen https://github.com/betula/use-between/blob/master/src/lib/react-shared-internals.ts#L5.

This will be enough to support React 19.

For those interested in making this solution even better, there's an alternative solution using "react/reconciler" that will allow us to bypass what I consider unnecessary restrictions from React marketers.

https://gist.github.com/agurtovoy/0201718e7cda82b705968207190e6929

And of course, you can always wait for me to do it. I truly love and appreciate all of you. If no one steps up to help with the PR, then I'll have to start asking for donations. But I hope the spirit of Open Source continues to grow stronger, and that we support each other with much more than money. We would share our time and faith in Open Source, and believe that you, my friend, a nice guy from a nice town, can make many people happy!

Enjoy your Code🤗

[betula]

If you've done something, but it's not yet working, feel free to submit a PR and we'll review it together. Each of your contributions gives me a boost of strength and motivation!🤗🍀🚀

[bardak-dev]

@betula take a look at https://www.npmjs.com/package/use-mono-hook
no docs yet but it has support all react hooks, context, etc
basic usage is

import { MonoHooksStore } from 'use-mono-hook'
createRoot(document.getElementById('root')).render(
  <>
    <App />
    <MonoHooksStore />
  </>
)

import {createMonoHook,} from 'use-mono-hook';
import { useState} from 'react';

const _useProfile = () => {
  const [profile, setProfile] = useState();
  return {
    profile,
    setProfile,
  };
};

export const useProfile = createMonoHook<typeof _useProfile>(_useProfile, {
  defaults: {
    profile: undefined,
  }
}).useHook; // also has useHookWithArguments to use hook with params

under the hood there is react context and syncExternalStore no additional "rewrite everything" logic
also works in react native with HMR (there is a hitch to track changes inside functions because of HermesJS engine)
only 1 limitation is persist and cannot be resolve I think, because execute function after useEffect no data on initial render, I tried bypass this by react-suspend but no luck because react render rules (it works but errors in console cant be omitted so no implementation of instant data on initial render is possible) using "defaults" on initial render tho

[betula]

Hi @bardak-dev ,

Welcome to the team of state management enthusiasts 😊

The use-mono-hook looks very nice, but it doesn't follow the paradigm of minimal syntax. At the start, it's necessary to connect the MonoHooksStore and also wrap every hook used in createMonoHook beforehand, alongside the hook's function. This makes it a bit more complex rather than very simple. In this regard, I prefer use-between more. 😉

I really liked another piece of your code from your GitHub; you've already written half of what is crucial now for use-between. 🤗

I'm talking about:
https://github.com/stigma-io/use-mono

stigma-io@b742b5d#diff-42ec483a33163db3a8dff6c478b01ce94e57e1f9299714aa42cda6963442b7d3R13

You've already done part of the work necessary to support React 19; you renamed the key through which the ReactSharedInternal object of React is exported. You only need to do a second renaming:

The signature of the type ReactSharedInternalTypes has changed. You can see the new one on GitHub React here:

https://github.com/facebook/react/blob/main/packages/react/src/ReactSharedInternalsClient.js#L25

If you look closely, the field that was previously called ReactCurrentDispatcher inside this "secret" object is now renamed to H, probably to confuse its users. The ReactCurrentDispatcher property is now simply called H. This is essentially enough for use-between to start supporting React 19 in its previous form.

You'll just need to make sure both the old and new properties work, and everything will be complete and functional for React 19.

[shsr04]

I investigated this issue for React 19. The following obstacles make it difficult to migrate use-between to React 19:

• The ReactSharedInternals "secret" property has been renamed, as stated above. To remain backwards compatible, we need to check React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ?? React.__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE ?? React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED for the first non-null occurrence to get the ReactSharedInternals object
• The Dispatcher property has been renamed, as stated above. So instead of internals.ReactCurrentDispatcher we now only have access to internals.H...
• ⚠️ And it seems that H is no longer a stable pointer to the "current dispatcher". When I checked, H was null at startup, and it lazily initialized on first hook usage by use-between. This means, we would need to declare a proxy object, which caches the "latest seen" instance of the Dispatcher.

When I made some tests with the "proxy Dispatcher", things did not go very well... the interactions in my app were a lot more flaky and apparently some unpleasant rerenders happened. This indicates that caching H via proxy is more complicated... and maybe not a good idea.

So far, I have not found a "drop-in" replacement for the CurrentDispatcher which also works in React 19. Maybe someone else has more luck 🤞

[shsr04]

I got it to work: #49
@betula Do you want to check it out?

Works on React 18 and 19 in my tests. (I am running a medium complex application on use-between, and it seems to work fine.)

[betula]

Awesome!
Thanks a lot!
I'll merge it on the weekend!

[betula]

Thanks a lot @shsr04 !

I've merged the PR, but I can't build the new version yet because the tests have failed. I'll need to debug the tests first, and then I'll be able to build the new version.

If you could update the tests, that would be absolutely fantastic😇🍀🍀🍀

[shsr04]

@betula See the comment in #49. I didn't want to touch more stuff than necessary, but a basic lockfile could solve this (I had the same problem locally).

[betula]

I've fixed the tests and worked quite a bit on moving away from the outdated Enzyme, but now everything is fine.
The tests are passing, everything is green! 👍

I'll be building the version soon 🍀

Thanks to everyone who pushed this topic, React 19 support in use-between is coming soon. 🎉

Enjoy and Happy Coding 😇🍀