@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

Uh oh!

react 19 #47

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions