marmelab/react-admin · error · Error

useSetInspectorTitle cannot be called outside of a…

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.

Solutions

Only call useSetInspectorTitle from components rendered inside the preferences editor (the editor prop of <Configurable>).
Enable the preferences editor in <Admin> (supported build/configuration) so the context exists.
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>;

Defensive patterns

Strategy: validation

Validate before calling

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

Type guard

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

Prevention

Call useSetInspectorTitle only from Configurable editor components.
Never call it from page-level rendered components.
In tests, stub the context with a setTitle spy.

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

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

Appendix: 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)