Context service provider pattern

app.js

import { MyServiceProvider, useMyService } from './myservice';

function App() {
	return (
    <MyServiceProvider>
      // more services here
    </MyServiceProvider>
  );
}

export {
  useMyService,
};

myservicecontext.js

export default createContext( { state: {}, actions: {}, data: {} } );

myserviceprovider.js

import Context from './myservicecontext';

function MyServiceProvider( { children } ) {
  // useState, useCallback, useEffect up here create all these states and actions
  const value = {
    state: {
      someState,
      anotherState,
    },
    actions: {
      setSomeState,
      loadSomething,
    },
    data: {
      META_CONSTANT,
      OTHER_CONSTANT,
    },
  }
	return (
		<Context.Provider value={ value }>
			{ children }
		</Context.Provider>
	);
}

otherComponent.js

import { useMyService } from './app';

function OtherComponent() {
  const {
    state: { someState, anotherState },
    actions: { setSomeState, loadSomething },
    data: { META_CONSTANT, OTHER_CONSTANT },
  } = useMyService();
  // render here
}

usemyservice.js

import Context from './myservicecontext';

function useMyService() {
	return useContext( Context );
}