منظور از Prop Drilling توی ری‌اکت چیه؟

درود دوستان 👋 توی این پست می‌خوایم یکی از رایج‌ترین الگوهای انتقال اطلاعات توی یک برنامهٔ ری‌اکتی به اسم Prop Drilling رو بررسی کنیم و با مزایا و معایب اون آشنا بشیم. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست که شامل مجموعه‌ای از پست‌های کوتاه و کاربردی ری‌اکتی میشه.

 

Prop Drilling چیه؟ 🤔

Prop drilling به یک الگو یا روش پاس دادن اطلاعات توی ری‌اکت گفته میشه که توی اون، اطلاعات باید از چندین لایهٔ کامپوننتِ تو در تو عبور کنه تا به مقصدش برسه. این اتفاق زمانی رخ میده که توی یک کامپوننت والد می‌خوایم به کامپوننت داخلی توی لایه‌های زیرین اطلاعات پاس بدیم. اطلاعات به صورت پراپرتی (Prop) از لایه‌هایی از کامپوننت‌ها عبور می‌کنه تا به کامپوننت مقصد برسه:

function Parent() {
  const user = { name: "John Doe", age: 30 };

  return <Child1 user={user} />;
}

function Child1({ user }) {
  return <Child2 user={user} />;
}

function Child2({ user }) {
  return <Child3 user={user} />;
}

function Child3({ user }) {
  return <h2>Username: {user.name}</h2>;
}

/*

Parent
│
└── Child1 (→ user)
    │
    └── Child2 (→ user)
        │
        └── Child3 (→ user, renders <h2>)

*/

توی مثال بالا همونطور که می‌بینیم کامپوننت Child3 از پراپرتی user استفاده می‌کنه و اطلاعات کاربر رو نمایش میده. اما ساختار این کامپوننت‌ها طوری هست که برای پاس دادن آبجکت user به Child3 باید اون رو از مسیر کامپوننت Child1 و Child2 عبور بدیم تا به مقصد نهاییش یعنی Child3 برسه. این ساختار مشکلاتی رو ایجاد می‌کنه که توی ادامه اونها رو بررسی می‌کنیم:

 

۱. افزایش پیچیدگی

وقتی برنامه بزرگ و بزرگ‌تر میشه، مدیریت این ارتباطات پیچیده‌تر میشه و خوانایی و توسعهٔ برنامه رو سخت می‌کنه.

۲. رندرهای غیر ضروری

حتی که کامپوننت‌های میانی نیازی به اون پراپرتی نداشته باشن، وقتی کامپوننت والد رندر میشه، کامپوننت‌های میانی هم مجدد رندر میشن.

۳. کامپوننت‌های غیر قابل استفاده مجدد

وقتی یک کامپوننت به اطلاعاتی وابسته باشه که به اون احتیاجی نداره، هر جای دیگه از برنامه که می‌خوایم از اون کامپوننت استفاده کنیم می‌بایست اون پراپرتی رو برای کامپوننت تأمین کنیم. پس به قول معروف Reusability اون کامپوننت کاهش پیدا می‌کنه.

 

چطوری از این مشکل جلوگیری کنیم؟

برای حل این مشکل راه حل‌های متنوعی وجود داره که توی ادامه به ۳ تا از معروف‌ترین اونها اشاره می‌کنیم.