Kiến trúc theo Dự án: Blueprint cho Dashboard, ERP & E-commerce

// ✅ Cách tối ưu: Batching with RAF
const bufferRef = useRef([]);

// 1. Hứng data vào Buffer (Không render)
socket.on('price', (data) => {
  bufferRef.current.push(data);
});

// 2. Loop xả Buffer (60 FPS)
useEffect(() => {
  let frameId;
  const loop = () => {
    if (bufferRef.current.length > 0) {
      const batch = [...bufferRef.current];
      bufferRef.current = []; // Clear
      updateChart(batch);
      updateTicker(batch[batch.length - 1]);
    }
    frameId = requestAnimationFrame(loop);
  };
  loop();
  return () => cancelAnimationFrame(frameId);
}, []);

const mutation = useMutation({
  mutationFn: deleteTodo,
  // 🚀 Chạy NGAY KHI bấm nút (trước khi API chạy)
  onMutate: async (todoId) => {
    await queryClient.cancelQueries({ queryKey: ['todos'] });
    const previousTodos = queryClient.getQueryData(['todos']);

    // Update Cache giả: Xóa item đi
    queryClient.setQueryData(['todos'], (old) => 
      old.filter(t => t.id !== todoId)
    );

    return { previousTodos }; // Lưu lại để rollback
  },
  // Nếu API lỗi -> Trả lại như cũ
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
    toast.error("Không xóa được!");
  },
  // Luôn fetch lại data mới nhất sau cùng
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
});

// app/product/[id]/page.tsx
export default function ProductPage({ params }) {
  return (
    <main>
      {/* 🚀 1. Thông tin cơ bản (Có ngay, SEO tốt) */}
      <ProductHeader id={params.id} /> 

      {/* ⏳ 2. Nội dung nặng (Review, Gợi ý) -> Load sau, không chặn trang */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ReviewsSection id={params.id} />
      </Suspense>
      
      <Suspense fallback={<RelatedSkeleton />}>
        <RelatedProducts id={params.id} />
      </Suspense>
    </main>
  );
}