@sylphx/lens-react 2.1.5 → 2.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +5 -3
- package/package.json +1 -1
- package/src/hooks.ts +7 -3
package/dist/index.js
CHANGED
|
@@ -52,19 +52,21 @@ function useQuery(selector, paramsOrDeps, options) {
|
|
|
52
52
|
const client = useLensClient();
|
|
53
53
|
const isAccessorMode = Array.isArray(paramsOrDeps);
|
|
54
54
|
const paramsKey = !isAccessorMode ? JSON.stringify(paramsOrDeps) : null;
|
|
55
|
+
const selectorRef = useRef(selector);
|
|
56
|
+
selectorRef.current = selector;
|
|
55
57
|
const query = useMemo(() => {
|
|
56
58
|
if (options?.skip)
|
|
57
59
|
return null;
|
|
58
60
|
if (isAccessorMode) {
|
|
59
|
-
const querySelector =
|
|
61
|
+
const querySelector = selectorRef.current;
|
|
60
62
|
return querySelector(client);
|
|
61
63
|
}
|
|
62
|
-
const routeSelector =
|
|
64
|
+
const routeSelector = selectorRef.current;
|
|
63
65
|
const route = routeSelector(client);
|
|
64
66
|
if (!route)
|
|
65
67
|
return null;
|
|
66
68
|
return route(paramsOrDeps);
|
|
67
|
-
}, isAccessorMode ? [client, options?.skip, ...paramsOrDeps] : [client,
|
|
69
|
+
}, isAccessorMode ? [client, options?.skip, ...paramsOrDeps] : [client, paramsKey, options?.skip]);
|
|
68
70
|
const selectRef = useRef(options?.select);
|
|
69
71
|
selectRef.current = options?.select;
|
|
70
72
|
const initialState = {
|
package/package.json
CHANGED
package/src/hooks.ts
CHANGED
|
@@ -226,6 +226,10 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
|
|
|
226
226
|
// Stable params key for Route + Params mode
|
|
227
227
|
const paramsKey = !isAccessorMode ? JSON.stringify(paramsOrDeps) : null;
|
|
228
228
|
|
|
229
|
+
// Use ref to track selector - avoids needing useCallback from users
|
|
230
|
+
const selectorRef = useRef(selector);
|
|
231
|
+
selectorRef.current = selector;
|
|
232
|
+
|
|
229
233
|
// Create query - memoized based on route/params or deps
|
|
230
234
|
const query = useMemo(
|
|
231
235
|
() => {
|
|
@@ -233,11 +237,11 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
|
|
|
233
237
|
|
|
234
238
|
if (isAccessorMode) {
|
|
235
239
|
// Accessor mode: selector returns QueryResult directly
|
|
236
|
-
const querySelector =
|
|
240
|
+
const querySelector = selectorRef.current as QuerySelector<TResult>;
|
|
237
241
|
return querySelector(client);
|
|
238
242
|
}
|
|
239
243
|
// Route + Params mode: selector returns route function
|
|
240
|
-
const routeSelector =
|
|
244
|
+
const routeSelector = selectorRef.current as RouteSelector<TParams, TResult>;
|
|
241
245
|
const route = routeSelector(client);
|
|
242
246
|
if (!route) return null;
|
|
243
247
|
return route(paramsOrDeps as TParams);
|
|
@@ -247,7 +251,7 @@ export function useQuery<TParams, TResult, TSelected = TResult>(
|
|
|
247
251
|
? // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
248
252
|
[client, options?.skip, ...(paramsOrDeps as DependencyList)]
|
|
249
253
|
: // eslint-disable-next-line react-hooks/exhaustive-deps
|
|
250
|
-
[client,
|
|
254
|
+
[client, paramsKey, options?.skip],
|
|
251
255
|
);
|
|
252
256
|
|
|
253
257
|
// Use ref for select to avoid it being a dependency
|