Tokopedia Lite
Homepage Performance

// Profile hydration in Chrome DevTools Performance tab
// 1. Open DevTools > Performance
// 2. Enable 'CPU throttling' to simulate mobile (4x slowdown)
// 3. Click record, reload page
// 4. Stop recording after page stabilizes
// 5. Look for 'Hydration' phase in the timeline

// Before optimization: 1.39s
// After optimization: 885ms
// Reduction: 36.1%

# Run bundle analyzer
ANALYZE=true npm run build

# Key findings from analysis:
# - chunk.home-left-carousel.js: 3.8 MB (before)
# - chunk.home-left-carousel.js: 619 kB (after)
# Reduction: 83.7%

// Before: Single request for all 33 channels
{
  "data": {
    "channels": [
      // 33 channel objects
      // Response size: ~900KB
    ]
  }
}

// After: Paginated request (first 10 channels)
{
  "data": {
    "channels": [
      // 10 channel objects
      // Response size: ~280KB
    ],
    "pagination": {
      "page": 1,
      "totalPages": 4,
      "hasMore": true
    }
  }
}

// Complete Checkpoint System Implementation

// types.ts
interface CheckpointStateType {
  dc: boolean;
  feed: boolean;
  seo: boolean;
}

export type SetCheckpointParamType = keyof CheckpointStateType;

// store.ts - External Store Pattern
import { startTransition } from 'react';

const createStore = () => {
  let state: CheckpointStateType = { dc: false, feed: false, seo: false };
  const listeners = new Set<() => void>();

  return {
    getSnapshot: (key: SetCheckpointParamType) => state[key],
    getServerSnapshot: () => false,
    subscribe: (listener: () => void) => {
      listeners.add(listener);
      return () => listeners.delete(listener);
    },
    setStore: (key: SetCheckpointParamType) => {
      if (state[key]) return; // Guard against duplicates
      state = { ...state, [key]: true };
      listeners.forEach(l => startTransition(l));
    },
  };
};

export const checkpointStore = createStore();

// useCheckpoint.ts - React Hook
import { useCallback, useSyncExternalStore } from 'react';
import { postTask } from '@scheduler/web';

export const useCheckpoint = (checkpoint?: SetCheckpointParamType) => {
  const getSnapshot = useCallback(
    () => checkpoint ? checkpointStore.getSnapshot(checkpoint) : false,
    [checkpoint]
  );

  const onReachCheckpoint = useCallback((key: SetCheckpointParamType) => {
    postTask(() => checkpointStore.setStore(key), {
      priority: 'background', // Non-urgent, defers until idle
    });
  }, []);

  const snapshot = useSyncExternalStore(
    checkpointStore.subscribe,
    getSnapshot,
    checkpointStore.getServerSnapshot
  );

  return [snapshot, onReachCheckpoint] as const;
};