🌐 React Context API — Say Goodbye to Prop Drilling

The Context API in React lets you share data globally across components — without passing props manually at every level.

🎯 Why use Context?
• Avoids prop drilling (passing props through many levels)
• Great for global data like theme, auth, or language
• Makes state management cleaner in medium apps

🧱 Basic setup:

1.Create a context:
import { createContext } from "react";
export const ThemeContext = createContext();

2.Provide context in a parent:
function App() {
return (
<ThemeContext.Provider value={"dark"}>
<Child />
</ThemeContext.Provider>
);
}

3.Use context in any child:
import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Child() {
const theme = useContext(ThemeContext);
return <p>Current theme: {theme}</p>;
}

📌 Key points:
• Use createContext to create a new context
• Use Provider to wrap the tree and pass a value
• Use useContext to access the value anywhere

Context API is perfect for lightweight global state without external libraries like Redux.