marmelab/react-admin · error · Error

useSetInspectorTitle cannot be called outside of a Preferenc

Error message

useSetInspectorTitle cannot be called outside of a PreferencesEditorContext

What it means

useSetInspectorTitle sets the title of the preferences inspector panel; it relies on the PreferencesEditorContext via usePreferencesEditor. Even though the message suggests a separate 'PreferencesEditorContext', the actual guard fires when usePreferencesEditor returned no context, i.e. the hook is called outside the preferences editor setup.

Source

Thrown at packages/ra-core/src/preferences/useSetInspectorTitle.ts:13

import { useEffect } from 'react';
import { usePreferencesEditor } from './usePreferencesEditor';

/**
 * Set inspector title on mount
 *
 * @example
 * useSetInspectorTitle('Datagrid');
 */
export const useSetInspectorTitle = (title: string, options?: any) => {
    const preferencesEditorContext = usePreferencesEditor();
    if (!preferencesEditorContext) {
        throw new Error(
            'useSetInspectorTitle cannot be called outside of a PreferencesEditorContext'
        );
    }
    const { setTitle } = preferencesEditorContext;

    useEffect(() => {
        setTitle(title, options);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [title, JSON.stringify(options), setTitle]);
};

View on GitHub (pinned to 051f511bb0)

Solutions

1. Only call useSetInspectorTitle from components rendered inside the preferences editor (the editor prop of <Configurable>).
2. Enable the preferences editor in <Admin> (supported build/configuration) so the context exists.
3. In tests, wrap the component with PreferencesEditorContext.Provider supplying a setTitle function.

Example fix

// before (used in page component)
const Datagrid = () => {
    useSetInspectorTitle('Datagrid'); // throws
    return <RaDatagrid {...props} />;
};

// after (used in the editor component)
const DatagridEditor = () => {
    useSetInspectorTitle('Datagrid');
    return <PreferencesEditor />;
};
<Configurable editor={<DatagridEditor />}>
    <Datagrid />
</Configurable>;

import { useContext } from 'react';
import { PreferencesEditorContext } from 'ra-core';
const ctx = useContext(PreferencesEditorContext);
if (ctx) {
    useSetInspectorTitle('Datagrid');
}

const hasPreferencesEditor = (v: PreferencesEditorContextValue | null): v is PreferencesEditorContextValue => v != null;

When it happens

Trigger: Calling useSetInspectorTitle('Datagrid') from a component not rendered inside the preferences editor context — e.g. a custom DataGrid configuration component used outside <Configurable>'s editor, or when the Admin has no preferences editor enabled.

Common situations: Writing a custom DatagridConfig editor component but importing/placing it in the rendered page instead of the Configurable editor slot; using the hook in an app with a custom Admin without inspector support; tests without the provider.

Related errors

• usePreference cannot be used outside of a Configurable compo
• usePreferencesEditor must be used within a PreferencesEditor
• useTranslatableContext must be used inside a TranslatableCon
• useCloseNotification must be used within a CloseNotification
• Cannot call an event handler while rendering.

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/75762dd6644d0149. Report an issue: GitHub.