Hooks

@vef-framework-react/hooks is not just a miscellaneous utilities package. It mainly provides page-level hooks that appear frequently in real applications but do not fit naturally inside components or stores.

Core Hooks to Know First

Hook	Purpose
useDictionaryQuery	Fetch options from the application data-dictionary function
useDataOptionsQuery	Convert arbitrary list data into a normalized options shape
useCheckPermission	Get a reusable permission-check function
useIsAuthorized	Check whether current permissions satisfy a condition
useAuthorizedItems	Filter configuration items by permission
useHasFetching	Check whether a class of queries is still loading
useHasMutating	Check whether a class of mutations is still running

useDictionaryQuery

Once appContext.dictionaryQueryFn is provided in createApp().render(), dictionaries can be requested using an alias map. Each alias becomes a key on the resolved data:

const { data, isFetching } = useDictionaryQuery({
  gender: "common.gender",
  status: "user.status"
});

// data is `undefined` until the query resolves.
const genderOptions = data?.gender ?? [];

Notes:

• useDictionaryQuery(keys, options?) returns a native UseQueryResult<TData>; data is undefined until the request finishes successfully.
• options.enabled defers the request, e.g. while upstream parameters are not ready.
• options.select lets callers reshape the resolved alias map. Its identity is forwarded to React Query, so stabilize keys and select with module scope, as const, useMemo, or useCallback to avoid invalidating memoization on every render.
• For typical select usage prefer useDictionaryOptionsSelect, which wraps useDictionaryQuery and produces ready-to-spread SelectProps per alias.

useDataOptionsQuery

When backend data is not already shaped as label/value, this hook provides a consistent conversion layer.

const roleOptions = useDataOptionsQuery({
  queryOptions: {
    queryKey: [findRoleOptions.key],
    queryFn: findRoleOptions
  },
  labelKey: "name",
  valueKey: "id"
});

It returns:

• options
• query state fields
• the rest of the underlying query result

Permission Hooks

useCheckPermission

const checkPermission = useCheckPermission();

if (checkPermission("sys:user:create")) {
  // ...
}

useIsAuthorized

const canEdit = useIsAuthorized(["sys:user:update", "sys:user:write"], "any");

useAuthorizedItems

This is especially useful for menus, button configs, and action lists that are declared first and filtered later.

const visibleActions = useAuthorizedItems([
  { key: "create", permTokens: "sys:user:create" },
  { key: "delete", permTokens: "sys:user:delete" }
]);

Loading-State Hooks

useHasFetching

const isUserPageFetching = useHasFetching(findUserPage.key, searchParams);

useHasMutating

const isCreatingUser = useHasMutating(createUser.key);

These two hooks are especially useful for:

• page-level loading coordination
• disabling actions while requests are running
• avoiding duplicate submissions

Other Frequently Used Exports

@vef-framework-react/hooks also re-exports several widely used hooks from Mantine, the AI SDK, and hotkey libraries, including:

• useDebouncedValue
• useElementSize
• useDocumentTitle
• useInterval
• useMediaQuery
• useHotkeys
• useChat

Their main value is consistency: the project can import these capabilities from the framework layer instead of exposing several separate third-party entry points in business code.