Skip to main content

useLayout Deep Dive

The useLayout hook is a specialized data observer used to access global layout configuration or status within an Archibald application.

Core Concepts​

In Archibald, the LayoutId is a special reserved key in the global DataClient cache used to store layout-related metadata (e.g., current active layout template, sidebar visibility, or theme settings).

import { useLayout } from '@archibald/storefront';

function Sidebar() {
    const layout = useLayout<{ isSidebarVisible: boolean }>();

    if (!layout?.isSidebarVisible) return null;

    return <aside>...</aside>;
}

How it Works Step-by-Step​

  1. Cache Subscription: When called, the hook retrieves the global DataClient instance.
  2. Lookup: It performs a synchronous lookup in the cache using the reserved LayoutId constant.
  3. Return: If an entry exists for the LayoutId, its data is returned.
  4. Reactivity: Because it uses the DataClient, the hook will automatically trigger a re-render if the layout data in the cache is updated by another component or a manual client.set(LayoutId, ...) call.

Best Practice: Use useLayout for UI-specific global state that needs to persist across route transitions but is not directly tied to a specific CMS page's content.