🌐 React Context API – Introduction

The Context API in React provides a way to pass data through the component tree without having to pass props manually at every level. It’s a clean solution to the problem of prop drilling in deeply nested components.

🔧 Why Use Context?

• To share global data like theme, user info, or settings
• To avoid passing props through multiple layers
• To simplify state sharing between deeply nested components

📦 When Should You Avoid It?

Context is **not a replacement for all state management**. Avoid it when:

• The data is not truly global
• You only need it within a few components
• You update the context too frequently (performance hit)

⚙️ How It Works (Overview)

The Context API is made up of three parts:

• Context: Created using React.createContext()
• Provider: Makes the data available to child components
• Consumer / useContext: Allows components to access that data

✅ Common Use Cases

• 🌙 Theme switching (light/dark)
• 👤 User authentication and profile info
• 📦 Language settings (i18n)
• 🔧 Global app configuration

📋 Summary

• Context lets you share state globally without prop drilling.
• Use when the same data is needed across many components.
• Avoid it for local or frequently updated state.