⚡ useLoaderData Nedir?

• React Router v6+ ile birlikte gelen hook’tur.
• Route’un loader fonksiyonu tarafından sağlanan veriyi almak için kullanılır.
• Sayfa yüklenmeden önce veri önceden yüklenir ve component render olduğunda hazır olur.

⚡ Temel Kullanım

import { useLoaderData } from "react-router-dom";

// loader fonksiyonu
export async function userLoader({ params }) {
  const res = await fetch(`/api/users/${params.userId}`);
  return res.json();
}

// Component
function User() {
  const user = useLoaderData(); // loader’dan gelen veriyi alır

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Email: {user.email}</p>
    </div>
  );
}

// Route tanımı
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/users/:userId",
    element: <User />,
    loader: userLoader
  }
]);

⚡ Notlar

• Loader fonksiyonu async çalışabilir, API çağrıları için idealdir.
• useLoaderData, component mount olduğunda yüklenmiş veriyi doğrudan sağlar.
• Sayfa yüklenmeden önce veri hazır olduğu için loading state yönetimi bazı durumlarda daha basit olur.
• React Query veya SWR gibi kütüphaneler yerine route seviyesinde veri çekmek için kullanılabilir.