Contexts and hooks

🧠 Contexts & Hooks Overview

Modern React applications thrive on composability and state encapsulation, and this project embraces those principles through a well-structured system of context providers and custom hooks. These tools allow us to manage global state, share logic across components, and keep our UI reactive and maintainable.

React’s official documentation describes Hooks as “functions that let you ‘hook into’ React state and lifecycle features from function components.” Custom hooks, in particular, allow us to extract reusable logic — such as breakpoint detection or theme toggling — into isolated, testable units. This keeps our components clean and focused on rendering.

Similarly, Context is described by React as “a way to pass data through the component tree without having to pass props down manually at every level.” In this project, we use context providers to manage layout state, user preferences, theme configuration, and notification delivery. Each provider wraps the application at a high level, exposing values and functions through custom hooks like useLayout, usePreference, useTheme, and useNotification.

The notification flow now also uses hook-based event publishing rather than a global DOM event bus. useNotificationEvents exposes lightweight publish and subscription helpers for app notifications, while useScopedNotification powers page-local inline banners such as Waste Search and My Client List errors. Service worker and PWA lifecycle messages feed the same pipeline through a thin external bridge.

Together, contexts and hooks form the backbone of our app’s interactivity and responsiveness. They allow us to:

• Centralize global state management
• Avoid prop drilling
• Enable dynamic UI behavior (e.g. responsive layouts, theme switching)
• Promote clean separation of concerns

📚 Context & Hook Documentation

Each context and hook is documented in its own file. You can explore them here:

• Auth Context
• Layout Context
• Notification Context
• Page Title Context
• Preference Context
• Theme Context
• Notification Events
• Breakpoint Hook
• Debounce Hook
• Offline Mode Hook
• Outside Click Hook
• Sync Filters to Search Params Hook
• Sync Preferences to Filters Hook