Hooks Reference

The 8harath/bwm project utilizes React hooks to manage responsive states and complex data filtering for the Indian startup funding datasets.

Responsive Hooks

use-mobile

A utility hook used to detect if the current viewport width is below the mobile threshold (typically 768px). This is essential for components that require programmatic layout changes rather than CSS media queries alone.

Interface

function useIsMobile(): boolean

Usage

import { useIsMobile } from "@/hooks/use-mobile"

export function NavComponent() {
  const isMobile = useIsMobile()

  return (
    <div>
      {isMobile ? <MobileMenu /> : <DesktopNavbar />}
    </div>
  )
}

Data Lifecycle Hooks

The application processes large arrays of funding data (found in @/data/funding-data). While these are currently implemented as useMemo blocks within page components, they represent the core logic for the dashboard's interactivity.

useMemo (Data Filtering Pattern)

In the ExplorePage, complex filtering logic is wrapped in useMemo to prevent expensive re-calculations on every render when non-data states (like UI toggles) change.

Parameters Monitored:

• selectedSectors: string[]
• selectedStages: string[]
• fundingRange: [number, number]
• searchQuery: string (Company name search)
• investorSearch: string
• sortBy: "date" | "amount"

Implementation Logic: The hook filters the global fundingData array by applying a multi-pass filter:

1. Sector/Stage Match: Checks if the deal belongs to selected categories.
2. Amount Match: Filters based on the fundingRange (in INR Crores).
3. Search Match: Case-insensitive substring matching for companies and investors.
4. Sort: Orders the final result by the selected criteria.

Usage Example:

const filteredDeals = useMemo(() => {
  return fundingData
    .filter((deal) => {
      const sectorMatch = selectedSectors.length === 0 || deal.sectors.some((s) => selectedSectors.includes(s))
      const amountMatch = deal.amount >= fundingRange[0] && deal.amount <= fundingRange[1]
      return sectorMatch && amountMatch
    })
    .sort((a, b) => b.amount - a.amount)
}, [selectedSectors, fundingRange])

useMemo (Analytics Aggregation)

In the AnalyticsDashboard, data is transformed into chart-ready formats for recharts. This hook processes the raw fundingData into multiple specialized datasets.

Returned Data Shapes:

• fundingByMonth: Aggregated amounts grouped by month/year for line charts.
• fundingBySector: Top 10 sectors by total funding volume.
• topInvestors: Ranking of investors by deal count and volume.
• yearlyComparison: YoY growth metrics.

Usage Example:

const [fundingByMonth, fundingBySector] = useMemo(() => {
  // Logic to filter only disclosed amounts
  const disclosedDeals = fundingData.filter((d) => d.amount > 0)
  
  // Aggregation logic...
  return [monthData, sectorData]
}, [fundingData])

Internal Navigation Hooks

useParams

Used within dynamic deal routes (app/deal/[id]/page.tsx) to retrieve the unique identifier for a specific funding round.

Usage:

const params = useParams()
const id = Array.isArray(params?.id) ? params.id[0] : params?.id
const deal = fundingData.find((d) => d.id === id)