Using Context API or Redux with Lovable Components

Why global state management needs extra setup in Lovable

Lovable generates components that manage their own state using useState and useEffect. This works well for isolated features, but breaks down when multiple components need to share the same data — like user authentication status, shopping cart contents, or theme preferences. Without a shared state solution, you end up passing props through five or six component layers (called 'prop drilling'), which makes the code fragile and hard to maintain. React Context API is built into React and requires no additional packages, making it the natural first choice for Lovable projects. It lets you create a 'provider' component at the top of your component tree that makes data available to any descendant component, no matter how deeply nested. Zustand is a lightweight alternative that works well when you need state that persists across route changes or when Context re-renders become a performance issue. Redux is the heaviest option and is generally overkill for Lovable projects unless you need its middleware (like Redux Saga for complex async flows) or already have a team experienced with it.

• Prop drilling — passing data through many component layers because there is no shared state
• Component isolation — Lovable generates self-contained components that do not share state by default
• Authentication state not accessible — child components cannot check if the user is logged in without passing session through props
• Theme or language preference lost on navigation — route changes remount components and local state is reset
• Cart or form data not shared between pages — each page manages its own state independently

Error messages you might see

Before you start

• A Lovable project where multiple components need to share the same data
• Understanding of which data needs to be global (auth state, theme, cart) versus local (form inputs, toggles)
• The project open in Dev Mode or the Lovable editor

How to fix it

// No shared state — each component fetches its own user data
// src/components/Navbar.tsx
function Navbar() {
  const [user, setUser] = useState(null);
  useEffect(() => { /* fetch user */ }, []);
  return <nav>{user?.name}</nav>;
}
// src/components/Sidebar.tsx
function Sidebar() {
  const [user, setUser] = useState(null);
  useEffect(() => { /* fetch user again */ }, []);
  return <aside>{user?.role}</aside>;
}

// src/contexts/AuthContext.tsx
import { createContext, useContext, useState, useEffect, ReactNode } from "react";
import { supabase } from "@/integrations/supabase/client";
import { User } from "@supabase/supabase-js";
interface AuthContextType {
  user: User | null;
  isLoading: boolean;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setIsLoading(false);
    });
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => setUser(session?.user ?? null)
    );
    return () => subscription.unsubscribe();
  }, []);
  return (
    <AuthContext.Provider value={{ user, isLoading }}>
      {children}
    </AuthContext.Provider>
  );
}
export function useAuth() {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Index />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </BrowserRouter>
  );
}

import { AuthProvider } from "@/contexts/AuthContext";
function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Index />} />
          <Route path="/dashboard" element={<Dashboard />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
}

// Props drilled through multiple layers
function Navbar({ user }: { user: User | null }) {
  return <nav>{user ? user.email : "Sign in"}</nav>;
}

import { useAuth } from "@/contexts/AuthContext";
function Navbar() {
  // Access user directly from context — no props needed
  const { user, isLoading } = useAuth();
  if (isLoading) return <nav>Loading...</nav>;
  return <nav>{user ? user.email : "Sign in"}</nav>;
}

return (
  <AuthContext.Provider value={{ user, isLoading }}>
    {children}
  </AuthContext.Provider>
);

import { useMemo } from "react";
// Memoize the value so consumers only re-render when user or isLoading changes
const value = useMemo(() => ({ user, isLoading }), [user, isLoading]);
return (
  <AuthContext.Provider value={value}>
    {children}
  </AuthContext.Provider>
);

Complete code example

1import { createContext, useContext, useState, useMemo, ReactNode } from "react";
2
3type Theme = "light" | "dark";
4
5interface ThemeContextType {
6  theme: Theme;
7  toggleTheme: () => void;
8}
9
10const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
11
12export function ThemeProvider({ children }: { children: ReactNode }) {
13  const [theme, setTheme] = useState<Theme>(() => {
14    // Read saved preference from localStorage on initial load
15    const saved = localStorage.getItem("theme");
16    return (saved === "dark" ? "dark" : "light") as Theme;
17  });
18
19  const toggleTheme = () => {
20    setTheme(prev => {
21      const next = prev === "light" ? "dark" : "light";
22      localStorage.setItem("theme", next);
23      // Update the HTML element class for Tailwind dark mode
24      document.documentElement.classList.toggle("dark", next === "dark");
25      return next;
26    });
27  };
28
29  // Stabilize the value object to prevent unnecessary consumer re-renders
30  const value = useMemo(() => ({ theme, toggleTheme }), [theme]);
31
32  return (
33    <ThemeContext.Provider value={value}>
34      {children}
35    </ThemeContext.Provider>
36  );
37}
38
39export function useTheme() {
40  const context = useContext(ThemeContext);
41  if (context === undefined) {
42    throw new Error("useTheme must be used within a ThemeProvider");
43  }
44  return context;
45}

Best practices to prevent this

• Start with React Context for simple shared state like auth, theme, and language — it is built into React and requires no extra packages
• Always throw an error in your custom hook if the context is undefined — this catches missing Providers early instead of causing cryptic 'cannot read property' errors
• Wrap context values in useMemo to prevent unnecessary re-renders in consumer components
• Keep each context focused on one concern (auth, theme, cart) instead of creating a single giant context for everything
• Use Zustand instead of Context when you need state that persists across route changes without a Provider wrapper
• Avoid Redux in Lovable projects unless you specifically need its middleware ecosystem — it adds complexity with no benefit for typical use cases
• Place Providers in App.tsx outside the BrowserRouter so both route components and navigation components can access the shared state
• Type your context with TypeScript interfaces so the useContext hook provides autocomplete and compile-time safety

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns