React Batcher

React에서 API 요청을 배치로 처리하고 외부 store와 동기화하는 라이브러리입니다. useSyncExternalStore를 사용하여 React 18+와 완벽하게 호환됩니다.

특징

🚀 배치 처리: 여러 개별 요청을 하나의 배치 요청으로 합쳐서 처리
🔄 Store 통합: Zustand, Redux 등 다양한 상태 관리 라이브러리와 호환
⚡ 성능 최적화: 중복 요청 제거 및 지능적인 캐싱
🎯 TypeScript 지원: 완전한 타입 안정성
🪝 React Hooks: 간편한 React 통합
🛠️ 커스터마이징: 버퍼 시간, 배치 크기 등 설정 가능
💾 상태 영속성: localStorage/sessionStorage를 통한 상태 저장

설치

npm install react-batcher
# 또는
yarn add react-batcher
# 또는
pnpm add react-batcher

기본 사용법

1. 타입 정의

import { BatchableItem } from 'react-batcher';

// 모든 아이템은 반드시 id 필드를 가져야 합니다
interface User extends BatchableItem {
  id: string;
  name: string;
  email: string;
  avatar?: string;
}

2. Store 설정 (Zustand 예제)

import { create } from 'zustand';
import { BatchManager, createSimpleZustandAdapter } from 'react-batcher';

// Zustand store 생성
const useUserStore = create<Record<string, User>>(() => ({}));

// Store 어댑터 생성
const userStoreAdapter = createSimpleZustandAdapter({
  getState: useUserStore.getState,
  setState: useUserStore.setState,
  subscribe: useUserStore.subscribe,
});

3. API 함수 정의

// BatchFetcher 타입: (ids: string[]) => Promise<T[]>
async function fetchBatchUsers(userIds: string[]): Promise<User[]> {
  const response = await fetch('/api/batch-users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ userIds }),
  });

  const data = await response.json();
  return data.users;
}

4. BatchManager 생성

export const userBatchManager = new BatchManager<User>({
  store: userStoreAdapter,
  fetcher: fetchBatchUsers,
  bufferConfig: {
    delayMs: 100, // 100ms 대기 후 배치 처리
    maxBatchSize: 50, // 최대 50개씩 배치 처리
  },
  debug: true,
  onError: (error, failedIds) => {
    console.error('Failed to fetch users:', error, failedIds);
  },
});

5. React 컴포넌트에서 사용

import { useBatchedItem } from "react-batcher";

function UserProfile({ userId }: { userId: string }) {
  const user = useBatchedItem(userBatchManager, userId);

  if (!user) {
    return <div>Loading user...</div>;
  }

  return (
    <div>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      <p>{user.email}</p>
    </div>
  );
}

Export 목록

// 메인 클래스
export { BatchManager } from './BatchManager';

// 타입 정의
export type {
  BatchableItem,
  Store,
  BatchFetcher,
  BufferConfig,
  BatchManagerConfig,
  BatchManagerState,
} from './types';

// React 훅
export {
  useBatchedItem,
  useBatchedItems,
  useAllBatchedItems,
  usePreloadItems,
  useFlushBatch,
  useBatchManagerState,
  useBatchedState,
  useBatchStats,
} from './hooks';

// Store 어댑터
export {
  createZustandAdapter,
  createSimpleZustandAdapter,
} from './adapters/zustand';
export { createReduxAdapter } from './adapters/redux';
export { createMemoryStore } from './adapters/memory';

// 유틸리티
export { createBuffer, type BufferInstance } from './buffer';
export {
  createPersistence,
  loadState,
  saveState,
  clearPersistedState,
  type PersistenceConfig,
} from './persistence';

타입 정의

BatchableItem

배치 처리할 데이터의 기본 인터페이스입니다. 모든 아이템은 반드시 고유한 id를 가져야 합니다.

interface BatchableItem {
  id: string;
}

// 사용 예시
interface User extends BatchableItem {
  id: string;
  name: string;
  email: string;
}

interface Product extends BatchableItem {
  id: string;
  title: string;
  price: number;
}

Store

외부 상태 관리 라이브러리와의 통합을 위한 추상화 인터페이스입니다.

interface Store<T extends BatchableItem> {
  // 현재 store의 상태를 가져오는 함수
  getState: () => Record<string, T>;

  // store 상태 변경을 구독하는 함수
  subscribe: (listener: () => void) => () => void;

  // store 상태를 업데이트하는 함수
  setState: (newState: Record<string, T>) => void;
}

BatchFetcher

API에서 배치로 데이터를 가져오는 함수 타입입니다.

type BatchFetcher<T extends BatchableItem> = (ids: string[]) => Promise<T[]>;

// 사용 예시
const fetchUsers: BatchFetcher<User> = async ids => {
  const response = await fetch('/api/users', {
    method: 'POST',
    body: JSON.stringify({ ids }),
  });
  return response.json();
};

BufferConfig

버퍼 설정 옵션입니다.

interface BufferConfig {
  // 배치 처리를 위한 대기 시간 (밀리초)
  // @default 100
  delayMs?: number;

  // 한 번에 처리할 최대 아이템 수
  // @default undefined (제한 없음)
  maxBatchSize?: number;
}

// 사용 예시
const config: BufferConfig = {
  delayMs: 50, // 50ms 대기
  maxBatchSize: 100, // 최대 100개씩 처리
};

RetryConfig

재시도 설정 옵션입니다.

interface RetryConfig {
  // 최대 재시도 횟수 @default 3
  maxRetries?: number;

  // 재시도 지연 시간 (밀리초) @default 1000
  retryDelay?: number;

  // 백오프 전략 @default 'exponential'
  // - linear: 고정 지연
  // - exponential: 지수적 증가
  backoff?: 'linear' | 'exponential';

  // 재시도 가능한 에러인지 판단하는 함수
  shouldRetry?: (error: Error, attempt: number) => boolean;
}

BatchManagerConfig

BatchManager 생성 시 사용하는 설정 옵션입니다.

interface BatchManagerConfig<T extends BatchableItem> {
  // [필수] 외부 store 인스턴스
  store: Store<T>;

  // [필수] 배치로 데이터를 가져오는 함수
  fetcher: BatchFetcher<T>;

  // [선택] 버퍼 설정
  bufferConfig?: BufferConfig;

  // [선택] 에러 발생 시 호출되는 콜백
  onError?: (error: Error, failedIds: string[]) => void;

  // [선택] 디버그 모드 활성화
  debug?: boolean;

  // [선택] 초기 상태
  initialState?: Partial<BatchManagerState>;

  // [선택] 재시도 설정
  retryConfig?: RetryConfig;

  // [선택] 상태 저장 키 (localStorage/sessionStorage에 저장)
  persistenceKey?: string;
}

BatchManagerState

BatchManager의 현재 상태를 나타내는 인터페이스입니다.

interface BatchManagerState {
  // 현재 상태
  // - idle: 대기 중
  // - pending: 버퍼에 아이템이 쌓이는 중
  // - processing: API 요청 실행 중
  status: 'idle' | 'pending' | 'processing';

  // 배치 실행 횟수
  executionCount: number;

  // 총 처리된 아이템 수
  totalItemsProcessed: number;

  // 버퍼가 비어있는지 여부
  isEmpty: boolean;

  // 대기 중인 아이템이 있는지 여부
  isPending: boolean;

  // 현재 버퍼 크기
  bufferSize: number;

  // 대기 중인 요청 개수
  pendingRequestCount: number;

  // 마지막 배치 실행 시각 (timestamp)
  lastExecutionTime: number | null;

  // 마지막 에러
  lastError: Error | null;
}

BatchManager 클래스

BatchManager는 API 요청을 배치로 모아서 효율적으로 처리하고, 외부 store와 동기화하는 핵심 클래스입니다.

생성자

const batchManager = new BatchManager<User>({
  store: userStoreAdapter,
  fetcher: fetchBatchUsers,
  bufferConfig: {
    delayMs: 100,
    maxBatchSize: 50,
  },
  debug: true,
  onError: (error, failedIds) => {
    console.error('Fetch failed:', error, failedIds);
  },
  persistenceKey: 'user-batch-state', // localStorage에 상태 저장
});

메서드

requestItem(id: string): T | null

아이템을 요청합니다. store에 있으면 즉시 반환하고, 없으면 배치 요청에 추가 후 null을 반환합니다.

const user = batchManager.requestItem('user-123');
if (user) {
  console.log('User found:', user.name);
} else {
  console.log('User is being fetched...');
}

getItem(id: string): T | null

store에서 아이템을 가져옵니다. 요청은 하지 않습니다.

// 이미 로드된 아이템만 가져오기 (API 호출 없음)
const user = batchManager.getItem('user-123');

preloadItems(ids: string[]): void

여러 아이템을 미리 로드합니다. 화면에 표시하기 전에 데이터를 미리 가져올 때 유용합니다.

// 페이지 진입 시 필요한 사용자들 미리 로드
batchManager.preloadItems(['user-1', 'user-2', 'user-3']);

flush(): Promise

대기 중인 모든 배치 요청을 즉시 처리합니다. 타임아웃을 기다리지 않습니다.

// 여러 아이템 요청 후 즉시 처리
batchManager.requestItem('user-1');
batchManager.requestItem('user-2');
batchManager.requestItem('user-3');
await batchManager.flush(); // 100ms 기다리지 않고 즉시 API 호출

// 페이지 떠나기 전에 대기 중인 요청 모두 처리
window.addEventListener('beforeunload', () => {
  batchManager.flush();
});

getAllItems(): Record<string, T>

store의 모든 아이템을 가져옵니다.

const allUsers = batchManager.getAllItems();
Object.values(allUsers).forEach(user => {
  console.log(user.name);
});

removeItem(id: string): void

특정 아이템을 store에서 제거합니다.

// 사용자 삭제 후 store에서도 제거
await deleteUser('user-123');
batchManager.removeItem('user-123');

clearAll(): void

store의 모든 아이템을 제거합니다.

// 로그아웃 시 모든 캐시 클리어
function handleLogout() {
  batchManager.clearAll();
}

getPendingCount(): number

현재 대기 중인 요청 개수를 반환합니다. (디버깅용)

console.log(`Pending requests: ${batchManager.getPendingCount()}`);

getBufferSize(): number

현재 버퍼에 대기 중인 아이템 수를 반환합니다.

console.log(`Buffer size: ${batchManager.getBufferSize()}`);

isBufferEmpty(): boolean

버퍼가 비어있는지 확인합니다.

if (batchManager.isBufferEmpty()) {
  console.log('No pending items');
}

getState(): BatchManagerState

BatchManager의 현재 상태를 반환합니다.

const state = batchManager.getState();
console.log(`Status: ${state.status}`);
console.log(`Execution count: ${state.executionCount}`);
console.log(`Total processed: ${state.totalItemsProcessed}`);

getStats()

통계 정보를 반환합니다.

const stats = batchManager.getStats();
console.log(`Execution count: ${stats.executionCount}`);
console.log(`Total items processed: ${stats.totalItemsProcessed}`);
console.log(`Average items per batch: ${stats.averageItemsPerBatch}`);
console.log(`Last execution: ${new Date(stats.lastExecutionTime)}`);
console.log(`Current buffer size: ${stats.currentBufferSize}`);
console.log(`Pending requests: ${stats.pendingRequestCount}`);

subscribe / getSnapshot (useSyncExternalStore용)

React의 useSyncExternalStore와 함께 사용하기 위한 메서드들입니다. 일반적으로 직접 사용하지 않고 제공되는 hooks를 사용합니다.

// 내부적으로 hooks에서 사용됨
const snapshot = useSyncExternalStore(
  batchManager.subscribe,
  batchManager.getSnapshot
);

subscribeState / getStateSnapshot

BatchManager 상태 변경을 구독하기 위한 메서드들입니다.

// 상태 변경 구독
const unsubscribe = batchManager.subscribeState(() => {
  console.log('State changed:', batchManager.getStateSnapshot());
});

// 구독 해제
unsubscribe();

React Hooks

useBatchedItem

단일 아이템을 가져오는 훅입니다. 아이템이 없으면 자동으로 배치 요청에 추가됩니다.

function useBatchedItem<T extends BatchableItem>(
  manager: BatchManager<T>,
  id: string
): T | null;

// 사용 예시
function UserCard({ userId }: { userId: string }) {
  const user = useBatchedItem(userBatchManager, userId);

  if (!user) {
    return <Skeleton />;
  }

  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
    </div>
  );
}

useBatchedItems

여러 아이템을 한 번에 가져오는 훅입니다.

function useBatchedItems<T extends BatchableItem>(
  manager: BatchManager<T>,
  ids: string[]
): (T | null)[];

// 사용 예시
function UserList({ userIds }: { userIds: string[] }) {
  const users = useBatchedItems(userBatchManager, userIds);

  return (
    <div className="user-list">
      {users.map((user, index) => (
        <div key={userIds[index]}>
          {user ? user.name : 'Loading...'}
        </div>
      ))}
    </div>
  );
}

useAllBatchedItems

store의 모든 아이템을 가져오는 훅입니다.

function useAllBatchedItems<T extends BatchableItem>(
  manager: BatchManager<T>
): Record<string, T>;

// 사용 예시
function AllUsers() {
  const allUsers = useAllBatchedItems(userBatchManager);

  return (
    <ul>
      {Object.values(allUsers).map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

usePreloadItems

아이템들을 미리 로드하는 훅입니다. ids가 변경될 때마다 자동으로 preload됩니다.

function usePreloadItems<T extends BatchableItem>(
  manager: BatchManager<T>,
  ids: string[]
): void;

// 사용 예시
function UserDashboard({ friendIds }: { friendIds: string[] }) {
  // 친구 목록을 미리 로드
  usePreloadItems(userBatchManager, friendIds);

  return (
    <div>
      <h1>Dashboard</h1>
      {/* 이후 UserCard에서 useBatchedItem 사용 시 이미 로드됨 */}
      {friendIds.map(id => (
        <UserCard key={id} userId={id} />
      ))}
    </div>
  );
}

useFlushBatch

배치를 수동으로 flush하는 함수를 반환하는 훅입니다.

function useFlushBatch<T extends BatchableItem>(
  manager: BatchManager<T>
): () => Promise<void>;

// 사용 예시
function SubmitForm() {
  const flushBatch = useFlushBatch(userBatchManager);

  const handleSubmit = async () => {
    // 폼 제출 전에 대기 중인 모든 요청 처리
    await flushBatch();
    submitForm();
  };

  return <button onClick={handleSubmit}>Submit</button>;
}

useBatchManagerState

BatchManager의 전체 상태를 구독하는 훅입니다.

function useBatchManagerState<T extends BatchableItem>(
  manager: BatchManager<T>
): BatchManagerState;

// 사용 예시
function BatchStatus() {
  const state = useBatchManagerState(userBatchManager);

  return (
    <div className="batch-status">
      <p>Status: {state.status}</p>
      <p>Pending: {state.isPending ? 'Yes' : 'No'}</p>
      <p>Buffer Size: {state.bufferSize}</p>
      <p>Executions: {state.executionCount}</p>
      <p>Total Processed: {state.totalItemsProcessed}</p>
      {state.lastError && (
        <p className="error">Error: {state.lastError.message}</p>
      )}
    </div>
  );
}

useBatchedState

BatchManager의 특정 상태만 선택적으로 구독하는 훅입니다. 불필요한 리렌더링을 방지합니다.

function useBatchedState<T extends BatchableItem, R>(
  manager: BatchManager<T>,
  selector: (state: BatchManagerState) => R
): R;

// 사용 예시
function LoadingIndicator() {
  // status만 구독하여 다른 상태 변경 시 리렌더링 방지
  const status = useBatchedState(
    userBatchManager,
    state => state.status
  );

  if (status === 'processing') {
    return <Spinner />;
  }
  return null;
}

function PendingBadge() {
  // isPending만 구독
  const isPending = useBatchedState(
    userBatchManager,
    state => state.isPending
  );

  return isPending ? <Badge>Loading...</Badge> : null;
}

// 여러 필드를 하나의 객체로 선택
function BatchInfo() {
  const info = useBatchedState(userBatchManager, state => ({
    count: state.executionCount,
    total: state.totalItemsProcessed
  }));

  return <p>Batches: {info.count}, Items: {info.total}</p>;
}

useBatchStats

BatchManager의 통계 정보를 구독하는 훅입니다.

function useBatchStats<T extends BatchableItem>(manager: BatchManager<T>): {
  executionCount: number;
  totalItemsProcessed: number;
  averageItemsPerBatch: number;
  lastExecutionTime: number | null;
};

// 사용 예시
function StatsDisplay() {
  const stats = useBatchStats(userBatchManager);

  return (
    <div className="stats">
      <p>Total batches: {stats.executionCount}</p>
      <p>Total items: {stats.totalItemsProcessed}</p>
      <p>Avg per batch: {stats.averageItemsPerBatch.toFixed(1)}</p>
      {stats.lastExecutionTime && (
        <p>Last run: {new Date(stats.lastExecutionTime).toLocaleString()}</p>
      )}
    </div>
  );
}

Store 어댑터

createMemoryStore

외부 라이브러리 없이 사용할 수 있는 간단한 인메모리 store입니다.

function createMemoryStore<T extends BatchableItem>(): Store<T>;

// 사용 예시
import { createMemoryStore, BatchManager } from 'react-batcher';

const store = createMemoryStore<User>();

const batchManager = new BatchManager<User>({
  store,
  fetcher: fetchBatchUsers,
});

createSimpleZustandAdapter

단순한 Zustand store를 위한 어댑터입니다. Store가 Record<string, T> 형태일 때 사용합니다.

function createSimpleZustandAdapter<T extends BatchableItem>(zustandStore: {
  getState: () => Record<string, T>;
  setState: (state: Record<string, T>) => void;
  subscribe: (listener: () => void) => () => void;
}): Store<T>;

// 사용 예시
import { create } from 'zustand';
import { createSimpleZustandAdapter } from 'react-batcher';

// 단순 형태의 Zustand store
const useUserStore = create<Record<string, User>>(() => ({}));

const userStoreAdapter = createSimpleZustandAdapter({
  getState: useUserStore.getState,
  setState: useUserStore.setState,
  subscribe: useUserStore.subscribe,
});

createZustandAdapter

items 필드로 래핑된 Zustand store를 위한 어댑터입니다.

function createZustandAdapter<T extends BatchableItem>(zustandStore: {
  getState: () => { items: Record<string, T> };
  setState: (partial: { items: Record<string, T> }) => void;
  subscribe: (listener: () => void) => () => void;
}): Store<T>;

// 사용 예시
interface UserStore {
  items: Record<string, User>;
  // 다른 상태들...
  filter: string;
}

const useUserStore = create<UserStore>(() => ({
  items: {},
  filter: '',
}));

const userStoreAdapter = createZustandAdapter({
  getState: useUserStore.getState,
  setState: useUserStore.setState,
  subscribe: useUserStore.subscribe,
});

createReduxAdapter

Redux store를 위한 어댑터입니다.

function createReduxAdapter<T extends BatchableItem>(
  reduxStore: {
    getState: () => any;
    dispatch: (action: any) => void;
    subscribe: (listener: () => void) => () => void;
  },
  selector: (state: any) => Record<string, T>,
  updateAction: (items: Record<string, T>) => any
): Store<T>;

// 사용 예시
import { createReduxAdapter } from 'react-batcher';
import { store } from './redux/store';

const userStoreAdapter = createReduxAdapter(
  store,
  // selector: Redux state에서 users 추출
  state => state.users.items,
  // action creator: 업데이트 액션 생성
  users => ({ type: 'users/setAll', payload: users })
);

// Redux Toolkit 사용 시
import { setUsers } from './redux/usersSlice';

const userStoreAdapter = createReduxAdapter(
  store,
  state => state.users,
  users => setUsers(users)
);

유틸리티 함수

createBuffer

여러 호출을 배치로 모아서 처리하는 버퍼 함수를 생성합니다. BatchManager 내부에서 사용되지만, 직접 사용할 수도 있습니다.

interface BufferInstance<T> {
  add: (item: T) => void; // 버퍼에 아이템 추가
  flush: () => Promise<void>; // 즉시 처리
  size: () => number; // 버퍼 크기
  isEmpty: () => boolean; // 비어있는지 확인
}

function createBuffer<T, R = void>(options: {
  ms: number; // 대기 시간
  subscribedFn: (items: T[]) => Promise<R>; // 배치 처리 함수
  maxBatchSize?: number; // 최대 배치 크기
}): BufferInstance<T>;

// 사용 예시: 로그 배치 전송
const logBuffer = createBuffer<LogEntry>({
  ms: 5000, // 5초마다
  maxBatchSize: 100, // 또는 100개 모이면
  subscribedFn: async logs => {
    await fetch('/api/logs', {
      method: 'POST',
      body: JSON.stringify(logs),
    });
  },
});

// 로그 추가
logBuffer.add({ level: 'info', message: 'User clicked button' });
logBuffer.add({ level: 'error', message: 'API failed' });

// 페이지 종료 시 즉시 전송
window.addEventListener('beforeunload', () => logBuffer.flush());

Persistence 함수들

상태를 localStorage/sessionStorage에 저장하고 불러오는 유틸리티입니다.

interface PersistenceConfig {
  key: string; // Storage key
  storage?: 'localStorage' | 'sessionStorage'; // @default 'localStorage'
  fields?: Array<keyof BatchManagerState>; // 저장할 필드들
  serialize?: (state: Partial<BatchManagerState>) => string;
  deserialize?: (data: string) => Partial<BatchManagerState>;
}

// 상태 불러오기
function loadState(
  config: PersistenceConfig
): Partial<BatchManagerState> | null;

// 상태 저장
function saveState(state: BatchManagerState, config: PersistenceConfig): void;

// 저장된 상태 삭제
function clearPersistedState(config: PersistenceConfig): void;

// 헬퍼 함수들 생성
function createPersistence(config: PersistenceConfig): {
  load: () => Partial<BatchManagerState> | null;
  save: (state: BatchManagerState) => void;
  clear: () => void;
};

// 사용 예시: 직접 persistence 사용
import {
  createPersistence,
  loadState,
  saveState,
  clearPersistedState,
} from 'react-batcher';

// 방법 1: createPersistence 사용
const persistence = createPersistence({
  key: 'my-batch-state',
  storage: 'localStorage',
  fields: ['executionCount', 'totalItemsProcessed'],
});

const savedState = persistence.load();
// ... 작업 후
persistence.save(currentState);
persistence.clear();

// 방법 2: 개별 함수 사용
const config = { key: 'my-batch-state' };
const state = loadState(config);
saveState(newState, config);
clearPersistedState(config);

// BatchManager에서 자동으로 사용
const batchManager = new BatchManager<User>({
  store,
  fetcher,
  persistenceKey: 'user-batch-state', // 자동으로 상태 저장/복원
});

고급 사용법

여러 BatchManager 사용

// users
const userBatchManager = new BatchManager<User>({
  store: createMemoryStore<User>(),
  fetcher: fetchBatchUsers,
});

// products
const productBatchManager = new BatchManager<Product>({
  store: createMemoryStore<Product>(),
  fetcher: fetchBatchProducts,
});

// 컴포넌트에서
function ProductWithSeller({ productId }: { productId: string }) {
  const product = useBatchedItem(productBatchManager, productId);
  const seller = useBatchedItem(userBatchManager, product?.sellerId ?? '');

  if (!product) return <Loading />;

  return (
    <div>
      <h2>{product.title}</h2>
      <p>Sold by: {seller?.name ?? 'Loading...'}</p>
    </div>
  );
}

에러 처리 패턴

const batchManager = new BatchManager<User>({
  store,
  fetcher,
  onError: (error, failedIds) => {
    // 에러 로깅
    console.error('Batch fetch failed:', error);

    // 사용자에게 알림
    toast.error(`Failed to load ${failedIds.length} users`);

    // 에러 추적 서비스에 전송
    Sentry.captureException(error, {
      extra: { failedIds },
    });
  },
});

// 컴포넌트에서 에러 상태 표시
function UserWithError({ userId }: { userId: string }) {
  const user = useBatchedItem(batchManager, userId);
  const { lastError } = useBatchManagerState(batchManager);

  if (lastError) {
    return <ErrorMessage error={lastError} />;
  }

  if (!user) {
    return <Skeleton />;
  }

  return <UserCard user={user} />;
}

조건부 로딩

function ConditionalUser({ userId, shouldLoad }: {
  userId: string;
  shouldLoad: boolean;
}) {
  // shouldLoad가 false면 빈 ID로 요청하지 않음
  const user = useBatchedItem(
    userBatchManager,
    shouldLoad ? userId : ''
  );

  if (!shouldLoad) {
    return <p>Click to load user</p>;
  }

  return user ? <UserCard user={user} /> : <Loading />;
}

캐시 무효화

// 특정 사용자 정보 갱신
async function refreshUser(userId: string) {
  // 기존 캐시 제거
  userBatchManager.removeItem(userId);

  // 다시 요청
  userBatchManager.requestItem(userId);
  await userBatchManager.flush();
}

// 전체 캐시 클리어
function clearAllCache() {
  userBatchManager.clearAll();
}

마이그레이션 가이드

기존 코드에서 이 라이브러리로 마이그레이션하는 방법:

Before (기존 코드)

const user = userStoreManager.requestUser(userId);
userStoreManager.preloadUsers(userIds);
const pendingCount = userStoreManager.getPendingCount();

After (라이브러리 사용)

const user = useBatchedItem(userBatchManager, userId);
userBatchManager.preloadItems(userIds);
const pendingCount = userBatchManager.getPendingCount();

라이센스

MIT

기여

이슈나 PR을 환영합니다!

Name		Name	Last commit message	Last commit date
examples		examples
packages/react-batcher		packages/react-batcher
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
.prettierrc		.prettierrc
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.base.json		tsconfig.base.json
tsconfig.json		tsconfig.json
vitest.workspace.ts		vitest.workspace.ts

Latest commit

History

Folders and files

Repository files navigation