@openmrs/esm-react-utils 10.0.1-pre.5263 → 10.0.1-pre.5299

package/dist/usePagination.js

@@ -3,17 +3,28 @@ const defaultResultsPerPage = 10;
 /**
  * Use this hook to paginate data that already exists on the client side.
  * Note that if the data is obtained from server-side, the caller must handle server-side pagination manually.
+ *
+ * `goTo`, `goToNext` and `goToPrevious` keep the same identity for the life of the component, so they are
+ * safe to list in a dependency array. `currentPage` is bounded by the data, so it can change on its own
+ * when the data shrinks; a component reacting to `currentPage` should expect that.
+ *
  * @see `useServerPagination` for hook that automatically manages server-side pagination.
  * @see `useServerInfinite` for hook to get all data loaded onto the client-side
  * @param data
  * @param resultsPerPage
  * @returns
  */ export function usePagination(data = [], resultsPerPage = defaultResultsPerPage) {
-    const [page, setPage] = useState(1);
+    const [requestedPage, setRequestedPage] = useState(1);
     const totalPages = useMemo(()=>typeof resultsPerPage === 'number' && resultsPerPage > 0 ? Math.max(1, Math.ceil(data.length / resultsPerPage)) : 1, [
         data.length,
         resultsPerPage
     ]);
+    // If requested page is past the end, set to the end. Done here to retain referential stability
+    // on the functions returned by this hook
+    if (requestedPage > totalPages) {
+        setRequestedPage(totalPages);
+    }
+    const page = Math.min(Math.max(1, requestedPage), totalPages);
     const results = useMemo(()=>{
         const lowerBound = (page - 1) * resultsPerPage;
         const upperBound = (page + 0) * resultsPerPage;
@@ -24,28 +35,19 @@ const defaultResultsPerPage = 10;
         resultsPerPage
     ]);
     const goTo = useCallback((page)=>{
-        setPage(Math.max(1, Math.min(totalPages, page)));
-    }, [
-        setPage,
-        totalPages
-    ]);
-    const goToNext = useCallback(()=>{
-        if (page < totalPages) {
-            setPage(page + 1);
+        if (!Number.isInteger(page) || page < 1) {
+            console.warn(`usePagination: ignoring goTo(${page}); page must be a positive integer.`);
+            return;
         }
-    }, [
-        page,
-        totalPages,
-        setPage
-    ]);
+        setRequestedPage(page);
+    }, []);
+    // overflow clamping happens in render; see the setRequestedPage() call above
+    const goToNext = useCallback(()=>{
+        setRequestedPage((p)=>p + 1);
+    }, []);
     const goToPrevious = useCallback(()=>{
-        if (page > 1) {
-            setPage(page - 1);
-        }
-    }, [
-        page,
-        setPage
-    ]);
+        setRequestedPage((p)=>Math.max(1, p - 1));
+    }, []);
     const memoisedPaginatedData = useMemo(()=>({
             results,
             totalPages,

package/dist/useShallowStableValue.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns `value` with a reference that only changes when its contents do, so that it can be used
+ * as a dependency of `useMemo`, `useEffect` and friends.
+ *
+ * This exists for props that are almost always written as object literals — `state={{ patientUuid }}`
+ * — which get a new identity on every render while meaning the same thing. Comparison is shallow,
+ * so a value nested more than one level deep still reads as a change.
+ *
+ * @param value The value to stabilize
+ * @returns `value`, or the last value this hook returned if the two are shallowly equal
+ */
+export declare function useShallowStableValue<T>(value: T): T;
+//# sourceMappingURL=useShallowStableValue.d.ts.map

package/dist/useShallowStableValue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShallowStableValue.d.ts","sourceRoot":"","sources":["../src/useShallowStableValue.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAQpD"}

package/dist/useShallowStableValue.js

@@ -0,0 +1,19 @@
+/** @module @category Utility */ import { useRef } from "react";
+import { shallowEqual } from "@openmrs/esm-utils";
+/**
+ * Returns `value` with a reference that only changes when its contents do, so that it can be used
+ * as a dependency of `useMemo`, `useEffect` and friends.
+ *
+ * This exists for props that are almost always written as object literals — `state={{ patientUuid }}`
+ * — which get a new identity on every render while meaning the same thing. Comparison is shallow,
+ * so a value nested more than one level deep still reads as a change.
+ *
+ * @param value The value to stabilize
+ * @returns `value`, or the last value this hook returned if the two are shallowly equal
+ */ export function useShallowStableValue(value) {
+    const stable = useRef(value);
+    if (!shallowEqual(stable.current, value)) {
+        stable.current = value;
+    }
+    return stable.current;
+}

package/dist/useStore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../src/useStore.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useStore.d.ts","sourceRoot":"","sources":["../src/useStore.ts"],"names":[],"mappings":"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"}

package/dist/useStore.js

@@ -14,7 +14,12 @@ function bindActions(store, actions) {
     }
     return bound;
 }
-const defaultSelectFunction = ()=>(x)=>x;
+/**
+ * A single shared identity function, rather than one built per call: `getSnapshot` below takes
+ * the selector as a dependency, so a fresh default each render would leave it unstable for every
+ * caller that doesn't pass a selector of its own.
+ */ const identitySelect = (x)=>x;
+const defaultSelectFunction = ()=>identitySelect;
 function useStore(store, select = defaultSelectFunction(), actions) {
     // Use useSyncExternalStore to subscribe synchronously during render
     // This ensures React can properly track all state updates
@@ -28,14 +33,20 @@ function useStore(store, select = defaultSelectFunction(), actions) {
         select
     ]);
     const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-    let boundActions = useMemo(()=>actions ? bindActions(store, actions) : {}, [
+    let boundActions = useMemo(()=>actions ? bindActions(store, actions) : null, [
         store,
         actions
     ]);
-    return {
-        ...state,
-        ...boundActions
-    };
+    // Returned as-is when there are no actions to merge in, so the reference stays stable for as
+    // long as the selected value does. That value is not a copy — it is whatever the selector
+    // returned, usually the store's own state.
+    return useMemo(()=>boundActions ? {
+            ...state,
+            ...boundActions
+        } : state, [
+        state,
+        boundActions
+    ]);
 }
 /**
  *
@@ -53,13 +64,16 @@ function useStore(store, select = defaultSelectFunction(), actions) {
         const subscribe = useCallback((callback)=>store.subscribe(callback), []);
         const getSnapshot = useCallback(()=>store.getState(), []);
         const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-        let boundActions = useMemo(()=>actions ? bindActions(store, actions) : {}, [
+        let boundActions = useMemo(()=>actions ? bindActions(store, actions) : null, [
             actions
         ]);
-        return {
-            ...state,
-            ...boundActions
-        };
+        return useMemo(()=>boundActions ? {
+                ...state,
+                ...boundActions
+            } : state, [
+            state,
+            boundActions
+        ]);
     }
     return useStore;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-react-utils",
-  "version": "10.0.1-pre.5263",
+  "version": "10.0.1-pre.5299",
   "license": "MPL-2.0",
   "description": "React utilities for OpenMRS.",
   "type": "module",
@@ -60,17 +60,17 @@
     "single-spa-react": "^6.0.2"
   },
   "peerDependencies": {
-    "@openmrs/esm-api": "^10.0.1-pre.5263",
-    "@openmrs/esm-config": "^10.0.1-pre.5263",
-    "@openmrs/esm-context": "^10.0.1-pre.5263",
-    "@openmrs/esm-emr-api": "^10.0.1-pre.5263",
-    "@openmrs/esm-error-handling": "^10.0.1-pre.5263",
-    "@openmrs/esm-extensions": "^10.0.1-pre.5263",
-    "@openmrs/esm-feature-flags": "^10.0.1-pre.5263",
-    "@openmrs/esm-globals": "^10.0.1-pre.5263",
-    "@openmrs/esm-navigation": "^10.0.1-pre.5263",
-    "@openmrs/esm-state": "^10.0.1-pre.5263",
-    "@openmrs/esm-utils": "^10.0.1-pre.5263",
+    "@openmrs/esm-api": "^10.0.1-pre.5299",
+    "@openmrs/esm-config": "^10.0.1-pre.5299",
+    "@openmrs/esm-context": "^10.0.1-pre.5299",
+    "@openmrs/esm-emr-api": "^10.0.1-pre.5299",
+    "@openmrs/esm-error-handling": "^10.0.1-pre.5299",
+    "@openmrs/esm-extensions": "^10.0.1-pre.5299",
+    "@openmrs/esm-feature-flags": "^10.0.1-pre.5299",
+    "@openmrs/esm-globals": "^10.0.1-pre.5299",
+    "@openmrs/esm-navigation": "^10.0.1-pre.5299",
+    "@openmrs/esm-state": "^10.0.1-pre.5299",
+    "@openmrs/esm-utils": "^10.0.1-pre.5299",
     "dayjs": "1.x",
     "i18next": "25.x",
     "react": "18.x",
@@ -80,17 +80,17 @@
     "swr": "2.x"
   },
   "devDependencies": {
-    "@openmrs/esm-api": "10.0.1-pre.5263",
-    "@openmrs/esm-config": "10.0.1-pre.5263",
-    "@openmrs/esm-context": "10.0.1-pre.5263",
-    "@openmrs/esm-emr-api": "10.0.1-pre.5263",
-    "@openmrs/esm-error-handling": "10.0.1-pre.5263",
-    "@openmrs/esm-extensions": "10.0.1-pre.5263",
-    "@openmrs/esm-feature-flags": "10.0.1-pre.5263",
-    "@openmrs/esm-globals": "10.0.1-pre.5263",
-    "@openmrs/esm-navigation": "10.0.1-pre.5263",
-    "@openmrs/esm-state": "10.0.1-pre.5263",
-    "@openmrs/esm-utils": "10.0.1-pre.5263",
+    "@openmrs/esm-api": "10.0.1-pre.5299",
+    "@openmrs/esm-config": "10.0.1-pre.5299",
+    "@openmrs/esm-context": "10.0.1-pre.5299",
+    "@openmrs/esm-emr-api": "10.0.1-pre.5299",
+    "@openmrs/esm-error-handling": "10.0.1-pre.5299",
+    "@openmrs/esm-extensions": "10.0.1-pre.5299",
+    "@openmrs/esm-feature-flags": "10.0.1-pre.5299",
+    "@openmrs/esm-globals": "10.0.1-pre.5299",
+    "@openmrs/esm-navigation": "10.0.1-pre.5299",
+    "@openmrs/esm-state": "10.0.1-pre.5299",
+    "@openmrs/esm-utils": "10.0.1-pre.5299",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@vitest/coverage-v8": "^4.1.2",

package/src/Extension.tsx

@@ -21,72 +21,128 @@ export const Extension: React.FC<ExtensionProps> = ({ state, children, ...divPro
   const { extension } = useContext(ComponentContext);
   const parcel = useRef<Parcel | null>(null);
   const updatePromise = useRef<Promise<void>>(Promise.resolve());
+  const isUnmounted = useRef(false);
+  const isRendering = useRef(false);
+  const latestState = useRef(state);
 
-  const ref = useCallback((node: HTMLDivElement) => {
+  // Takes the parcel to tear down rather than reading `parcel.current`, which can be reassigned
+  // between scheduling this and running it.
+  const unmountParcel = useCallback((target: Parcel | null) => {
+    if (!target) {
+      return;
+    }
+
+    const unmountWhenMounted = () => {
+      if (target.getStatus() === 'MOUNTED') {
+        target.unmount();
+      }
+    };
+
+    switch (target.getStatus()) {
+      case 'MOUNTED':
+        target.unmount();
+        break;
+      case 'UPDATING':
+        // The rejection is reported by whoever owns `updatePromise`; here it only matters that a
+        // failed update still runs the teardown, or the parcel is left broken and mounted.
+        updatePromise.current?.then(unmountWhenMounted, unmountWhenMounted);
+        break;
+      default:
+        // Any other status: the parcel either hasn't finished coming up or is already gone.
+        // `mountPromise` has settled or will, and `unmountWhenMounted` re-checks the status.
+        target.mountPromise.then(unmountWhenMounted, () => {});
+    }
+  }, []);
+
+  const applyUpdate = useCallback((target: Parcel, nextState: ExtensionProps['state']) => {
+    if (!target.update || target.getStatus() === 'UNMOUNTING') {
+      return;
+    }
+
+    // Every later update chains onto this promise, so it has to settle even when an update fails.
+    updatePromise.current = Promise.all([target.mountPromise, updatePromise.current])
+      .then(() => {
+        if (parcel.current?.getStatus() === 'MOUNTED' && parcel.current.update) {
+          return parcel.current.update({ ...nextState });
+        }
+      })
+      .catch((err) => {
+        // A parcel torn down while its update was in flight rejects, and that race is expected.
+        // We use the status to distinguish reject reasons as the message isn't reliable
+        const status = parcel.current?.getStatus();
+
+        if (status !== 'UNMOUNTING' && status !== 'NOT_MOUNTED' && status !== 'UNLOADING') {
+          console.error(`The extension '${extension?.extensionId}' failed to update`, err);
+        }
+      });
+  }, []);
+
+  const ref = useCallback((node: HTMLDivElement | null) => {
+    // React detaches a ref by calling it with null. If we render something in response to this,
+    // React ignores it and we're left tracking a parcel with no visible DOM, so skip conditions
+    // we can't handle.
     if (
-      extension?.extensionSlotName &&
-      extension.extensionSlotModuleName &&
-      extension.extensionSlotModuleName &&
-      !parcel.current
+      !node ||
+      parcel.current ||
+      isRendering.current ||
+      !extension?.extensionSlotName ||
+      !extension.extensionSlotModuleName
     ) {
-      renderExtension(
-        node,
-        extension.extensionSlotName,
-        extension.extensionSlotModuleName,
-        extension.extensionId,
-        undefined,
-        state,
-      ).then((newParcel: Parcel) => {
-        parcel.current = newParcel;
-      });
+      return;
     }
+
+    isRendering.current = true;
+
+    renderExtension(
+      node,
+      extension.extensionSlotName,
+      extension.extensionSlotModuleName,
+      extension.extensionId,
+      undefined,
+      state,
+    ).then(
+      (newParcel: Parcel | null) => {
+        isRendering.current = false;
+        parcel.current = newParcel;
+
+        // Loading an extension's bundle can outlast the component that asked for it: the cleanup
+        // effect has already run and saw no parcel, so teardown has to happen here instead, or the
+        // parcel mounts into a detached node and its rendering record outlives the page.
+        if (isUnmounted.current) {
+          unmountParcel(newParcel);
+          return;
+        }
+
+        // Ensure we update the state of the parcel to the latest version we've received
+        if (newParcel && latestState.current !== state) {
+          applyUpdate(newParcel, latestState.current);
+        }
+      },
+      // Cleared so a later reattach can try again; `renderExtension` reports its own failures.
+      () => {
+        isRendering.current = false;
+      },
+    );
   }, []);
 
   useEffect(() => {
+    // Reset on every run, not just the first: StrictMode mounts, tears down and mounts again, so
+    // a flag only ever set by the cleanup would still read "unmounted" for the live component.
+    isUnmounted.current = false;
+
     return () => {
-      if (parcel && parcel.current) {
-        const status = parcel.current.getStatus();
-        switch (status) {
-          case 'MOUNTING':
-            parcel.current.mountPromise.then(() => {
-              if (parcel.current?.getStatus() === 'MOUNTED') {
-                parcel.current.unmount();
-              }
-            });
-            break;
-          case 'MOUNTED':
-            parcel.current.unmount();
-            break;
-          case 'UPDATING':
-            if (updatePromise.current) {
-              updatePromise.current.then(() => {
-                if (parcel.current?.getStatus() === 'MOUNTED') {
-                  parcel.current.unmount();
-                }
-              });
-            }
-        }
-      }
+      isUnmounted.current = true;
+      unmountParcel(parcel.current);
     };
   }, []);
 
   useEffect(() => {
-    if (parcel.current && parcel.current.update && parcel.current.getStatus() !== 'UNMOUNTING') {
-      Promise.all([parcel.current.mountPromise, updatePromise.current]).then(() => {
-        if (parcel?.current?.getStatus() === 'MOUNTED' && parcel.current.update) {
-          updatePromise.current = parcel.current.update({ ...state }).catch((err) => {
-            // if we were trying to update but the component was unmounted
-            // while this was happening, ignore the error
-            if (
-              !(err instanceof Error) ||
-              !err.message.includes('minified message #32') ||
-              parcel.current?.getStatus() === 'MOUNTED'
-            ) {
-              throw err;
-            }
-          });
-        }
-      });
+    // Recorded before the parcel is checked, so that a state that arrives before there is a parcel
+    // to receive it is still the one applied once there is.
+    latestState.current = state;
+
+    if (parcel.current) {
+      applyUpdate(parcel.current, state);
     }
   }, [state]);
 

package/src/extensions.test.tsx

@@ -7,6 +7,7 @@ import { act, render, screen, waitFor, within } from '@testing-library/react';
 import { registerFeatureFlag, setFeatureFlag } from '@openmrs/esm-feature-flags';
 import {
   attach,
+  getExtensionRenderingsStore,
   getExtensionNameFromId,
   registerExtension,
   updateInternalExtensionStore,
@@ -57,6 +58,69 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
     expect(screen.getByText(/English/)).toHaveTextContent('English?');
   });
 
+  it('Extension reports a failed update instead of rejecting silently', async () => {
+    const user = userEvent.setup();
+    const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+    const delivered: Array<number> = [];
+    let failNextUpdate = true;
+
+    registerExtension({
+      name: 'Flaky',
+      moduleName: 'esm-flaky-app',
+      meta: {},
+      load: async () => ({
+        bootstrap: async () => {},
+        mount: async (props: any) => {
+          props.domElement.textContent = 'flaky extension';
+        },
+        unmount: async (props: any) => {
+          props.domElement.textContent = '';
+        },
+        update: async (props: any) => {
+          if (failNextUpdate) {
+            failNextUpdate = false;
+            throw new Error('update blew up');
+          }
+
+          delivered.push(props.value);
+        },
+      }),
+    });
+    attach('FlakyBox', 'Flaky');
+
+    const App = openmrsComponentDecorator({
+      moduleName: 'esm-flaky-app',
+      featureName: 'Flaky',
+      disableTranslations: true,
+    })(() => {
+      const [value, next] = useReducer((value: number) => value + 1, 1);
+
+      return (
+        <div>
+          <ExtensionSlot name="FlakyBox" state={{ value }} />
+          <button onClick={next}>Next</button>
+        </div>
+      );
+    });
+
+    render(<App />);
+    expect(await screen.findByText('flaky extension')).toBeInTheDocument();
+
+    // The first of these fails, which makes single-spa hard-fail the parcel, so no later update
+    // reaches the extension. What must not happen is the failure going unreported and the promise
+    // chain being left rejected, which used to produce an unhandled rejection per later change.
+    await user.click(screen.getByText('Next'));
+    await user.click(screen.getByText('Next'));
+    await user.click(screen.getByText('Next'));
+
+    await waitFor(() =>
+      expect(consoleError).toHaveBeenCalledWith("The extension 'Flaky' failed to update", expect.any(Error)),
+    );
+    expect(consoleError).toHaveBeenCalledTimes(1);
+    expect(delivered).toEqual([]);
+    consoleError.mockRestore();
+  });
+
   it('Extension receives state changes (using <Extension>)', async () => {
     const user = userEvent.setup();
 
@@ -281,6 +345,54 @@ describe('ExtensionSlot, Extension, and useExtensionSlotMeta', () => {
   });
 });
 
+describe('Extension teardown', () => {
+  beforeEach(() => {
+    updateInternalExtensionStore(() => ({ slots: {}, extensions: {} }));
+    getExtensionRenderingsStore().setState({ renderings: new Map() });
+  });
+
+  it('releases the rendering when the slot unmounts while the bundle is still loading', async () => {
+    const consoleWarn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    let releaseLoad = () => {};
+    const loadGate = new Promise<void>((resolve) => (releaseLoad = resolve));
+    const lifecycle = getSyncLifecycle(() => <div>Fred</div>, {
+      moduleName: 'esm-flintstone',
+      featureName: 'Flintstone',
+      disableTranslations: true,
+    });
+
+    registerExtension({
+      name: 'Fred',
+      moduleName: 'esm-flintstone',
+      load: async () => {
+        await loadGate;
+        return lifecycle();
+      },
+      meta: {},
+    });
+    attach('Box', 'Fred');
+
+    const App = openmrsComponentDecorator({
+      moduleName: 'esm-flintstone',
+      featureName: 'Flintstone',
+      disableTranslations: true,
+    })(() => <ExtensionSlot name="Box" />);
+
+    const { unmount } = render(<App />);
+    await act(async () => {});
+    expect(getExtensionRenderingsStore().getState().renderings.size).toBe(1);
+
+    unmount();
+    releaseLoad();
+
+    await waitFor(() => expect(getExtensionRenderingsStore().getState().renderings.size).toBe(0));
+    // React detaches the ref by calling it with `null`; taking that for a render request starts a
+    // second render that resolves to null and clears the parcel still coming up.
+    expect(consoleWarn).not.toHaveBeenCalledWith(expect.stringContaining('no DOM element was available'));
+    consoleWarn.mockRestore();
+  });
+});
+
 function registerSimpleExtension(
   name: string,
   moduleName: string,

package/src/index.ts

@@ -10,6 +10,8 @@ export * from './useAbortController';
 export * from './useAppContext';
 export * from './useAssignedExtensionIds';
 export * from './useAssignedExtensions';
+export * from './useCandidateExtensions';
+export * from './useShallowStableValue';
 export * from './useAttachments';
 export * from './useBodyScrollLock';
 export * from './useConfig';

package/src/useAssignedExtensionIds.ts

@@ -1,26 +1,16 @@
 /** @module @category Extension */
-import { useEffect, useState } from 'react';
-import { getExtensionStore } from '@openmrs/esm-extensions';
-import { isEqual } from 'lodash-es';
+import { useMemo } from 'react';
+import { useAssignedExtensions } from './useAssignedExtensions';
 
 /**
  * Gets the assigned extension ids for a given extension slot name.
- * Does not consider if offline or online.
+ *
  * @param slotName The name of the slot to get the assigned IDs for.
  *
  * @deprecated Use `useAssignedExtensions`
  */
 export function useAssignedExtensionIds(slotName: string) {
-  const [ids, setIds] = useState<Array<string>>([]);
-
-  useEffect(() => {
-    return getExtensionStore().subscribe((state) => {
-      const newIds = state.slots[slotName]?.assignedExtensions.map((e) => e.id) ?? [];
-      if (!isEqual(newIds, ids)) {
-        setIds(newIds);
-      }
-    });
-  }, []);
+  const assignedExtensions = useAssignedExtensions(slotName);
 
-  return ids;
+  return useMemo(() => assignedExtensions.map((extension) => extension.id), [assignedExtensions]);
 }

package/src/useAssignedExtensions.ts

@@ -1,11 +1,38 @@
 /** @module @category Extension */
+import { useMemo } from 'react';
+import { sessionStore, type SessionStore } from '@openmrs/esm-api';
+import { type ExtensionSlotCustomState, getAssignedExtensions } from '@openmrs/esm-extensions';
+import { useShallowStableValue } from './useShallowStableValue';
 import { useExtensionSlotStore } from './useExtensionSlotStore';
+import { useStore } from './useStore';
+
+const selectSession = (state: SessionStore) => state.session;
 
 /**
  * Gets the assigned extensions for a given extension slot name.
+ *
+ * The reactive form of `getAssignedExtensions`, and it answers the same thing: display conditions
+ * are always applied, so the result is what should actually be displayed. Pass `state` whenever you
+ * know it: the same slot can be rendered in several places at once with different state, so
+ * conditions are resolved against the state of this rendering. Omitting it resolves them against
+ * the session alone, hiding any extension whose condition depends on state.
+ *
+ * The returned array is a copy, so sorting or filtering it in place can't corrupt the extension
+ * store. Its reference is stable for as long as the slot's extensions, the state and the session are.
+ *
  * @param slotName The name of the slot to get the assigned extensions for.
+ * @param state The state of this rendering of the slot.
  */
-export function useAssignedExtensions(slotName: string) {
-  const slotStore = useExtensionSlotStore(slotName);
-  return slotStore?.assignedExtensions ?? [];
+export function useAssignedExtensions(slotName: string, state?: ExtensionSlotCustomState) {
+  // Subscribes so that this re-runs when the slot's extensions change; `getAssignedExtensions` reads
+  // the same store, so the value below is what it is about to return.
+  const { candidateExtensions } = useExtensionSlotStore(slotName);
+  // Display conditions may refer to `session`, so they have to be re-evaluated when it changes.
+  const session = useStore(sessionStore, selectSession);
+  const stableState = useShallowStableValue(state);
+
+  return useMemo(
+    () => getAssignedExtensions(slotName, stableState),
+    [slotName, stableState, session, candidateExtensions],
+  );
 }

package/src/useCandidateExtensions.ts

@@ -0,0 +1,15 @@
+/** @module @category Extension */
+import { useExtensionSlotStore } from './useExtensionSlotStore';
+
+/**
+ * The reactive form of `getCandidateExtensions`: everything assigned to a slot, with no display
+ * condition evaluated. Intended for tools that present a slot's configuration rather than render it.
+ *
+ * Use {@link useAssignedExtensions} to decide what to display.
+ *
+ * @param slotName The name of the slot to get the candidate extensions for.
+ * @internal
+ */
+export function useCandidateExtensions(slotName: string) {
+  return useExtensionSlotStore(slotName).candidateExtensions;
+}