React Context Provider or Update Context

 

1. Provider

• Provider Component updates the value of Context.
• When the provider updates context, all the nested consumers of that provider will be re-rendered.
• Updated context value can only be accessed by the consumers nested within the provider.

1

2

3

<ContextObject.Provider value={/* some value */}>

...

<ContextObject.Provider/>

JSX

To update context value, we have to pass it as a prop to the Provider component.

2. Context Flow For Windows App

3. Best Practice

• The context value should have the data which the consumers need.
• It should also contain the required methods to update that data.

4.Final Code