Custom React Hooks

Relevant source files

The following files were used as context for generating this wiki page:

• hooks/useGitHub.ts
• hooks/useWakaTime.ts
• api/index.ts
• lib/types.ts
• pages/Stats.tsx
• components/ui/WakaTimeDashboard.tsx

Custom React hooks in the pcstyledev project serve as the primary interface between the frontend UI components and the backend API services. These hooks encapsulate complex logic for data fetching, state management, error handling, and component lifecycle management, specifically focusing on external integration data from GitHub and WakaTime.

The hooks architecture relies on a standardized pattern involving useState, useEffect, useCallback, and useRef to ensure type-safe data retrieval and to prevent memory leaks during component unmounting. These hooks provide components with real-time or cached "system metrics" used throughout the dashboard and portfolio interfaces.

Data Fetching Architecture

The custom hooks follow a consistent implementation pattern to fetch data from the internal Hono-based API. Each hook typically manages four state variables: the data object, a loading boolean, an error string, and a refetch function.

GitHub Integration Hooks

The GitHub hooks interface with the /api/github/* endpoints to retrieve contribution history and general profile statistics. These hooks are critical for populating the GitHubMainStats and VisualContributionHeatmap components.

useGitHubContributions

Retrieves a detailed calendar of contributions, including daily counts and activity levels (0-4).

• Endpoint: /api/github/contributions
• Return Type: GitHubContributions

useGitHubStats

Fetches aggregate user statistics, including repository counts, star totals, and the most active recent repository.

• Endpoint: /api/github/stats
• Return Type: GitHubStats

Sources: hooks/useGitHub.ts:11-46, hooks/useGitHub.ts:54-88, lib/types.ts:74-106

WakaTime Integration Hooks

WakaTime hooks manage the retrieval of coding productivity data. Unlike the GitHub hooks, these implementations often include polling mechanisms to reflect "live" coding activity in the UI.

useWakaTimeSummary

Provides a 7-day overview of coding activity, including language distribution and editor usage. It uses a mountedRef to ensure state updates are only performed if the component is still in the DOM.

• Endpoint: /api/wakatime/summary
• Return Type: WakaTimeSummary

useWakaTimeStatus

A polling-based hook that monitors current coding activity. It accepts a pollInterval parameter (defaulting to 30,000ms) to periodically refresh the user's active project and language status.

Hook Return Structures

All custom hooks return a consistent result object to simplify consumption in the UI layers.

Field	Type	Description
summary / stats / status	T | null	The typed data returned from the API.
loading	boolean	Indicates if an active fetch is in progress.
error	string | null	Contains the error message if the fetch fails.
refetch	() => void	Manual trigger to re-execute the fetch logic.

Sources: hooks/useGitHub.ts:5-10, hooks/useWakaTime.ts:5-10, hooks/useWakaTime.ts:50-54

Implementation Details: The mountedRef Pattern

To prevent "Can't perform a React state update on an unmounted component" warnings, the hooks implement a safety pattern using useRef. This is particularly important for the dashboard where users might navigate away while heavy stats are being processed.

const mountedRef = useRef(true)

useEffect(() => {
  mountedRef.current = true
  return () => {
    mountedRef.current = false
  }
}, [])

// Inside fetch:
if (mountedRef.current) {
  setSummary(data)
}

Sources: hooks/useWakaTime.ts:16-22, hooks/useGitHub.ts:17-23

Summary

Custom React Hooks in this project act as a robust data layer, abstracting the complexities of the Edge Runtime API and external platform authentication. By providing standardized state management for GitHub and WakaTime data, they enable the creation of highly reactive, data-rich components like the WakaTimeDashboard and Stats pages while ensuring system stability through unmount protection and controlled polling.