I try to demostrate context + hoc in different use cases.

I use Material UI with Formik and Apollo Client.

You can see all the organizations, update any organization, add new organization, and delete organization.

Context is used in the organization/list.tsx useOrganization

• Global shared state.
• When you want to share data between all nested components.

HOC is used in the organization/add.tsx withOrganizations

• When you don't want to share data with all nested children.
• When you want to pick the component which receives the props.
• It will act as local storage for the specific component.

how-to-use-react-context-effectively

a-simple-graphql-example-with-relationships/