Skip to main content
MicroCBM provides a collection of custom React hooks to simplify common patterns in the application. These hooks handle permission-based content guarding, URL-synced state, debounced input, and presigned URL generation for secure file access.

Available Hooks

useContentGuard

Permission-based access control with role checking and user session management

useDebouncedState

Debounced state management for input fields with delayed callbacks

useUrlState

Synchronize component state with URL search parameters

usePresignedUrl

Fetch presigned URLs for secure S3 file access with automatic loading states

Hook Categories

Authentication & Authorization

useContentGuard provides comprehensive permission checking for route and component-level access control. It fetches user session data, validates permissions against required roles, and provides loading states during authentication checks.

State Management

useDebouncedState simplifies debounced input handling for search fields and forms, reducing unnecessary API calls or re-renders. useUrlState synchronizes component state with URL query parameters, enabling shareable links and browser navigation for filters and tabs.

File Management

usePresignedUrl handles the fetching of presigned URLs for secure file access, managing loading and error states automatically.

Usage Pattern

All hooks are exported from the central hooks index:
import { useContentGuard, useDebouncedState, useUrlState, usePresignedUrl } from "@/hooks";

Client-Side Only

All hooks are marked with "use client" and must be used in Client Components. They rely on React hooks like useState, useEffect, and Next.js navigation hooks that only work on the client side.

Next Steps

Server Actions

Learn about server-side data fetching and mutations

Type Definitions

Explore TypeScript types used throughout the application

Build docs developers (and LLMs) love