import { useState } from 'react';
import { createStore } from 'react-internal-store';

const MyModel = () => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return [count, increment];
};

const Store = createStore({ MyModel });

function MyApp() {
  return (
    <Store>
      <MyPage />
    </Store>
  );
}

function MyPage() {
  const [count, increment] = Store.useMyModel();

  return (
    <button onClick={increment} type="button">
      You've clicked {count} times.
    </button>
  );
}

import { useState } from 'react';
import { createStore, defineModel } from 'react-internal-store';

const MyModel = defineModel(() => {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return [{ count }, increment];
});

const Store = createStore({ MyModel });

function MyApp() {
  return (
    <Store>
      <MyPage />
    </Store>
  );
}

function MyPage() {
  const [count, increment] = Store.useMyModel((state) => {
    return state.count;
  });

  return (
    <button onClick={increment} type="button">
      You've clicked {count} times.
    </button>
  );
}