Base.vn Prep

1 · React Hooks Essentials

// Custom hook
function useDebounce<T>(value: T, delay = 300): T {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer); // cleanup
  }, [value, delay]);
  return debounced;
}

Pitfall: useEffect deps thiếu → stale closure. Object/array literal trong deps → effect mỗi render. Cleanup quên → memory leak. useMemo mọi nơi → tăng RAM.

2 · TanStack Query Patterns

Vì sao: Cache + dedup + background refetch + staleTime + optimistic. Tự handle loading/error.

// Query key factory — tránh typo + dễ invalidate
export const taskKeys = {
  all: ['tasks'] as const,
  list: (filters: TaskFilter) => [...taskKeys.all, 'list', filters] as const,
  detail: (id: string) => [...taskKeys.all, 'detail', id] as const,
};

export function useTasks(filters: TaskFilter) {
  return useQuery({
    queryKey: taskKeys.list(filters),
    queryFn: () => api.tasks.list(filters),
    staleTime: 1000 * 60, // 1 min
  });
}

export function useCreateTask() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: api.tasks.create,
    onSuccess: () => qc.invalidateQueries({ queryKey: taskKeys.all }),
  });
}

Pitfall: queryKey không stable (inline object) → refetch loạn. Quên invalidate sau mutation → stale UI. enabled:false nhưng vẫn render → conditional query phải chuẩn.

3 · Next.js Patterns (App Router)

// app/tasks/page.tsx — Server Component
export default async function TasksPage() {
  const tasks = await db.task.findMany(); // fetch trực tiếp DB
  return <TaskList tasks={tasks} />; // Client Component
}

// app/tasks/TaskList.tsx
"use client";
import { useState } from 'react';
export function TaskList({ tasks }) {
  const [filter, setFilter] = useState('all');
  return /* interactive UI */;
}

Caching layers: Request memoization (1 req) · Data cache (cross-request) · Full route cache (build-time) · Router cache (client). revalidateTag / revalidatePath để invalidate.

Pitfall: Pass non-serializable (function, Date raw) từ Server → Client → error. "use client" bừa → mất benefit RSC. Quên revalidate sau mutation → user thấy stale.

4 · Performance Optimization

Mantra: Đo trước, optimize sau. React Profiler + Lighthouse + Chrome Performance.

Pitfall: Premature optimization (memoize mọi component). Bundle import full lodash thay vì lodash/get. CSS-in-JS runtime nặng — pick Tailwind / CSS Modules cho perf.