fix: move useMemo before early returns to prevent React error #310

[Copilot]

RecordDetailView crashes with React error #310 ("Rendered more hooks than during the previous render") because the useMemo(detailSchema) hook is placed after two conditional early returns (isLoading, !objectDef). First render calls 24 hooks and returns early; next render calls 25, triggering the error.

• Move useMemo before early returns with a !objectDef guard inside the callback returning a minimal unused schema
• Fold intermediate variables (primaryField, sections, highlightFields, sectionGroups, related, recordHeaderActions) into the useMemo callback — they were only consumed by detailSchema anyway

// Before: useMemo after early returns = inconsistent hook count
if (isLoading) return <SkeletonDetail />;
if (!objectDef) return <Empty />;
const primaryField = ...;
const sections = ...;
const detailSchema = useMemo(() => ({ ... }), [...]); // ← hook #25, skipped on early return

// After: all hooks called unconditionally
const detailSchema = useMemo(() => {
  if (!objectDef) return { type: 'detail-view' } as DetailViewSchema;
  // ... all computation moved inside
}, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey]);

if (isLoading) return <SkeletonDetail />;
if (!objectDef) return <Empty />;

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
objectui	Ready	Preview, Comment	Mar 9, 2026 2:16am
objectui-demo	Ready	Preview, Comment	Mar 9, 2026 2:16am
objectui-storybook	Ready	Preview, Comment	Mar 9, 2026 2:16am

[Copilot]

Pull request overview

Fixes a React hook-order crash in RecordDetailView by ensuring useMemo(detailSchema) is always called before any conditional early returns, keeping the hook count consistent across renders.

Changes:

• Moved useMemo(detailSchema) above isLoading / !objectDef early returns to prevent React error #310.
• Added an internal !objectDef guard inside the memo callback to safely return a minimal schema.
• Inlined intermediate schema-building variables into the useMemo callback.

[Copilot]

detailSchema's useMemo callback closes over objectDef (label/views/actions/fields), childRelations, and t(...), but the dependency array only includes objectDef?.name, pureRecordId, childRelatedData, and actionRefreshKey (and disables exhaustive-deps). This can leave detailSchema stale if the object definition updates without a name change, if reverse relations change, or if translations change. Prefer adding the actual referenced values to the deps (e.g., objectDef, childRelations, t) and removing the eslint disable so schema stays in sync.

Suggested change

	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [objectDef?.name, pureRecordId, childRelatedData, actionRefreshKey]);
	}, [
	objectDef,
	childRelations,
	t,
	pureRecordId,
	childRelatedData,
	actionRefreshKey,
	]);