What is Props Drilling in React? Causes & Best Solutions

React দিয়ে ওয়েব ডেভেলপমেন্ট করার সময় কম্পোনেন্ট-বেসড আর্কিটেকচার কাজকে অনেক সহজ করে দেয়।

অ্যাপ্লিকেশন বড় হলে কম্পোনেন্ট ট্রি (Component Tree) অনেক গভীর হয়ে যায়। তখন ডেভেলপাররা একটি সাধারণ কিন্তু বিরক্তিকর সমস্যার মুখোমুখি হন। এর নাম Props Drilling।

আজকের ব্লগে আমরা জানব Props Drilling আসলে কী। এটি কেন আমাদের কোডের জন্য ক্ষতিকর হতে পারে? আমরা প্র্যাকটিক্যাল কোড উদাহরণের মাধ্যমে এর সমাধানগুলোও দেখব।

What is Props Drilling?

React-এ ডেটা সবসময় Parent থেকে Child কম্পোনেন্টের দিকে ফ্লো করে। একে বলা হয় Unidirectional Data Flow।

ধরে নিন, উপরের দিকের Parent কম্পোনেন্টে কিছু ডেটা (State) আছে। এই ডেটা একদম নিচের দিকের Child কম্পোনেন্টে দরকার।

নিচের কম্পোনেন্টে ডেটা পৌঁছানোর জন্য তা মাঝখানের বিভিন্ন কম্পোনেন্টের ভেতর দিয়ে পাস করতে হয়। অথচ মাঝখানের ওই কম্পোনেন্টগুলোর ওই ডেটার কোনো প্রয়োজনই নেই।

শুধুমাত্র ডেটাটিকে গন্তব্যে পৌঁছানোর জন্য মাঝখানের কম্পোনেন্টগুলোকে “কুরিয়ার” হিসেবে ব্যবহার করা হয়। এই প্রক্রিয়াকেই বলা হয় Props Drilling।

Why is Props Drilling a Problem?

প্রথমত, ১-২ লেভেল পর্যন্ত Props পাস করা কোনো সমস্যা নয়। কিন্তু এটি ৫-৬ লেভেল গভীরে চলে গেলে বড় সমস্যার সৃষ্টি হয়:

1. Poor Code Readability: মাঝখানের কম্পোনেন্টগুলোতে অপ্রয়োজনীয় Props থাকে। এর কারণে কোড বুঝতে এবং পড়তে অনেক অসুবিধা হয়।
2. Maintenance Nightmare: ভবিষ্যতে Props-এর নাম পরিবর্তন বা নতুন Props অ্যাড করার প্রয়োজন হতে পারে। তখন মাঝখানের সবগুলো কম্পোনেন্টে ম্যানুয়ালি কোড আপডেট করতে হয়।
3. Refactoring Difficulty: কম্পোনেন্টগুলো একে অপরের সাথে শক্তভাবে যুক্ত (Tightly Coupled) হয়ে যায়। ফলে কোনো কম্পোনেন্ট অন্য কোথাও পুনরায় ব্যবহার করা কঠিন হয়।

Code Example: The Props Drilling Problem

চলুন একটি বাস্তব কোড উদাহরণ দিয়ে বিষয়টি ক্লিয়ার করা যাক।

ধরুন, আমাদের App কম্পোনেন্টে একজন ইউজারের নাম আছে। আমরা সেটি ProfileText কম্পোনেন্টে দেখাতে চাই।

JavaScript

// 1. Root Component
function App() {
  const userName = "Arif Almas";
  // Dashboard-এর userName দরকার নেই, কিন্তু তাকে পাস করতে হচ্ছে
  return <Dashboard userName={userName} />;
}

// 2. Intermediate Component 1
function Dashboard({ userName }) {
  // UserProfile-এরও দরকার নেই, সেও কুরিয়ার হিসেবে কাজ করছে
  return <UserProfile userName={userName} />;
}

// 3. Intermediate Component 2
function UserProfile({ userName }) {
  return <ProfileText userName={userName} />;
}

// 4. Target Component
function ProfileText({ userName }) {
  // শুধুমাত্র এই কম্পোনেন্টের ডেটাটি দরকার ছিল!
  return <h2>Welcome, {userName}!</h2>;
}

উপরের কোডে খেয়াল করুন। Dashboard এবং UserProfile কম্পোনেন্টের userName প্রপসটির কোনো দরকার ছিল না।

তারা শুধু ProfileText-এর কাছে ডেটা পৌঁছে দেওয়ার কাজ করছে। এটাই হলো ক্লাসিক Props Drilling!

How to Solve Props Drilling

এই বিরক্তিকর অবস্থা থেকে মুক্তি পাওয়ার চমৎকার কিছু উপায় রয়েছে। প্রজেক্টের সাইজ এবং ডেটার উপর ভিত্তি করে আমরা যেকোনো একটি পদ্ধতি ব্যবহার করতে পারি:

1. The Context API (Built-in Solution)

React-এর Context API ব্যবহার করে আমরা খুব সহজেই Props Drilling এড়াতে পারি।

এটি মূলত একটি গ্লোবাল ভ্যারিয়েবল তৈরি করে। এখান থেকে যেকোনো কম্পোনেন্ট সরাসরি ডেটা নিতে পারে।

Solution with Context API:

JavaScript

import React, { createContext, useContext } from 'react';

// ১. একটি Context তৈরি করা
const UserContext = createContext();

function App() {
  const userName = "Arif Almas";
  
  return (
    // ২. Provider দিয়ে অ্যাপ র‍্যাপ করা
    <UserContext.Provider value={userName}>
      <Dashboard />
    </UserContext.Provider>
  );
}

// মাঝখানের কম্পোনেন্টগুলো এখন সম্পূর্ণ প্রপস-মুক্ত!
function Dashboard() {
  return <UserProfile />;
}

function UserProfile() {
  return <ProfileText />;
}

// ৩. সরাসরি Context থেকে ডেটা রিসিভ করা
function ProfileText() {
  const userName = useContext(UserContext); // ম্যাজিক!
  return <h2>Welcome, {userName}!</h2>;
}

2. State Management Libraries

অ্যাপ্লিকেশন অনেক বড় হলে Redux Toolkit (বা Zustand) ব্যবহার করা বুদ্ধিমানের কাজ।

বিশেষ করে যখন অনেক স্টেট ম্যানেজ এবং পারফরম্যান্স অপটিমাইজেশন জরুরি হয়। Redux একটি সেন্ট্রালাইজড ‘Store’ তৈরি করে। ফলে যেকোনো কম্পোনেন্ট সরাসরি Store থেকে ডেটা রিড বা আপডেট করতে পারে।

3. Component Composition

অনেক সময় Context বা Redux ব্যবহার করার প্রয়োজন হয় না। React-এর children প্রপস ব্যবহার করেও Props Drilling কমানো যায়।

এক্ষেত্রে ডেটা পাস করার বদলে সরাসরি কম্পোনেন্টকেই পাস করা হয়।

Wrapping Up

Props Drilling নিজে থেকে কোনো বাগ (Bug) নয়। বরং এটি React-এর একটি ডিফল্ট বিহেভিয়ার। ছোট প্রজেক্টে ডেটা ফ্লো ট্র্যাক করার জন্য এটি বেশ কাজের।

তবে ডেটা ৩-৪ লেভেলের বেশি গভীরে গেলে কোড মেইনটেইন করা কঠিন হয়। তখন Context API বা Redux ব্যবহার করা উচিত। সঠিক আর্কিটেকচার একটি স্কেলেবল কোডবেসের প্রধান শর্ত!