⚡ react-enforcer-hooks

A collection of curated, performance-focused React Hooks designed to enforce best practices and standardize state management in Next.js and React applications.

Stop reinventing the wheel and ensure your team uses modern, high-quality patterns for common application tasks like API data fetching and state persistence.

✨ Features

• Standardized Utility: Provides robust implementations for common tasks, minimizing boilerplate and ensuring clean code across your team.

• Performance Focus: Includes debounced state management to reduce unnecessary re-renders and API calls.

• Seamless State Persistence: Simple hooks for reliable state management using browser APIs (like Local Storage).

📦 Installation

Install the package via npm or yarn:

npm install react-enforcer-hooks
# or
yarn add react-enforcer-hooks


All Enforced Hooks (16 Total)

useDebounce: Delays value updates until a specified time passes. Optimizes frequent input handling.

useThrottle: Limits the rate at which a function is executed. Essential for scroll and resize events.

useAsync: Manages the state (loading, data, error) of any async function call. Simplifies complex state logic.

useFetch: Standardized data fetching hook. Reduces API boilerplate.

useLocalStorage: Persists state in localStorage safely. Ideal for theme or user settings.

useDarkMode: Manages light/dark theme, respecting system preferences. Enhances UX and accessibility.

usePrevious: Returns the value of a state or prop from the previous render. Used for cleaner dependency comparison.

useComponentDidUpdate: Executes an effect only after component updates, not on initial mount. Safer lifecycle management.

useTimeout: Encapsulated and safer management of setTimeout logic inside functional components.

useClickOutside: Detects clicks outside of a specific referenced element. Crucial for closing modals and dropdowns.

useHover: Tracks whether the mouse is currently hovering over a DOM element. Great for interactive UI.

useIsOnline: Tracks the user's real-time network connectivity status. Enables smart network handling.

useScreenSize: Provides the window's current width and height. Enables advanced component responsiveness.

useHashState: Syncs a component's state with the URL hash (#id). Great for sharable tab/accordion states.

useScrollToTop: Forces the window to scroll to the top upon component mount. Standardizes Next.js page transitions.

useIntersectionObserver: Observes if a component is visible in the viewport. Key for lazy loading and animations.