React Context – Quick Revision Notes

Definition: Context API manages global state and avoids prop drilling.

Create Context

const MyContext = createContext(defaultValue);

Provide Context

<MyContext.Provider value={sharedData}>
  <App />
MyContext.Provider>

Consume Context

• With useContext (Functional Components)

const value = useContext(MyContext);

• With Context.Consumer (For Class Components)

<MyContext.Consumer>
  {value => <div>{value}div>}
MyContext.Consumer>

Best Practices

• Use multiple contexts for modularity.
• Combine with useReducer for complex state.
• Wrap context logic in a custom hook for cleaner code.

const useMyContext = () => useContext(MyContext);

Use Context for: Theme, Auth, Language, Global State.