React Context – Quick Revision Notes

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