shadcn-ui/ui · error · Error

useLocks must be used within LocksProvider

Error message

useLocks must be used within LocksProvider

What it means

`useLocks` reads `LocksContext`, which `LocksProvider` populates via `useMemo(() => ({ locks, isLocked, toggleLock }), [...])`. A consumer mounted outside the provider gets undefined from `useContext` and throws — the lock API must never be partially absent while a panel checks `isLocked`.

Source

Thrown at apps/v4/app/(app)/(create)/hooks/use-locks.tsx:56

      } else {
        next.add(param)
      }
      return next
    })
  }, [])

  const value = React.useMemo(
    () => ({ locks, isLocked, toggleLock }),
    [locks, isLocked, toggleLock]
  )

  return <LocksContext value={value}>{children}</LocksContext>
}

export function useLocks() {
  const context = React.useContext(LocksContext)
  if (!context) {
    throw new Error("useLocks must be used within LocksProvider")
  }
  return context
}

View on GitHub (pinned to efac598707)

Solutions

1. Mount `<LocksProvider>` above every component that calls `useLocks()`.
2. Keep the provider at a stable point in the tree (near HistoryProvider) so lock state is shared across all panes.
3. In tests, decorate with the provider.

Example fix

// before
<LockablePanel />

// after
<LocksProvider>
  <LockablePanel />
</LocksProvider>

render(<LocksProvider>{<LockablePanel/>}</LocksProvider>)

import React from "react"
import { LocksContext } from "@/(app)/(create)/hooks/use-locks"
const hasLocks = () => React.useContext(LocksContext) != null

try { useLocks() } catch (e) { if (e.message.includes("LocksProvider")) {/*remount provider*/} throw e }

When it happens

Trigger: Calling `useLocks()` (e.g. `const { isLocked, toggleLock } = useLocks()`) in a component not under `<LocksProvider>`. Common when a panel that respects locks is rendered in isolation or hoisted above the provider.

Common situations: Splitting the create surface into separately mounted panes; rendering a lock-aware component inside a portal detached from the provider tree; tests that render the pane alone.

Related errors

• useLocks must be used within LocksProvider
• usePreviewOverride must be used within a PreviewOverrideProv
• useHistory must be used within HistoryProvider
• usePreviewOverride must be used within a TypesetPreviewOverr
• useHistory must be used within TypesetHistoryProvider

AI-assisted analysis of shadcn-ui/ui@efac598707 (2026-08-12). Data as JSON: /api/errors/84da324d954fbc0b. Report an issue: GitHub.