quidproquo-web-react 0.1.0 → 0.1.2

package/lib/commonjs/auth/hooks/useRefreshTokens.js

@@ -5,7 +5,9 @@ const react_1 = require("react");
 const useFastCallback_1 = require("../../hooks/useFastCallback");
 const useRefreshTokens = (authenticationInfo, refreshTokens) => {
     const stableRefreshTokens = (0, useFastCallback_1.useFastCallback)(refreshTokens);
-    const refresh = () => {
+    // Stable identity so the effect below can list it as a dependency without
+    // re-running on every render.
+    const refresh = (0, useFastCallback_1.useFastCallback)(() => {
         if (authenticationInfo && authenticationInfo.refreshToken && authenticationInfo.expiresAt) {
             const now = new Date().toISOString();
             const timeToExpire = new Date(authenticationInfo.expiresAt).getTime() - new Date(now).getTime();
@@ -23,7 +25,7 @@ const useRefreshTokens = (authenticationInfo, refreshTokens) => {
             }
         }
         return null;
-    };
+    });
     (0, react_1.useEffect)(() => {
         const timerId = refresh();
         return () => {
@@ -38,6 +40,6 @@ const useRefreshTokens = (authenticationInfo, refreshTokens) => {
         // reference would re-run this effect every render — and when the token is
         // expired/near-expiry the "refresh immediately" branch would then fire a
         // network refresh on every render, an unbounded loop.
-    }, [authenticationInfo === null || authenticationInfo === void 0 ? void 0 : authenticationInfo.expiresAt, authenticationInfo === null || authenticationInfo === void 0 ? void 0 : authenticationInfo.refreshToken]);
+    }, [refresh, authenticationInfo === null || authenticationInfo === void 0 ? void 0 : authenticationInfo.expiresAt, authenticationInfo === null || authenticationInfo === void 0 ? void 0 : authenticationInfo.refreshToken]);
 };
 exports.useRefreshTokens = useRefreshTokens;

package/lib/commonjs/dateTime/DateTime.js

@@ -27,20 +27,12 @@ const pickOptions = (options, keys) => {
     }, {});
     return Object.keys(picked).length > 0 ? picked : undefined;
 };
-const toDate = (props) => {
-    if ('isoDateTime' in props) {
-        return new Date(props.isoDateTime);
-    }
-    if ('unixTimestampMs' in props) {
-        return new Date(props.unixTimestampMs);
-    }
-    return props.date;
-};
-const component = (props) => {
-    const { locale, dateTimeFormatOptions, showTimeAgo = true, hideDate = false, hideTime = false, hideTimeAgo = false, isMultiline = true, placeholder = '—', className } = props;
+const DateTimeComponent = (props) => {
+    const { locale, dateTimeFormatOptions, showTimeAgo = true, hideDate = false, hideTime = false, hideTimeAgo = false, isMultiline = true, placeholder = '—', className, } = props;
     // Stable primitive key so a fresh props object doesn't churn the memo.
+    // Both the ISO string and the epoch-ms number are valid Date constructor inputs.
     const dateKey = 'isoDateTime' in props ? props.isoDateTime : 'unixTimestampMs' in props ? props.unixTimestampMs : props.date.getTime();
-    const date = (0, react_1.useMemo)(() => toDate(props), [dateKey]);
+    const date = (0, react_1.useMemo)(() => new Date(dateKey), [dateKey]);
     const isValidDate = !Number.isNaN(date.getTime());
     const formattedDate = (0, react_1.useMemo)(() => { var _a; return (hideDate ? '' : date.toLocaleDateString(locale, (_a = pickOptions(dateTimeFormatOptions, DATE_OPTION_KEYS)) !== null && _a !== void 0 ? _a : DEFAULT_DATE_OPTIONS)); }, [date, locale, dateTimeFormatOptions, hideDate]);
     const formattedTime = (0, react_1.useMemo)(() => { var _a; return (hideTime ? '' : date.toLocaleTimeString(locale, (_a = pickOptions(dateTimeFormatOptions, TIME_OPTION_KEYS)) !== null && _a !== void 0 ? _a : DEFAULT_TIME_OPTIONS)); }, [date, locale, dateTimeFormatOptions, hideTime]);
@@ -52,6 +44,6 @@ const component = (props) => {
     if (!isValidDate) {
         return (0, jsx_runtime_1.jsx)("time", { className: className, children: placeholder });
     }
-    return ((0, jsx_runtime_1.jsx)("time", { dateTime: date.toISOString(), title: date.toLocaleString(locale), className: className, children: isMultiline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [formattedDateTime ? (0, jsx_runtime_1.jsx)("div", { children: formattedDateTime }) : null, displayTimeAgo ? (0, jsx_runtime_1.jsx)("div", { children: timeAgo }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [formattedDateTime, displayTimeAgo ? ` (${timeAgo})` : ''] })) }));
+    return ((0, jsx_runtime_1.jsx)("time", { className: className, dateTime: date.toISOString(), title: date.toLocaleString(locale), children: isMultiline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [formattedDateTime ? (0, jsx_runtime_1.jsx)("div", { children: formattedDateTime }) : null, displayTimeAgo ? (0, jsx_runtime_1.jsx)("div", { children: timeAgo }) : null] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [formattedDateTime, displayTimeAgo ? ` (${timeAgo})` : ''] })) }));
 };
-exports.DateTime = (0, react_1.memo)(component);
+exports.DateTime = (0, react_1.memo)(DateTimeComponent);

package/lib/commonjs/hooks/asmj/createQpqRuntimeDefinition.js

@@ -38,7 +38,7 @@ function useQpqRuntimeState(atom, name) {
         const info = atom(name);
         info.state = newState;
         setState(newState);
-    }, [setState]);
+    }, [atom, name, setState]);
     const getState = (0, react_1.useCallback)(() => {
         const state = atom(name).state;
         return state;

package/lib/commonjs/hooks/asmj/index.d.ts

@@ -1,5 +1,5 @@
 export * from './actionProcessor';
-export * from "./bubbleReducer";
+export * from './bubbleReducer';
 export * from './createQpqRuntimeDefinition';
 export * from './QpqContextProvider';
 export * from './QpqMappedApi';

package/lib/commonjs/hooks/asmj/useQpqRuntime.js

@@ -42,6 +42,7 @@ function useQpqRuntime(atom, mainStory, name, getActionProcessors = () => () =>
         if (mainStory) {
             resolver(mainStory)();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return [api, state, dispatch];
 }

package/lib/commonjs/hooks/useAsyncEffect.js

@@ -31,6 +31,9 @@ const useAsyncEffect = (effect, deps) => {
                 }
             });
         };
+        // The dependency list is supplied by the caller, so it can't be statically
+        // verified here — this hook is a passthrough wrapper around useEffect.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 };
 exports.useAsyncEffect = useAsyncEffect;

package/lib/commonjs/hooks/useQpq.js

@@ -15,6 +15,7 @@ const quidproquo_core_1 = require("quidproquo-core");
 const react_1 = require("react");
 const actionProcessor_1 = require("../actionProcessor");
 const QpqContextProvider_1 = require("./asmj/QpqContextProvider");
+const useEffectCallback_1 = require("./useEffectCallback");
 function* withVersionCheck(story, versionRef, capturedVersion) {
     let nextValue = undefined;
     while (true) {
@@ -41,18 +42,24 @@ function useQpq(getActionProcessors = () => __awaiter(this, void 0, void 0, func
     const contextGetActionProcessors = (0, actionProcessor_1.useActionProcessors)();
     const versionRef = (0, react_1.useRef)(0);
     (0, react_1.useEffect)(() => {
+        const capturedVersionRef = versionRef;
         return () => {
-            versionRef.current++;
+            capturedVersionRef.current++;
         };
     }, []);
+    // Stable identities so the runtime memo can list them as dependencies
+    // without being recreated every render — the runtime always calls the
+    // latest processors through these wrappers.
+    const stableContextGetActionProcessors = (0, useEffectCallback_1.useEffectCallback)(contextGetActionProcessors);
+    const stableGetActionProcessors = (0, useEffectCallback_1.useEffectCallback)(getActionProcessors);
     const resolveStory = (0, react_1.useMemo)(() => (0, quidproquo_core_1.createRuntime)([(0, quidproquo_core_1.defineModule)('UI')], {
         depth: 0,
         context: qpqContextValues,
     }, (qpqConfig, dynamicModuleLoader) => __awaiter(this, void 0, void 0, function* () {
-        return (Object.assign(Object.assign(Object.assign({}, (yield (0, quidproquo_actionprocessor_web_1.getWebActionProcessors)(qpqConfig, dynamicModuleLoader))), (yield contextGetActionProcessors(qpqConfig, dynamicModuleLoader))), (yield getActionProcessors(qpqConfig, dynamicModuleLoader))));
+        return (Object.assign(Object.assign(Object.assign({}, (yield (0, quidproquo_actionprocessor_web_1.getWebActionProcessors)(qpqConfig, dynamicModuleLoader))), (yield stableContextGetActionProcessors(qpqConfig, dynamicModuleLoader))), (yield stableGetActionProcessors(qpqConfig, dynamicModuleLoader))));
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, quidproquo_core_1.QpqRuntimeType.UI, (_runtime) => __awaiter(this, void 0, void 0, function* () {
         // noop
-    })), [qpqContextValues]);
+    })), [qpqContextValues, stableContextGetActionProcessors, stableGetActionProcessors]);
     const qpq = (0, react_1.useCallback)(function getStoryExecutor(story) {
         return (...args) => __awaiter(this, void 0, void 0, function* () {
             const capturedVersion = versionRef.current;

package/lib/commonjs/hooks/useRunEvery.js

@@ -2,12 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRunEvery = useRunEvery;
 const react_1 = require("react");
+const useEffectCallback_1 = require("./useEffectCallback");
 function useRunEvery(func, intervalSeconds) {
     const [value, setValue] = (0, react_1.useState)(func);
     const intervalRef = (0, react_1.useRef)(null);
+    // Stable identity so a caller passing a fresh arrow each render doesn't
+    // tear down and recreate the interval.
+    const stableFunc = (0, useEffectCallback_1.useEffectCallback)(func);
     (0, react_1.useEffect)(() => {
         intervalRef.current = window.setInterval(() => {
-            const newValue = func();
+            const newValue = stableFunc();
             setValue(newValue);
         }, intervalSeconds * 1000);
         return () => {
@@ -16,6 +20,6 @@ function useRunEvery(func, intervalSeconds) {
                 intervalRef.current = null;
             }
         };
-    }, [intervalSeconds]);
+    }, [intervalSeconds, stableFunc]);
     return value;
 }

package/lib/commonjs/hooks/useThrottledMemo.js

@@ -26,6 +26,9 @@ function useThrottledMemo(factory, deps, delaySeconds = 1) {
                 timeoutRef.current = null;
             }
         };
+        // The dependency list is supplied by the caller, so it can't be statically
+        // verified here — this hook is a throttled wrapper around useMemo semantics.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [...deps, delaySeconds]);
     return value;
 }

package/lib/commonjs/useFieldBinding/useFieldBinding.js

@@ -12,9 +12,9 @@ const useFieldBinding = (computedAtom, someSetter, valueExtractor) => {
         someSetter(newValue);
     };
     (0, react_1.useEffect)(() => {
-        if (computedValue !== value) {
-            setValue(computedValue);
-        }
+        // React bails out when the value is unchanged, so no equality guard is
+        // needed — and local edits (which also change `value`) don't re-run this.
+        setValue(computedValue);
     }, [computedValue]);
     return [value, handleChange];
 };

package/lib/commonjs/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.js

@@ -13,7 +13,7 @@ exports.getServiceRequestActionProcessor = void 0;
 const quidproquo_core_1 = require("quidproquo-core");
 const quidproquo_webserver_1 = require("quidproquo-webserver");
 const getServiceRequestActionProcessor = (sendEventRef) => ({
-    [quidproquo_webserver_1.ServiceActionType.Request]: (_a) => __awaiter(void 0, [_a], void 0, function* ({ serviceName, method, payload, }) {
+    [quidproquo_webserver_1.ServiceActionType.Request]: (_a) => __awaiter(void 0, [_a], void 0, function* ({ serviceName, method, payload }) {
         var _b;
         const response = yield ((_b = sendEventRef.current) === null || _b === void 0 ? void 0 : _b.call(sendEventRef, { type: `qpq/serviceRequest/${serviceName}/${method}`, payload }));
         if (response && !response.success) {

package/lib/commonjs/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.d.ts

@@ -3,9 +3,4 @@ import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserv
 import { QpqRuntimeDefinition } from '../../hooks/asmj/createQpqRuntimeDefinition';
 import { QpqApi, QpqMappedApi } from '../../hooks/asmj/QpqMappedApi';
 import { ActionProcessorListResolverFactory } from '../../hooks/asmj/useQpqRuntime';
-export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [
-    QpqMappedApi<TApi>,
-    TState,
-    (action: any) => void,
-    (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>
-];
+export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [QpqMappedApi<TApi>, TState, (action: any) => void, (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>];

package/lib/commonjs/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -5,10 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const hooks_1 = require("./hooks");
 const WebSocketAuthContext_1 = require("./WebSocketAuthContext");
-const component = ({ children, accessToken }) => {
+const WebSocketAuthSyncComponent = ({ children, accessToken }) => {
     const isAuthenticated = (0, hooks_1.useWebsocketAuthSync)(accessToken);
     // Keep the active websocket alive
     (0, hooks_1.useWebsocketPingPong)();
-    return ((0, jsx_runtime_1.jsx)(WebSocketAuthContext_1.WebSocketAuthContext.Provider, { value: isAuthenticated, children: children }));
+    return (0, jsx_runtime_1.jsx)(WebSocketAuthContext_1.WebSocketAuthContext.Provider, { value: isAuthenticated, children: children });
 };
-exports.WebSocketAuthSync = (0, react_1.memo)(component);
+exports.WebSocketAuthSync = (0, react_1.memo)(WebSocketAuthSyncComponent);

package/lib/commonjs/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -34,7 +34,7 @@ const useWebsocketAuthSync = (accessToken) => {
     (0, hooks_2.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.OPEN, updateAuthTokens);
     (0, hooks_2.useSubscribeToWebsocket)(quidproquo_web_1.WebsocketServiceEvent.CLOSE, () => setIsAuthenticated(false));
     // Sync the tokens when they change
-    (0, react_1.useEffect)(updateAuthTokens, [accessToken, websocketApi, isAuthenticated]);
+    (0, react_1.useEffect)(updateAuthTokens, [updateAuthTokens, accessToken, websocketApi, isAuthenticated]);
     return isAuthenticated;
 };
 exports.useWebsocketAuthSync = useWebsocketAuthSync;

package/lib/esm/auth/hooks/useRefreshTokens.js

@@ -2,7 +2,9 @@ import { useEffect } from 'react';
 import { useFastCallback } from '../../hooks/useFastCallback';
 export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
     const stableRefreshTokens = useFastCallback(refreshTokens);
-    const refresh = () => {
+    // Stable identity so the effect below can list it as a dependency without
+    // re-running on every render.
+    const refresh = useFastCallback(() => {
         if (authenticationInfo && authenticationInfo.refreshToken && authenticationInfo.expiresAt) {
             const now = new Date().toISOString();
             const timeToExpire = new Date(authenticationInfo.expiresAt).getTime() - new Date(now).getTime();
@@ -20,7 +22,7 @@ export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
             }
         }
         return null;
-    };
+    });
     useEffect(() => {
         const timerId = refresh();
         return () => {
@@ -35,5 +37,5 @@ export const useRefreshTokens = (authenticationInfo, refreshTokens) => {
         // reference would re-run this effect every render — and when the token is
         // expired/near-expiry the "refresh immediately" branch would then fire a
         // network refresh on every render, an unbounded loop.
-    }, [authenticationInfo?.expiresAt, authenticationInfo?.refreshToken]);
+    }, [refresh, authenticationInfo?.expiresAt, authenticationInfo?.refreshToken]);
 };

package/lib/esm/dateTime/DateTime.js

@@ -24,20 +24,12 @@ const pickOptions = (options, keys) => {
     }, {});
     return Object.keys(picked).length > 0 ? picked : undefined;
 };
-const toDate = (props) => {
-    if ('isoDateTime' in props) {
-        return new Date(props.isoDateTime);
-    }
-    if ('unixTimestampMs' in props) {
-        return new Date(props.unixTimestampMs);
-    }
-    return props.date;
-};
-const component = (props) => {
-    const { locale, dateTimeFormatOptions, showTimeAgo = true, hideDate = false, hideTime = false, hideTimeAgo = false, isMultiline = true, placeholder = '—', className } = props;
+const DateTimeComponent = (props) => {
+    const { locale, dateTimeFormatOptions, showTimeAgo = true, hideDate = false, hideTime = false, hideTimeAgo = false, isMultiline = true, placeholder = '—', className, } = props;
     // Stable primitive key so a fresh props object doesn't churn the memo.
+    // Both the ISO string and the epoch-ms number are valid Date constructor inputs.
     const dateKey = 'isoDateTime' in props ? props.isoDateTime : 'unixTimestampMs' in props ? props.unixTimestampMs : props.date.getTime();
-    const date = useMemo(() => toDate(props), [dateKey]);
+    const date = useMemo(() => new Date(dateKey), [dateKey]);
     const isValidDate = !Number.isNaN(date.getTime());
     const formattedDate = useMemo(() => (hideDate ? '' : date.toLocaleDateString(locale, pickOptions(dateTimeFormatOptions, DATE_OPTION_KEYS) ?? DEFAULT_DATE_OPTIONS)), [date, locale, dateTimeFormatOptions, hideDate]);
     const formattedTime = useMemo(() => (hideTime ? '' : date.toLocaleTimeString(locale, pickOptions(dateTimeFormatOptions, TIME_OPTION_KEYS) ?? DEFAULT_TIME_OPTIONS)), [date, locale, dateTimeFormatOptions, hideTime]);
@@ -49,6 +41,6 @@ const component = (props) => {
     if (!isValidDate) {
         return _jsx("time", { className: className, children: placeholder });
     }
-    return (_jsx("time", { dateTime: date.toISOString(), title: date.toLocaleString(locale), className: className, children: isMultiline ? (_jsxs(_Fragment, { children: [formattedDateTime ? _jsx("div", { children: formattedDateTime }) : null, displayTimeAgo ? _jsx("div", { children: timeAgo }) : null] })) : (_jsxs(_Fragment, { children: [formattedDateTime, displayTimeAgo ? ` (${timeAgo})` : ''] })) }));
+    return (_jsx("time", { className: className, dateTime: date.toISOString(), title: date.toLocaleString(locale), children: isMultiline ? (_jsxs(_Fragment, { children: [formattedDateTime ? _jsx("div", { children: formattedDateTime }) : null, displayTimeAgo ? _jsx("div", { children: timeAgo }) : null] })) : (_jsxs(_Fragment, { children: [formattedDateTime, displayTimeAgo ? ` (${timeAgo})` : ''] })) }));
 };
-export const DateTime = memo(component);
+export const DateTime = memo(DateTimeComponent);

package/lib/esm/hooks/asmj/createQpqRuntimeDefinition.js

@@ -32,7 +32,7 @@ export function useQpqRuntimeState(atom, name) {
         const info = atom(name);
         info.state = newState;
         setState(newState);
-    }, [setState]);
+    }, [atom, name, setState]);
     const getState = useCallback(() => {
         const state = atom(name).state;
         return state;

package/lib/esm/hooks/asmj/index.d.ts

@@ -1,5 +1,5 @@
 export * from './actionProcessor';
-export * from "./bubbleReducer";
+export * from './bubbleReducer';
 export * from './createQpqRuntimeDefinition';
 export * from './QpqContextProvider';
 export * from './QpqMappedApi';

package/lib/esm/hooks/asmj/index.js

@@ -1,5 +1,5 @@
 export * from './actionProcessor';
-export * from "./bubbleReducer";
+export * from './bubbleReducer';
 export * from './createQpqRuntimeDefinition';
 export * from './QpqContextProvider';
 export * from './QpqMappedApi';

package/lib/esm/hooks/asmj/useQpqRuntime.js

@@ -31,6 +31,7 @@ export function useQpqRuntime(atom, mainStory, name, getActionProcessors = () =>
         if (mainStory) {
             resolver(mainStory)();
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return [api, state, dispatch];
 }

package/lib/esm/hooks/useAsyncEffect.js

@@ -19,5 +19,8 @@ export const useAsyncEffect = (effect, deps) => {
                 }
             });
         };
+        // The dependency list is supplied by the caller, so it can't be statically
+        // verified here — this hook is a passthrough wrapper around useEffect.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
 };

package/lib/esm/hooks/useQpq.js

@@ -3,6 +3,7 @@ import { createRuntime, defineModule, QpqRuntimeType, } from 'quidproquo-core';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useActionProcessors } from '../actionProcessor';
 import { useQpqContextValues } from './asmj/QpqContextProvider';
+import { useEffectCallback } from './useEffectCallback';
 function* withVersionCheck(story, versionRef, capturedVersion) {
     let nextValue = undefined;
     while (true) {
@@ -29,20 +30,26 @@ export function useQpq(getActionProcessors = async () => ({})) {
     const contextGetActionProcessors = useActionProcessors();
     const versionRef = useRef(0);
     useEffect(() => {
+        const capturedVersionRef = versionRef;
         return () => {
-            versionRef.current++;
+            capturedVersionRef.current++;
         };
     }, []);
+    // Stable identities so the runtime memo can list them as dependencies
+    // without being recreated every render — the runtime always calls the
+    // latest processors through these wrappers.
+    const stableContextGetActionProcessors = useEffectCallback(contextGetActionProcessors);
+    const stableGetActionProcessors = useEffectCallback(getActionProcessors);
     const resolveStory = useMemo(() => createRuntime([defineModule('UI')], {
         depth: 0,
         context: qpqContextValues,
     }, async (qpqConfig, dynamicModuleLoader) => ({
         ...(await getWebActionProcessors(qpqConfig, dynamicModuleLoader)),
-        ...(await contextGetActionProcessors(qpqConfig, dynamicModuleLoader)),
-        ...(await getActionProcessors(qpqConfig, dynamicModuleLoader)),
+        ...(await stableContextGetActionProcessors(qpqConfig, dynamicModuleLoader)),
+        ...(await stableGetActionProcessors(qpqConfig, dynamicModuleLoader)),
     }), () => new Date().toISOString(), logger, `frontend::${'uuid'}`, QpqRuntimeType.UI, async (_runtime) => {
         // noop
-    }), [qpqContextValues]);
+    }), [qpqContextValues, stableContextGetActionProcessors, stableGetActionProcessors]);
     const qpq = useCallback(function getStoryExecutor(story) {
         return async (...args) => {
             const capturedVersion = versionRef.current;

package/lib/esm/hooks/useRunEvery.js

@@ -1,10 +1,14 @@
 import { useEffect, useRef, useState } from 'react';
+import { useEffectCallback } from './useEffectCallback';
 export function useRunEvery(func, intervalSeconds) {
     const [value, setValue] = useState(func);
     const intervalRef = useRef(null);
+    // Stable identity so a caller passing a fresh arrow each render doesn't
+    // tear down and recreate the interval.
+    const stableFunc = useEffectCallback(func);
     useEffect(() => {
         intervalRef.current = window.setInterval(() => {
-            const newValue = func();
+            const newValue = stableFunc();
             setValue(newValue);
         }, intervalSeconds * 1000);
         return () => {
@@ -13,6 +17,6 @@ export function useRunEvery(func, intervalSeconds) {
                 intervalRef.current = null;
             }
         };
-    }, [intervalSeconds]);
+    }, [intervalSeconds, stableFunc]);
     return value;
 }

package/lib/esm/hooks/useThrottledMemo.js

@@ -23,6 +23,9 @@ export function useThrottledMemo(factory, deps, delaySeconds = 1) {
                 timeoutRef.current = null;
             }
         };
+        // The dependency list is supplied by the caller, so it can't be statically
+        // verified here — this hook is a throttled wrapper around useMemo semantics.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [...deps, delaySeconds]);
     return value;
 }

package/lib/esm/useFieldBinding/useFieldBinding.js

@@ -9,9 +9,9 @@ export const useFieldBinding = (computedAtom, someSetter, valueExtractor) => {
         someSetter(newValue);
     };
     useEffect(() => {
-        if (computedValue !== value) {
-            setValue(computedValue);
-        }
+        // React bails out when the value is unchanged, so no equality guard is
+        // needed — and local edits (which also change `value`) don't re-run this.
+        setValue(computedValue);
     }, [computedValue]);
     return [value, handleChange];
 };

package/lib/esm/webSocketQueue/hooks/actionProcessor/getServiceRequestActionProcessor.js

@@ -1,7 +1,7 @@
 import { actionResult, actionResultError } from 'quidproquo-core';
 import { ServiceActionType } from 'quidproquo-webserver';
 export const getServiceRequestActionProcessor = (sendEventRef) => ({
-    [ServiceActionType.Request]: async ({ serviceName, method, payload, }) => {
+    [ServiceActionType.Request]: async ({ serviceName, method, payload }) => {
         const response = await sendEventRef.current?.({ type: `qpq/serviceRequest/${serviceName}/${method}`, payload });
         if (response && !response.success) {
             return actionResultError(response.error.errorType, response.error.errorText, response.error.errorStack);

package/lib/esm/webSocketQueue/hooks/useQpqWebsocketQueueRuntime.d.ts

@@ -3,9 +3,4 @@ import { AnyWebSocketQueueEventMessageWithCorrelation } from 'quidproquo-webserv
 import { QpqRuntimeDefinition } from '../../hooks/asmj/createQpqRuntimeDefinition';
 import { QpqApi, QpqMappedApi } from '../../hooks/asmj/QpqMappedApi';
 import { ActionProcessorListResolverFactory } from '../../hooks/asmj/useQpqRuntime';
-export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [
-    QpqMappedApi<TApi>,
-    TState,
-    (action: any) => void,
-    (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>
-];
+export declare function useQpqWebsocketQueueRuntime<TState, TAction, TApi extends QpqApi>(atom: QpqRuntimeDefinition<TState, TAction, TApi>, mainStory?: Story<any, any>, name?: string, getActionProcessors?: ActionProcessorListResolverFactory<TState>): [QpqMappedApi<TApi>, TState, (action: any) => void, (event: Omit<AnyWebSocketQueueEventMessageWithCorrelation, 'correlationId'>) => Promise<any>];

package/lib/esm/webSocketQueue/hooks/useWebsocketQueueSendEvent.js

@@ -1,5 +1,5 @@
 import { WebsocketServiceEvent } from 'quidproquo-web';
-import { WebSocketQueueServerMessageEventType } from 'quidproquo-webserver';
+import { WebSocketQueueServerMessageEventType, } from 'quidproquo-webserver';
 import { useRef } from 'react';
 import { useFastCallback } from '../../hooks';
 import { useSubscribeToWebsocket, useWebsocketApi } from '../../websocket';

package/lib/esm/websocket/WebSocketAuthSync/WebSocketAuthSync.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import { useWebsocketAuthSync, useWebsocketPingPong } from './hooks';
 import { WebSocketAuthContext } from './WebSocketAuthContext';
-const component = ({ children, accessToken }) => {
+const WebSocketAuthSyncComponent = ({ children, accessToken }) => {
     const isAuthenticated = useWebsocketAuthSync(accessToken);
     // Keep the active websocket alive
     useWebsocketPingPong();
-    return (_jsx(WebSocketAuthContext.Provider, { value: isAuthenticated, children: children }));
+    return _jsx(WebSocketAuthContext.Provider, { value: isAuthenticated, children: children });
 };
-export const WebSocketAuthSync = memo(component);
+export const WebSocketAuthSync = memo(WebSocketAuthSyncComponent);

package/lib/esm/websocket/WebSocketAuthSync/hooks/useWebsocketAuthSync.js

@@ -31,6 +31,6 @@ export const useWebsocketAuthSync = (accessToken) => {
     useSubscribeToWebsocket(WebsocketServiceEvent.OPEN, updateAuthTokens);
     useSubscribeToWebsocket(WebsocketServiceEvent.CLOSE, () => setIsAuthenticated(false));
     // Sync the tokens when they change
-    useEffect(updateAuthTokens, [accessToken, websocketApi, isAuthenticated]);
+    useEffect(updateAuthTokens, [updateAuthTokens, accessToken, websocketApi, isAuthenticated]);
     return isAuthenticated;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quidproquo-web-react",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/esm/index.js",
@@ -34,8 +34,8 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
-    "quidproquo-core": "0.1.0",
-    "quidproquo-tsconfig": "0.1.0",
+    "quidproquo-core": "0.1.2",
+    "quidproquo-tsconfig": "0.1.2",
     "typescript": "^5.8.2"
   },
   "peerDependencies": {
@@ -43,10 +43,10 @@
   },
   "dependencies": {
     "jotai": "^2.12.1",
-    "quidproquo-actionprocessor-node": "0.1.0",
-    "quidproquo-actionprocessor-web": "0.1.0",
-    "quidproquo-web": "0.1.0",
-    "quidproquo-webserver": "0.1.0",
+    "quidproquo-actionprocessor-node": "0.1.2",
+    "quidproquo-actionprocessor-web": "0.1.2",
+    "quidproquo-web": "0.1.2",
+    "quidproquo-webserver": "0.1.2",
     "symbol-observable": "^4.0.0"
   }
-}
+}