Managing Global State in Lovable Applications

Why state management becomes inconsistent in Lovable apps

As Lovable projects grow, state that was initially local to one component starts being needed in multiple places. A user's auth status needs to be checked by the navigation bar, the dashboard page, and API call functions. A shopping cart needs to be accessible from the product listing, the cart sidebar, and the checkout page. Without a global state strategy, you end up with prop drilling — passing state through 5+ levels of components just to get it where it is needed. Lovable's AI often generates prop drilling patterns because it solves the immediate problem of 'get this data to that component.' But prop drilling makes the code fragile: adding a new component in the middle of the chain requires updating every component's props. The choice between React Context, Zustand, and Supabase real-time depends on the type of state. Authentication and theme are infrequently changing data used everywhere — perfect for Context. Shopping carts, filters, and UI state change frequently and benefit from Zustand's selective re-rendering. Data that must sync across multiple users in real time should use Supabase subscriptions.

• Props are being drilled through 3+ component levels to share state between distant components
• Multiple components maintain their own copy of the same data, leading to inconsistencies
• Authentication state is checked differently in different parts of the app
• No central store exists, so shared data like user preferences or cart items is scattered
• Lovable generates local state patterns even when global state would be more appropriate

Error messages you might see

Before you start

• A Lovable project where multiple components need access to the same data
• Understanding of which data is shared across your app (auth, cart, preferences, etc.)
• Familiarity with React hooks (useState, useEffect, useContext)

How to fix it

// Prop drilling auth through 4 levels:
// App → Layout → Header → UserMenu → Avatar
// Every component in the chain needs auth props

// Context: any component reads auth directly
// AuthProvider wraps App
// Header uses useAuth() → no props needed
// UserMenu uses useAuth() → no props needed
// Dashboard uses useAuth() → no props needed

// Context for cart state — causes unnecessary re-renders:
// When cartItems changes, EVERY component using CartContext re-renders
// Even components that only read totalItems

// Zustand store — selective re-rendering:
import { create } from 'zustand';
const useCartStore = create((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  totalItems: () => useCartStore.getState().items.length,
}));
// In CartBadge: only re-renders when items.length changes
const count = useCartStore((state) => state.items.length);

// Polling for updates every 5 seconds:
useEffect(() => {
  const interval = setInterval(async () => {
    const { data } = await supabase.from('messages').select();
    setMessages(data);
  }, 5000);
  return () => clearInterval(interval);
}, []);

// Real-time subscription — instant updates:
useEffect(() => {
  // Fetch initial data
  supabase.from('messages').select().then(({ data }) => setMessages(data ?? []));
  // Subscribe to changes
  const channel = supabase
    .channel('messages')
    .on('postgres_changes', { event: '*', schema: 'public', table: 'messages' },
      (payload) => {
        if (payload.eventType === 'INSERT') {
          setMessages((prev) => [...prev, payload.new]);
        }
      })
    .subscribe();
  return () => { supabase.removeChannel(channel); };
}, []);

// Everything in one context — causes cascading re-renders:
// AuthContext contains: user, theme, cart, notifications, filters
// Any change re-renders ALL components using this context

// Separated by concern:
// AuthContext → user, isAuthenticated, login/logout (React Context)
// ThemeContext → theme, toggleDarkMode (React Context)
// useCartStore → items, addItem, removeItem (Zustand)
// useFilterStore → searchTerm, category, sortBy (Zustand)
// messages → real-time subscription (Supabase)
// formData → local useState (component-scoped)

Complete code example

1import { create } from "zustand";
2
3type CartItem = {
4  id: string;
5  name: string;
6  price: number;
7  quantity: number;
8};
9
10type CartStore = {
11  items: CartItem[];
12  addItem: (item: Omit<CartItem, "quantity">) => void;
13  removeItem: (id: string) => void;
14  updateQuantity: (id: string, quantity: number) => void;
15  clearCart: () => void;
16  totalPrice: () => number;
17  totalItems: () => number;
18};
19
20export const useCartStore = create<CartStore>((set, get) => ({
21  items: [],
22
23  addItem: (item) =>
24    set((state) => {
25      const existing = state.items.find((i) => i.id === item.id);
26      if (existing) {
27        return {
28          items: state.items.map((i) =>
29            i.id === item.id ? { ...i, quantity: i.quantity + 1 } : i
30          ),
31        };
32      }
33      return { items: [...state.items, { ...item, quantity: 1 }] };
34    }),
35
36  removeItem: (id) =>
37    set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
38
39  updateQuantity: (id, quantity) =>
40    set((state) => ({
41      items: state.items.map((i) => (i.id === id ? { ...i, quantity } : i)),
42    })),
43
44  clearCart: () => set({ items: [] }),
45
46  totalPrice: () =>
47    get().items.reduce((sum, item) => sum + item.price * item.quantity, 0),
48
49  totalItems: () =>
50    get().items.reduce((sum, item) => sum + item.quantity, 0),
51}));

Best practices to prevent this

• Use React Context only for infrequently changing data (auth, theme) — it re-renders all consumers on every change
• Use Zustand for frequently changing shared state (cart, filters, notifications) — it supports selective re-rendering
• Use Supabase real-time subscriptions for data that must sync across multiple users in real time
• Keep local component state (form inputs, toggle visibility) in useState — not every piece of state needs to be global
• Wrap Context providers around the entire app in App.tsx to ensure all components can access them
• With Zustand, use selectors (state => state.items.length) to re-render only when the selected value changes
• Always clean up Supabase subscriptions in useEffect return functions to prevent memory leaks
• Do not put everything in one store or context — separate by concern for maintainability

Still stuck?

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

Related error patterns