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

1️⃣ Create Context 

const MyContext = createContext(defaultValue);

2️⃣ Provide Context 

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

3️⃣ Consume Context

  • ✅ With useContext (Functional Components) 
const value = useContext(MyContext);
  • ✅ With Context.Consumer (For Class Components) 
<MyContext.Consumer>
  {value => <div>{value}div>}
MyContext.Consumer>

🚀 Example (Sidebar Context) 

"use client";

import { useIsMobile } from "@/hooks/use-mobile";
import { createContext, useContext, useEffect, useState } from "react";

type SidebarState = "expanded" | "collapsed";

type SidebarContextType = {
  state: SidebarState;
  isOpen: boolean;
  setIsOpen: (open: boolean) => void;
  isMobile: boolean;
  toggleSidebar: () => void;
};

const SidebarContext = createContext<SidebarContextType | null>(null);

export function useSidebarContext() {
  const context = useContext(SidebarContext);
  if (!context) {
    throw new Error("useSidebarContext must be used within a SidebarProvider");
  }
  return context;
}

export function SidebarProvider({
  children,
  defaultOpen = true,
}: {
  children: React.ReactNode;
  defaultOpen?: boolean;
}) {
  const [isOpen, setIsOpen] = useState(defaultOpen);
  const isMobile = useIsMobile();

  useEffect(() => {
    if (isMobile) {
      setIsOpen(false);
    } else {
      setIsOpen(true);
    }
  }, [isMobile]);

  function toggleSidebar() {
    setIsOpen((prev) => !prev);
  }

  return (
    <SidebarContext.Provider
      value={{
        state: isOpen ? "expanded" : "collapsed",
        isOpen,
        setIsOpen,
        isMobile,
        toggleSidebar,
      }}
    >
      {children}
    SidebarContext.Provider>
  );
}

⚡ 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.