React Context – Quick Revision Notes

#react

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

Build the product, not the plumbing—React first

Kinde handles the boring but critical stuff: auth, permissions, and billing—all from one React SDK.

Get a free account

DEV Community