Hooks in React Class Component

hooks-in-class-component.tsx

import React, { useState } from "react";

function defineHooks<T extends unknown>(hooks: () => T) {
  type Params = ReturnType<typeof hooks>;
  return (props: { children: (params: Params) => JSX.Element }) => {
    const { children } = props;
    return children(hooks());
  };
}

class App extends React.Component {
  render(): React.ReactNode {
    const Provider = defineHooks(() => {
      const [count, setCount] = useState(0);
      return { count, setCount };
    });
    return (
      <Provider>
        {({ count, setCount }) => {
          return <button onClick={() => setCount(count + 1)}>{count}</button>;
        }}
      </Provider>
    );
  }
}