useDebounce

useDebounce is a custom React hook that delays updating a value until it has stopped changing for a specified amount of time. Instead of reacting to every change immediately, the hook waits for the given delay before returning the latest value.

This is especially useful for optimizing performance in scenarios like search inputs, API requests, filtering, validation, auto-save, and other expensive operations. Every time the value changes, the previous timer is cleared and a new timer starts. Only after the delay passes without any further changes is the debounced value updated.

Parameters

The value that should be debounced.

Type: any (JavaScript) / T (TypeScript)

This can be any valid JavaScript value, including:

• String
• Number
• Boolean
• Object
• Array
• Function
• Any custom type

The amount of time, in milliseconds, that the hook waits before updating the debounced value.

Type: number

Default Value: 500

Example values:

• 300 → Fast response
• 500 → Recommended for most search inputs
• 1000 → Slower updates for expensive operations

Returns

Returns the latest debounced value after the specified delay has elapsed without any further changes.

Common Use Cases

• Search bars with live API requests
• Product search in e-commerce applications
• Autocomplete suggestions
• Client-side filtering
• Form validation
• Auto-save functionality
• Dashboard filters
• Username availability checking
• Documentation search
• File explorer search
• Chat conversation search
• Large dataset filtering
• Expensive calculations
• Live analytics filters
• Dynamic reports

useFetch

useFetch is a custom React hook that simplifies fetching data from APIs while managing the common states involved in asynchronous requests. Instead of manually handling loading, success, and error states in every component, the hook encapsulates this logic into a reusable solution.

When the hook is executed, it sends a request to the specified endpoint and automatically updates its internal state based on the request lifecycle. While the request is in progress, it provides a loading state. Once the request completes successfully, it stores and returns the received data. If the request fails for any reason, it captures the error so the application can respond appropriately.

Depending on its implementation, the hook can also support features such as custom request methods, request headers, request bodies, dependency-based refetching, request cancellation, and manual refetching, making it suitable for both simple and advanced API interactions.

By centralizing data-fetching logic, useFetch helps reduce repetitive code, improves maintainability, and keeps components focused on rendering UI rather than managing network requests.

Parameters

The API endpoint from which data should be fetched.

Type: string

This can be a relative endpoint or a fully qualified URL.

An optional configuration object passed to the Fetch API.

Type: RequestInit

Common options include:

• HTTP method (GET, POST, PUT, PATCH, DELETE)
• Request headers
• Request body
• Credentials
• Signal for request cancellation
• Cache configuration

An optional dependency array that determines when the request should be executed again.

Type: Array

Whenever one of the dependencies changes, the hook can automatically perform a new request.

Returns

The hook typically returns an object containing:

The data returned by the API after a successful request.

A boolean indicating whether a request is currently in progress.

The error encountered during the request, if one occurred.

A function that manually triggers the request again without needing to refresh the page.

Common Use Cases

• Fetching user profiles
• Product listings
• Blog posts
• Dashboard statistics
• Search results
• Weather information
• News feeds
• Cryptocurrency prices
• Stock market data
• Notifications
• Comments and reviews
• Infinite scrolling
• Pagination
• Admin dashboards
• Analytics data

useClipboard

useClipboard is a custom React hook that simplifies copying text to the user's clipboard while managing the copy state. Instead of directly interacting with the Clipboard API in every component, the hook provides a reusable interface for copying content and tracking whether the operation was successful.

When the copy function is called, the hook attempts to write the provided text to the system clipboard using the browser's Clipboard API. If the operation succeeds, it updates the copied state, allowing the UI to display feedback such as "Copied!". After a configurable timeout, the copied state is automatically reset, making it easy to show temporary success messages.

The hook also handles failed copy operations by exposing an error state, enabling applications to display appropriate error messages or fallback behavior when clipboard access is unavailable.

Designed for modern browsers, useClipboard is lightweight, reusable, and suitable for React and Next.js applications.

Parameters

The amount of time, in milliseconds, before the copied state is automatically reset.

Type: number

Default Value: 2000

Returns

A function that copies the provided text to the user's clipboard.

A boolean indicating whether the most recent copy operation was successful.

Contains any error that occurred while attempting to copy text to the clipboard. Returns null when no error exists.

Common Use Cases

• Copying coupon codes
• Copying referral links
• Copying invite links
• Sharing URLs
• Copying email addresses
• Copying phone numbers
• Copying API keys
• Copying access tokens
• Copying code snippets
• Copying terminal commands
• Copying wallet addresses
• Copying usernames
• Copying generated passwords
• Copying OTP or verification codes
• Copying configuration values

useToggle

useToggle is a custom React hook that simplifies managing boolean state. It provides an easy way to switch between true and false without manually writing state update logic in every component.

The hook initializes with a default boolean value and returns the current state along with a toggle function. Calling the toggle function without any arguments automatically flips the current value. Optionally, a boolean value can be passed to explicitly set the state instead of toggling it.

useToggle is ideal for controlling UI elements that have two possible states, such as modals, dialogs, dropdowns, sidebars, password visibility, themes, and feature flags. By encapsulating toggle logic into a reusable hook, components become cleaner, easier to read, and more maintainable.

Parameters

The initial boolean state of the hook.

Type: boolean

Default Value: false

Returns

The current boolean state.

A function used to toggle the current value or explicitly set it.

• Calling toggle() switches between true and false.
• Calling toggle(true) sets the value to true.
• Calling toggle(false) sets the value to false.

Common Use Cases

• Opening and closing modals
• Toggling dropdown menus
• Showing and hiding sidebars
• Password visibility toggle
• Switching between Light and Dark mode
• Expanding and collapsing accordions
• Enabling and disabling feature flags
• Showing and hiding tooltips
• Displaying notifications
• Toggling mobile navigation menus
• Switching between edit and view modes