Skip to content

Enable React Compiler? #21

@liddiard

Description

@liddiard

Part of the performance refactors to make the map more responsive added a lot of useCallback, useMemo, and whole-component memoization to the app. React Compiler could make a lot of this "cruft" code unnecessary, but as of writing it's still in its infancy with Next.js support.

Evaluate whether it's worth enabling.

Claude Code summary of MapLibre GL JS map performance refactor for reference, indicating some changes that may be rendered unnecessary with React Compiler:

Changes Made

  Phase 1: Fixed updateSetting (Highest Impact)

  app/providers/settings.tsx
  - Added early-exit guard: if settings[key] === value, return immediately (no state updat
e)
  - Debounced cookie writes using useRef for timeout (100ms delay)
  - Wrapped updateSetting in useCallback
  - Memoized context value with useMemo

  app/components/Map/index.tsx
  - Added guard in onMove: only calls updateSetting('follow', false) when settings.follow
is actually true

  Phase 2: Memoized Components

  app/components/Map/TrainMarker.tsx
  - Wrapped with React.memo and custom comparison
  - Uses 0.5 zoom threshold to skip re-renders for minor zoom changes

  app/components/Map/TrainLabel.tsx
  - Same approach as TrainMarker

  app/components/Map/Crosshair.tsx
  - Wrapped with React.memo and custom comparison with zoom threshold

  Phase 3: Stabilized Callbacks

  app/components/Map/index.tsx
  - Wrapped navigateToTrain in useCallback
  - Wrapped handleMapClick in useCallback
  - Memoized controlStyle with useMemo

  Phase 4: Memoized Context Values

app/providers/train.tsx
  - Memoized { trains, stations, isLoading, error } value

  app/providers/bottomSheet.tsx
  - Wrapped setters in useCallback
  - Memoized context value

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestquestionFurther information is requested

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions