قابلیت loader در React Router

اکثر مواقع نیاز داریم وقتی وارد یه route جدید میشیم به محض اینکه اون کامپوننت mount میشه یه دیتایی رو از سمت سرور دریافت کنیم و احتمالا اولین راه حلی که به ذهنمون میرسه اینه که از useEffect در Mounting استفاده کنیم اما اگر داریم از React Router استفاده میکنیم یه راه اصولی تر وسریعتر و بهینه تر وجود داره

توی روش اول :‌ fetch data when component mount

مشکلی که این روش داره گرفتن دیتا از سرور بعد از اینکه کامپوننت متولد شد انجام میشه و ممکنه UI سریعتر از دیتا لود بشه و بعد دیتا از سرور گرفته بشه

function Page() { 
  const [users,setUsers] = useState([]);

   useEffect(() => {
    async function fetchUsers() {
      const resp = await fetch("https://jsonplaceholder.typicode.com/users");
      const data = await resp.json();
      setUsers(data);
    }

    fetchUsers();
  }, []);
}

البته اصولی تر بود که درخواست رو هم توی clean up لغو کنیم ولی برای ساده سازی نوشته نشده

روش دوم : استفاده از loader در react router

توی این حالت ما اون تابعی که قراره دیتا رو از سمت سرور موقع mount شدن بگیره به route مورد نظر پاس میدیم و خود ری اکت روتر قبل از mount شدن اون کامپوننت درخواست ما رو اجرا میکنه و توسط هوکی به نام useLoaderData میتونیم به خروجی تابع مورد نظر دسترسی داشته باشیم

{
   path: "/users",
   element: <Users />,
   loader: fetchUsers,
}

و به صورت زیر توی کامپوننت استفاده میشه

import { useLoaderData } from "react-router";

function Users() {
  const users = useLoaderData();

  return (
    <div>
      This is users page
      <ul>
        {users.map(user => (
          <li>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default Users;

این روش خیلی بهینه تره

امیدوارم که این پست به دردتون خورده باشه