@open-mercato/ui 0.6.8-develop.7059.1.f45d1ae6a1 → 0.6.8-develop.7063.1.664341cf65

package/dist/backend/injection/useRegisteredComponent.js

@@ -21,6 +21,19 @@ class ReplacementErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+const composedWrappers = /* @__PURE__ */ new WeakMap();
+function applyWrapper(wrapper, Base) {
+  let byBase = composedWrappers.get(wrapper);
+  if (!byBase) {
+    byBase = /* @__PURE__ */ new WeakMap();
+    composedWrappers.set(wrapper, byBase);
+  }
+  const cached = byBase.get(Base);
+  if (cached) return cached;
+  const composed = wrapper(Base);
+  byBase.set(Base, composed);
+  return composed;
+}
 function resolveComponent(componentId, fallback, userFeatures) {
   const entry = getComponentEntry(componentId);
   const original = entry?.component ?? fallback ?? null;
@@ -48,7 +61,7 @@ function resolveComponent(componentId, fallback, userFeatures) {
     if ("propsTransform" in override) transforms.push(override.propsTransform);
   }
   const base = replacement ?? original;
-  const wrapped = wrappers.reduce((acc, wrapper) => wrapper(acc), base);
+  const wrapped = wrappers.reduce((acc, wrapper) => applyWrapper(wrapper, acc), base);
   return {
     original,
     wrapped,
@@ -58,13 +71,17 @@ function resolveComponent(componentId, fallback, userFeatures) {
   };
 }
 function useRegisteredComponent(componentId, fallback) {
-  return React.useMemo(() => {
+  const fallbackRef = React.useRef(fallback);
+  fallbackRef.current = fallback;
+  const registered = React.useRef(null);
+  if (!registered.current || registered.current.componentId !== componentId) {
     const Registered = (props) => {
       const userFeatures = useOverrideUserFeatures();
       const overrideRevision = useOverrideRegistryRevision();
+      const currentFallback = fallbackRef.current;
       const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
-        () => resolveComponent(componentId, fallback, userFeatures),
-        [overrideRevision, userFeatures]
+        () => resolveComponent(componentId, currentFallback, userFeatures),
+        [currentFallback, overrideRevision, userFeatures]
       );
       if (!original || !wrapped) return null;
       const transformed = transforms.reduce((current, transform) => transform(current), props);
@@ -88,8 +105,9 @@ function useRegisteredComponent(componentId, fallback) {
       );
     };
     Registered.displayName = `RegisteredComponent(${componentId})`;
-    return Registered;
-  }, [componentId, fallback]);
+    registered.current = { componentId, Component: Registered };
+  }
+  return registered.current.Component;
 }
 var useRegisteredComponent_default = useRegisteredComponent;
 export {

package/dist/backend/injection/useRegisteredComponent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/backend/injection/useRegisteredComponent.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'useRegisteredComponent' })\n\nclass ReplacementErrorBoundary extends React.Component<\n  { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode },\n  { hasError: boolean }\n> {\n  constructor(props: { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode }) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(): { hasError: boolean } {\n    return { hasError: true }\n  }\n\n  componentDidCatch(error: unknown): void {\n    this.props.onError(error)\n  }\n\n  render() {\n    if (this.state.hasError) return this.props.fallback\n    return this.props.children\n  }\n}\n\ntype Resolution<TProps> = {\n  original: ComponentType<TProps> | null\n  wrapped: ComponentType<TProps> | null\n  transforms: Array<(props: TProps) => TProps>\n  replacementOverride: ComponentOverride | null\n  replacementModule: string\n}\n\nfunction resolveComponent<TProps>(\n  componentId: string,\n  fallback: ComponentType<TProps> | undefined,\n  userFeatures: readonly string[],\n): Resolution<TProps> {\n  const entry = getComponentEntry(componentId)\n  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null\n  if (!original) {\n    if (process.env.NODE_ENV !== 'production' && !fallback) {\n      logger.warn('Component is not registered', { componentId })\n    }\n    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }\n  }\n\n  const overrides = getComponentOverrides(componentId, userFeatures)\n  const replacementOverrides = overrides.filter((override) => 'replacement' in override)\n  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {\n    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })\n  }\n\n  let replacement: ComponentType<TProps> | null = null\n  let replacementOverride: ComponentOverride | null = null\n  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []\n  const transforms: Array<(props: TProps) => TProps> = []\n\n  for (const override of overrides) {\n    if ('replacement' in override) {\n      replacement = override.replacement as ComponentType<TProps>\n      replacementOverride = override\n    }\n    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)\n    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)\n  }\n\n  const base = replacement ?? original\n  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)\n\n  return {\n    original,\n    wrapped,\n    transforms,\n    replacementOverride,\n    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',\n  }\n}\n\n/**\n * The returned component's identity must depend only on `componentId` and\n * `fallback` \u2014 never on the override registry.\n *\n * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically\n * imports the generated override module and hands the provider a fresh array,\n * which bumps the registry revision some time after first paint. Resolving the\n * component in a `useMemo` keyed on that revision handed callers a brand-new\n * function on every bump, so React saw a different element type at that\n * position and unmounted the whole subtree \u2014 discarding its DOM and state. On\n * the login form that threw away credentials the user had already typed\n * (#5037), and the same hazard applied to every host of a registered section.\n *\n * Resolution therefore happens *inside* a stable component. When the revision\n * carries no override for this id, `wrapped` keeps its previous identity and\n * React reconciles in place; only a genuine replacement or wrapper swaps the\n * rendered type, where a remount is the correct behaviour.\n */\nexport function useRegisteredComponent<TProps>(\n  componentId: string,\n  fallback?: ComponentType<TProps>,\n): ComponentType<TProps> {\n  return React.useMemo(() => {\n    const Registered = (props: TProps) => {\n      const userFeatures = useOverrideUserFeatures()\n      const overrideRevision = useOverrideRegistryRevision()\n      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(\n        () => resolveComponent<TProps>(componentId, fallback, userFeatures),\n        [overrideRevision, userFeatures],\n      )\n\n      if (!original || !wrapped) return null\n\n      const transformed = transforms.reduce((current, transform) => transform(current), props)\n      const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)\n      if (\n        process.env.NODE_ENV !== 'production'\n        && replacementOverride\n        && 'replacement' in replacementOverride\n      ) {\n        const validation = replacementOverride.propsSchema.safeParse(transformed)\n        if (!validation.success) {\n          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })\n          return Fallback\n        }\n      }\n      return (\n        <ReplacementErrorBoundary\n          fallback={Fallback}\n          onError={(error) => {\n            logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })\n          }}\n        >\n          {React.createElement(wrapped as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)}\n        </ReplacementErrorBoundary>\n      )\n    }\n\n    Registered.displayName = `RegisteredComponent(${componentId})`\n    return Registered\n  }, [componentId, fallback])\n}\n\nexport default useRegisteredComponent\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport type { ComponentType } from 'react'\nimport type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { getComponentEntry, getComponentOverrides } from '@open-mercato/shared/modules/widgets/component-registry'\nimport { useOverrideRegistryRevision, useOverrideUserFeatures } from './ComponentOverrideProvider'\nimport { createLogger } from '@open-mercato/shared/lib/logger'\n\nconst logger = createLogger('ui').child({ component: 'useRegisteredComponent' })\n\nclass ReplacementErrorBoundary extends React.Component<\n  { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode },\n  { hasError: boolean }\n> {\n  constructor(props: { fallback: React.ReactNode; onError: (error: unknown) => void; children: React.ReactNode }) {\n    super(props)\n    this.state = { hasError: false }\n  }\n\n  static getDerivedStateFromError(): { hasError: boolean } {\n    return { hasError: true }\n  }\n\n  componentDidCatch(error: unknown): void {\n    this.props.onError(error)\n  }\n\n  render() {\n    if (this.state.hasError) return this.props.fallback\n    return this.props.children\n  }\n}\n\ntype Resolution<TProps> = {\n  original: ComponentType<TProps> | null\n  wrapped: ComponentType<TProps> | null\n  transforms: Array<(props: TProps) => TProps>\n  replacementOverride: ComponentOverride | null\n  replacementModule: string\n}\n\n/**\n * Calling a wrapper override returns a fresh component every time, which would\n * reintroduce the identity churn this hook exists to avoid. Memoizing per\n * (wrapper, wrapped component) pair keeps the composed component referentially\n * stable for as long as both inputs are.\n */\nconst composedWrappers = new WeakMap<object, WeakMap<object, unknown>>()\n\nfunction applyWrapper<TProps>(\n  wrapper: (Original: ComponentType<TProps>) => ComponentType<TProps>,\n  Base: ComponentType<TProps>,\n): ComponentType<TProps> {\n  let byBase = composedWrappers.get(wrapper)\n  if (!byBase) {\n    byBase = new WeakMap<object, unknown>()\n    composedWrappers.set(wrapper, byBase)\n  }\n  const cached = byBase.get(Base)\n  if (cached) return cached as ComponentType<TProps>\n  const composed = wrapper(Base)\n  byBase.set(Base, composed)\n  return composed\n}\n\nfunction resolveComponent<TProps>(\n  componentId: string,\n  fallback: ComponentType<TProps> | undefined,\n  userFeatures: readonly string[],\n): Resolution<TProps> {\n  const entry = getComponentEntry(componentId)\n  const original = (entry?.component as ComponentType<TProps> | undefined) ?? fallback ?? null\n  if (!original) {\n    if (process.env.NODE_ENV !== 'production' && !fallback) {\n      logger.warn('Component is not registered', { componentId })\n    }\n    return { original: null, wrapped: null, transforms: [], replacementOverride: null, replacementModule: 'unknown' }\n  }\n\n  const overrides = getComponentOverrides(componentId, userFeatures)\n  const replacementOverrides = overrides.filter((override) => 'replacement' in override)\n  if (process.env.NODE_ENV !== 'production' && replacementOverrides.length > 1) {\n    logger.warn('Multiple replacements registered; highest-priority replacement is applied', { componentId })\n  }\n\n  let replacement: ComponentType<TProps> | null = null\n  let replacementOverride: ComponentOverride | null = null\n  const wrappers: Array<(Original: ComponentType<TProps>) => ComponentType<TProps>> = []\n  const transforms: Array<(props: TProps) => TProps> = []\n\n  for (const override of overrides) {\n    if ('replacement' in override) {\n      replacement = override.replacement as ComponentType<TProps>\n      replacementOverride = override\n    }\n    if ('wrapper' in override) wrappers.push(override.wrapper as (Original: ComponentType<TProps>) => ComponentType<TProps>)\n    if ('propsTransform' in override) transforms.push(override.propsTransform as (props: TProps) => TProps)\n  }\n\n  const base = replacement ?? original\n  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)\n\n  return {\n    original,\n    wrapped,\n    transforms,\n    replacementOverride,\n    replacementModule: replacementOverride?.metadata?.module ?? 'unknown',\n  }\n}\n\n/**\n * The returned component's identity must depend only on `componentId` \u2014 never\n * on the override registry, and never on the `fallback` a caller happens to\n * pass on this render.\n *\n * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically\n * imports the generated override module and hands the provider a fresh array,\n * which bumps the registry revision some time after first paint. Resolving the\n * component in a `useMemo` keyed on that revision handed callers a brand-new\n * function on every bump, so React saw a different element type at that\n * position and unmounted the whole subtree \u2014 discarding its DOM and state. On\n * the login form that threw away credentials the user had already typed\n * (#5037), and the same hazard applied to every host of a registered section.\n *\n * Resolution therefore happens *inside* a stable component. When the revision\n * carries no override for this id, `wrapped` keeps its previous identity and\n * React reconciles in place; only a genuine replacement or wrapper swaps the\n * rendered type, where a remount is the correct behaviour.\n *\n * The identity is held in a ref rather than a `useMemo`, because `useMemo` is a\n * performance hint React is free to discard, and identity here is a correctness\n * requirement rather than an optimisation. `fallback` is read through a ref for\n * the same reason: a host that builds its fallback inline would otherwise swap\n * the component this hook hands back on every render. That still cannot save a\n * subtree rendered *through* such a fallback \u2014 the fallback itself is then the\n * element type, and only the host can stabilise it \u2014 but it keeps the churn\n * from spreading to hosts whose id does resolve to a registered component.\n */\nexport function useRegisteredComponent<TProps>(\n  componentId: string,\n  fallback?: ComponentType<TProps>,\n): ComponentType<TProps> {\n  const fallbackRef = React.useRef<ComponentType<TProps> | undefined>(fallback)\n  fallbackRef.current = fallback\n\n  const registered = React.useRef<{ componentId: string; Component: ComponentType<TProps> } | null>(null)\n  if (!registered.current || registered.current.componentId !== componentId) {\n    const Registered = (props: TProps) => {\n      const userFeatures = useOverrideUserFeatures()\n      const overrideRevision = useOverrideRegistryRevision()\n      const currentFallback = fallbackRef.current\n      const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(\n        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),\n        [currentFallback, overrideRevision, userFeatures],\n      )\n\n      if (!original || !wrapped) return null\n\n      const transformed = transforms.reduce((current, transform) => transform(current), props)\n      const Fallback = React.createElement(original as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)\n      if (\n        process.env.NODE_ENV !== 'production'\n        && replacementOverride\n        && 'replacement' in replacementOverride\n      ) {\n        const validation = replacementOverride.propsSchema.safeParse(transformed)\n        if (!validation.success) {\n          logger.error('Props schema validation failed for replacement', { componentId, module: replacementModule, issues: validation.error.format() })\n          return Fallback\n        }\n      }\n      return (\n        <ReplacementErrorBoundary\n          fallback={Fallback}\n          onError={(error) => {\n            logger.error('Component replacement failed', { componentId, module: replacementModule, err: error })\n          }}\n        >\n          {React.createElement(wrapped as React.ComponentType<Record<string, unknown>>, transformed as Record<string, unknown>)}\n        </ReplacementErrorBoundary>\n      )\n    }\n\n    Registered.displayName = `RegisteredComponent(${componentId})`\n    registered.current = { componentId, Component: Registered }\n  }\n\n  return registered.current.Component\n}\n\nexport default useRegisteredComponent\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/ui",
-  "version": "0.6.8-develop.7059.1.f45d1ae6a1",
+  "version": "0.6.8-develop.7063.1.664341cf65",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -155,14 +155,14 @@
     "remark-gfm": "^4.0.1"
   },
   "peerDependencies": {
-    "@open-mercato/shared": "0.6.8-develop.7059.1.f45d1ae6a1",
+    "@open-mercato/shared": "0.6.8-develop.7063.1.664341cf65",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-is": ">=18.0.0"
   },
   "devDependencies": {
     "@figma/code-connect": "^1.3.4",
-    "@open-mercato/shared": "0.6.8-develop.7059.1.f45d1ae6a1",
+    "@open-mercato/shared": "0.6.8-develop.7063.1.664341cf65",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.1",

package/src/backend/__tests__/useRegisteredComponent.identity.test.tsx

@@ -0,0 +1,305 @@
+/** @jest-environment jsdom */
+import * as React from 'react'
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { z } from 'zod'
+import {
+  registerComponent,
+  registerComponentOverrides,
+} from '@open-mercato/shared/modules/widgets/component-registry'
+import type { ComponentOverride } from '@open-mercato/shared/modules/widgets/component-registry'
+import { ComponentOverrideProvider, useOverrideUserFeatures } from '../injection/ComponentOverrideProvider'
+import { useRegisteredComponent } from '../injection/useRegisteredComponent'
+
+jest.mock('../utils/apiCall', () => ({
+  apiCall: jest.fn(async () => ({ ok: true, result: { granted: ['acme.override'] } })),
+}))
+
+type FieldProps = { label?: string }
+
+const mounts = { count: 0 }
+
+function StatefulField({ label }: FieldProps) {
+  React.useEffect(() => {
+    mounts.count += 1
+  }, [])
+  return (
+    <label>
+      {label ?? 'field'}
+      <input data-testid="field" defaultValue="" />
+    </label>
+  )
+}
+
+function FeaturesProbe() {
+  const features = useOverrideUserFeatures()
+  return <span data-testid="features">{features.join(',')}</span>
+}
+
+function typeIntoField(value: string) {
+  fireEvent.change(screen.getByTestId('field'), { target: { value } })
+}
+
+describe('useRegisteredComponent identity', () => {
+  beforeEach(() => {
+    mounts.count = 0
+    registerComponentOverrides([])
+  })
+
+  afterEach(() => {
+    registerComponentOverrides([])
+  })
+
+  it('keeps the subtree mounted when override user features resolve after first paint', async () => {
+    const componentId = 'test.identity.features'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    // The override targets a different component, so the resolution result for
+    // `componentId` is identical before and after the feature grant arrives.
+    const overrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.other' },
+        priority: 10,
+        features: ['acme.override'],
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    render(
+      <ComponentOverrideProvider overrides={overrides}>
+        <FeaturesProbe />
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('admin@acme.com')
+    expect(mounts.count).toBe(1)
+
+    await waitFor(() => expect(screen.getByTestId('features')).toHaveTextContent('acme.override'))
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('admin@acme.com')
+  })
+
+  it('keeps the subtree mounted when overrides are registered late', async () => {
+    const componentId = 'test.identity.late'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId: 'test.identity.late.other' },
+        priority: 10,
+        metadata: { module: 'test' },
+        propsTransform: (props: unknown) => props,
+      } as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    typeIntoField('typed before the registry settled')
+    expect(mounts.count).toBe(1)
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed before the registry settled')
+  })
+
+  it('keeps a wrapper-wrapped subtree mounted across override re-registrations', async () => {
+    const componentId = 'test.identity.wrapped'
+    registerComponent({ id: componentId, component: StatefulField, metadata: { module: 'test' } })
+
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    typeIntoField('typed inside a wrapped section')
+    expect(mounts.count).toBe(1)
+
+    // A new array with the same wrapper function — what a provider re-render looks like.
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={buildOverrides()}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(mounts.count).toBe(1)
+    expect(screen.getByTestId('field')).toHaveValue('typed inside a wrapped section')
+  })
+
+  it('composes a wrapper at most once per (wrapper, wrapped component) pair', async () => {
+    // The user-visible consequence is covered by the test above; this one pins the
+    // cache's own contract, so that dropping the memoization fails loudly and the
+    // purity requirement documented on the `wrapper` override member stays executable.
+    const componentId = 'test.identity.wrapper-composition'
+    const Base = (props: FieldProps) => <StatefulField {...props} />
+    Base.displayName = 'Base'
+    registerComponent({ id: componentId, component: Base, metadata: { module: 'test' } })
+
+    let compositions = 0
+    const wrapper = (Original: React.ComponentType<FieldProps>) => {
+      compositions += 1
+      const Wrapped = (props: FieldProps) => (
+        <div data-testid="wrapped">
+          <Original {...props} />
+        </div>
+      )
+      Wrapped.displayName = 'Wrapped'
+      return Wrapped
+    }
+
+    const buildOverrides = (): ComponentOverride[] => [
+      { target: { componentId }, priority: 10, metadata: { module: 'test' }, wrapper } as unknown as ComponentOverride,
+    ]
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={buildOverrides()}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+
+    expect(screen.getByTestId('wrapped')).toBeInTheDocument()
+    expect(compositions).toBe(1)
+
+    for (let pass = 0; pass < 2; pass += 1) {
+      await act(async () => {
+        rerender(
+          <ComponentOverrideProvider overrides={buildOverrides()}>
+            <Consumer />
+          </ComponentOverrideProvider>,
+        )
+      })
+    }
+
+    expect(compositions).toBe(1)
+    expect(mounts.count).toBe(1)
+  })
+
+  it('still applies a replacement that becomes active after the first render', async () => {
+    const componentId = 'test.identity.replacement'
+    const Original = () => <span data-testid="rendered">original</span>
+    const Replacement = () => <span data-testid="rendered">replacement</span>
+    registerComponent({ id: componentId, component: Original, metadata: { module: 'test' } })
+
+    function Consumer() {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId)
+      return <Resolved />
+    }
+
+    const lateOverrides: ComponentOverride[] = [
+      {
+        target: { componentId },
+        priority: 100,
+        metadata: { module: 'test' },
+        replacement: Replacement,
+        propsSchema: z.object({}).passthrough(),
+      } as unknown as ComponentOverride,
+    ]
+
+    const { rerender } = render(
+      <ComponentOverrideProvider overrides={[]}>
+        <Consumer />
+      </ComponentOverrideProvider>,
+    )
+    expect(screen.getByTestId('rendered')).toHaveTextContent('original')
+
+    await act(async () => {
+      rerender(
+        <ComponentOverrideProvider overrides={lateOverrides}>
+          <Consumer />
+        </ComponentOverrideProvider>,
+      )
+    })
+
+    expect(screen.getByTestId('rendered')).toHaveTextContent('replacement')
+  })
+
+  it('cannot save a subtree whose host re-creates the fallback on every render', () => {
+    const componentId = 'test.identity.inline-fallback'
+
+    function Consumer({ label }: { label: string }) {
+      // A fallback declared inside the host's render body is a new function on
+      // every render, and with no component registered under this id it *is*
+      // the component being rendered. The hook keeps its own identity stable,
+      // but it cannot make the caller's fallback stable — React sees a new
+      // element type below and must remount. Hosts that care about the state
+      // under an unregistered id have to hoist the fallback out of render.
+      const Fallback = (props: FieldProps) => <StatefulField {...props} />
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, Fallback)
+      return <Resolved label={label} />
+    }
+
+    const { rerender } = render(<Consumer label="first" />)
+    typeIntoField('typed against an inline fallback')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer label="second" />)
+
+    expect(mounts.count).toBe(2)
+  })
+
+  it('remounts when the host asks for a different component id', () => {
+    function Consumer({ componentId }: { componentId: string }) {
+      const Resolved = useRegisteredComponent<FieldProps>(componentId, StatefulField)
+      return <Resolved />
+    }
+
+    const { rerender } = render(<Consumer componentId="test.identity.provider-a" />)
+    typeIntoField('provider a input')
+    expect(mounts.count).toBe(1)
+
+    rerender(<Consumer componentId="test.identity.provider-b" />)
+
+    expect(mounts.count).toBe(2)
+    expect(screen.getByTestId('field')).toHaveValue('')
+  })
+})

package/src/backend/injection/useRegisteredComponent.tsx

@@ -40,6 +40,30 @@ type Resolution<TProps> = {
   replacementModule: string
 }
 
+/**
+ * Calling a wrapper override returns a fresh component every time, which would
+ * reintroduce the identity churn this hook exists to avoid. Memoizing per
+ * (wrapper, wrapped component) pair keeps the composed component referentially
+ * stable for as long as both inputs are.
+ */
+const composedWrappers = new WeakMap<object, WeakMap<object, unknown>>()
+
+function applyWrapper<TProps>(
+  wrapper: (Original: ComponentType<TProps>) => ComponentType<TProps>,
+  Base: ComponentType<TProps>,
+): ComponentType<TProps> {
+  let byBase = composedWrappers.get(wrapper)
+  if (!byBase) {
+    byBase = new WeakMap<object, unknown>()
+    composedWrappers.set(wrapper, byBase)
+  }
+  const cached = byBase.get(Base)
+  if (cached) return cached as ComponentType<TProps>
+  const composed = wrapper(Base)
+  byBase.set(Base, composed)
+  return composed
+}
+
 function resolveComponent<TProps>(
   componentId: string,
   fallback: ComponentType<TProps> | undefined,
@@ -75,7 +99,7 @@ function resolveComponent<TProps>(
   }
 
   const base = replacement ?? original
-  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => wrapper(acc), base)
+  const wrapped = wrappers.reduce<ComponentType<TProps>>((acc, wrapper) => applyWrapper(wrapper, acc), base)
 
   return {
     original,
@@ -87,8 +111,9 @@ function resolveComponent<TProps>(
 }
 
 /**
- * The returned component's identity must depend only on `componentId` and
- * `fallback` — never on the override registry.
+ * The returned component's identity must depend only on `componentId` — never
+ * on the override registry, and never on the `fallback` a caller happens to
+ * pass on this render.
  *
  * Overrides arrive asynchronously: `ComponentOverridesBootstrap` dynamically
  * imports the generated override module and hands the provider a fresh array,
@@ -103,18 +128,32 @@ function resolveComponent<TProps>(
  * carries no override for this id, `wrapped` keeps its previous identity and
  * React reconciles in place; only a genuine replacement or wrapper swaps the
  * rendered type, where a remount is the correct behaviour.
+ *
+ * The identity is held in a ref rather than a `useMemo`, because `useMemo` is a
+ * performance hint React is free to discard, and identity here is a correctness
+ * requirement rather than an optimisation. `fallback` is read through a ref for
+ * the same reason: a host that builds its fallback inline would otherwise swap
+ * the component this hook hands back on every render. That still cannot save a
+ * subtree rendered *through* such a fallback — the fallback itself is then the
+ * element type, and only the host can stabilise it — but it keeps the churn
+ * from spreading to hosts whose id does resolve to a registered component.
  */
 export function useRegisteredComponent<TProps>(
   componentId: string,
   fallback?: ComponentType<TProps>,
 ): ComponentType<TProps> {
-  return React.useMemo(() => {
+  const fallbackRef = React.useRef<ComponentType<TProps> | undefined>(fallback)
+  fallbackRef.current = fallback
+
+  const registered = React.useRef<{ componentId: string; Component: ComponentType<TProps> } | null>(null)
+  if (!registered.current || registered.current.componentId !== componentId) {
     const Registered = (props: TProps) => {
       const userFeatures = useOverrideUserFeatures()
       const overrideRevision = useOverrideRegistryRevision()
+      const currentFallback = fallbackRef.current
       const { original, wrapped, transforms, replacementOverride, replacementModule } = React.useMemo(
-        () => resolveComponent<TProps>(componentId, fallback, userFeatures),
-        [overrideRevision, userFeatures],
+        () => resolveComponent<TProps>(componentId, currentFallback, userFeatures),
+        [currentFallback, overrideRevision, userFeatures],
       )
 
       if (!original || !wrapped) return null
@@ -145,8 +184,10 @@ export function useRegisteredComponent<TProps>(
     }
 
     Registered.displayName = `RegisteredComponent(${componentId})`
-    return Registered
-  }, [componentId, fallback])
+    registered.current = { componentId, Component: Registered }
+  }
+
+  return registered.current.Component
 }
 
 export default useRegisteredComponent