الـ loader قبل ما الصفحة تبان

الـ loader بيشتغل قبل ما الكومبوننت يترسم. الداتا تبقى جاهزة، من غير حالة تحميل تكتبها بإيدك جوه useEffect.

import { createFileRoute } from "@tanstack/react-router";export const Route = createFileRoute("/posts/$postId")({  loader: async ({ params }) => {    const res = await fetch(      `https://jsonplaceholder.typicode.com/posts/${params.postId}`,    );    if (!res.ok) throw new Error("Post not found");    return res.json();  },  pendingComponent: () => <p>جاري التحميل...</p>,  errorComponent: ({ error }) => <p>حصل خطأ: {error.message}</p>,  component: PostPage,});function PostPage() {  const post = Route.useLoaderData();  return (    <div>      <h1>{post.title}</h1>      <p>{post.body}</p>    </div>  );}

useEffect بيحصل بعد الرسم، فتشوف «جاري التحميل» كوميض، وبتكتب حالة الخطأ بإيدك، ومفيش كاش جاهز. الـ loader بيحصل قبل الظهور، وفيه كومبوننت انتظار وكومبوننت خطأ، وكاش قريب من فكرة React Query.

اللي بعد كده في المكتبة، لما تحب تكمّل من الدوكس: حماية الراوت قبل التحميل، والفرق بين قراءة المعاملات من الراوت ومن هوك عام، وصفحة مش موجودة.

خلّصت الفصل لما

• الـ loader يرجع الداتا أو يرمي خطأ
• الكومبوننت يقرأ بـ useLoaderData
• pendingComponent و errorComponent موجودين
• متجيبش نفس الداتا بـ useEffect أول ما الصفحة تفتح