React-Context-API | The repository for my article on React 's context | Frontend Framework library

I am making an e-commerce app with react and firebase the component contains two child components

1- (this component will be duplicated as many Items as the user adds to the cart and it has the functionality to let user modify the quantity of the Item )

2- (this component will show the user the the total price of his cart and the shipping fees)

of course all the data of the items and the total will be gotten from the database (I am using firestore) but but the issue is when the user update the quantity of the items from the component the total price from the did not get updated as well because the database call will be done already and no way to recall the function that gets the data from the database because there is no parent- child relation between the two components and I can't pass props between them I have tried to use react-context-api for this but that did not solve the issue because the up to date is on the database and the only way to update the total value is to refresh the page and this is not a good user experience to have.

Is there in Vue.js something like createContext in React? https://flaviocopes.com/react-context-api/

I found this https://github.com/zephraph/vue-context-api but I would prefer to use something more “official”

I have created a codesandbox with a simplified version of my problem

https://codesandbox.io/s/new-react-context-api-ei92k

I get something from a fetch (in this case a user)

I then create a local copy of this user and make some changes to it

The problem: Any changes update my initial user object

Can someone tell me how this is possible? and how can I avoid this?

I found this question which answers to this problem with adding all context change functions to the topmost parent. React Context api - Consumer Does Not re-render after context changed

But this is awkward, I want the functions that change the context in the components that change it. Let's say I have a button that changes something in the content, I want to have the handleChange() in that component instead of clogging my parent with functions and states that don't belong there.

Is this possible to outsource context logic to components?

I want to save a simple boolean + userID if a user is authenticated and have it accessible via React Context API.

Many guides wrapped their root compoennt with the context Provider. To me it seems wastefull to wrap the whole app. On the other hand I need this information to be available in all my main pages.

Does it have any negative consequenses to wrap your whole app with a React Context Provider?

Example:

Hi I have inherit a system like this:

An Api and many Fronts (spas) they share a common menu with links to navigate to each others but they are different react apps, with different urls. And Azure Active directory to authenticate an the Api is protected with Bearer token.

Something like this:

Now I have authorization requirements with a custom permissions that the business people want to assign to every user, for actions that they can do or not and visibility things.

I want to use Identity4Server with the active directory as an open id provider. Then consume a provider api to get custom permission and put those permissions in the claims. Then in the Api impl policies that demand for specify roles and claims to accomplish the permissions specifications.

Something like this:

Identity4Server config:

I have updated this with an update at the bottom

Is there a way to maintain a monolithic root state (like Redux) with multiple Context API Consumers working on their own part of their Provider value without triggering a re-render on every isolated change?

Having already read through this related question and tried some variations to test out some of the insights provided there, I am still confused about how to avoid re-renders.

Complete code is below and online here: https://codesandbox.io/s/504qzw02nl

The issue is that according to devtools, every component sees an "update" (a re-render), even though SectionB is the only component that sees any render changes and even though b is the only part of the state tree that changes. I've tried this with functional components and with PureComponent and see the same render thrashing.

Because nothing is being passed as props (at the component level) I can't see how to detect or prevent this. In this case, I am passing the entire app state into the provider, but I've also tried passing in fragments of the state tree and see the same problem. Clearly, I am doing something very wrong.

I have previously used Redux, and am keen to implement Context API this time around. I pretty much want to do what is described in React Context API - How to Get Reference To State Object In Provider For A Conditional Method - however, I want the "change" function to be more general - it originally looks like this: