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