extremely simple React helper for sharing state with react context

react-state-helper.ts

import React, { useRef } from "react";
export const state = <F extends (...args: any[]) => any>(create: F) => {
    const context = React.createContext<ReturnType<F>>(undefined as any)
    return {
        Provider: context.Provider,
        create,
        use: () => React.useContext(context),
        context,
    }
};

zprogram.tsx

const AppState = state((initialValue: number) => {
  const [counter, useCounter] = useState(initialValue)
  return {
    count,
    increment: () => setCounter(c => c + 1)
  }
})


const ParentComponent = () => {
  const state = AppState.create(0)
  return (
    <AppState.Provider value={state}
    <div>
      count: { state.count }
      <ChildComponent/>
    </div>
    </AppState.Provier>
  )
}

const ChildComponent = () => {
  const state = AppState.use()
  return <button onClick={() => state.increment()}/>
}