> For the complete documentation index, see [llms.txt](https://mominur.gitbook.io/mominur-notes/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mominur.gitbook.io/mominur-notes/react/react-window.md).

# react-window

আজকের আধুনিক ওয়েব অ্যাপ্লিকেশনগুলোর অন্যতম চ্যালেঞ্জ হচ্ছে **বড় পরিমাণ ডেটা স্মুথলি রেন্ডার করা**। আপনি যদি এমন একটি লিস্ট তৈরি করতে চান যেখানে **১০,০০০+ আইটেম** আছে — যেমন কৃষকদের নাম, অর্ডার হিস্টোরি, বা প্রোডাক্ট ক্যাটালগ — তাহলে সাধারন রেন্ডারিং পদ্ধতিতে ব্রাউজার দ্রুত **হ্যাং** বা **ল্যাগ** করে। ঠিক এই জায়গাতেই `react-window` আপনাকে বাঁচাতে পারে!

`react-window` এমন একটি lightweight টুল যা পুরো লিস্ট রেন্ডার না করে **শুধু দৃশ্যমান অংশটুকুই রেন্ডার করে**, ফলে আপনার অ্যাপ চলে বাজপাখির গতিতে — স্মুথ, ফাস্ট এবং ইউজার ফ্রেন্ডলি।

***

### React Window কি?

`react-window` হচ্ছে Facebook-এর প্রাক্তন ইঞ্জিনিয়ার **Brian Vaughn** তৈরি করা একটি পারফরম্যান্স-অপ্টিমাইজড React লাইব্রেরি যা virtual scrolling ব্যবহার করে। এটি মূলত **list** এবং **grid** ডেটা visualization-এর জন্য ব্যবহৃত হয় যেখানে হাজার হাজার আইটেম থাকে, কিন্তু DOM-এ শুধু দৃশ্যমান অংশটি রেন্ডার হয়।

***

### কেন ব্যবহার করবেন?

* **বড় ডেটা রেন্ডারিং** অত্যন্ত সহজ ও দ্রুত
* **DOM manipulation** কম হয়, ফলে performance বাড়ে
* **Lightweight** এবং কনফিগারেশনে সহজ
* অন্যান্য ভার্চুয়াল স্ক্রলিং লাইব্রেরির চেয়ে বেশি ফাস্ট

***

### শুরু করা যাক

#### ১. ইনস্টলেশন

প্রথমে আপনার React প্রজেক্টে `react-window` ইন্সটল করুন:

```bash
npm install react-window
```

***

#### ২. একটি সাধারণ ভার্চুয়াল লিস্ট

ধরি, আমাদের ১০,০০০টি কৃষি তথ্য আইটেম রয়েছে। নিচের কোডটি সেই তালিকাকে দ্রুত রেন্ডার করবে:

```jsx
import { FixedSizeList as List } from 'react-window';

const MyVirtualList = () => {
  const itemCount = 10000;
  const itemHeight = 35;

  const Row = ({ index, style }) => (
    <div style={style}>
      🌾 কৃষি তথ্য {index}
    </div>
  );

  return (
    <List
      height={500}          // দৃশ্যমান অংশের উচ্চতা
      itemCount={itemCount} // মোট আইটেম সংখ্যা
      itemSize={itemHeight} // প্রতিটি আইটেমের উচ্চতা
      width={'100%'}        // লিস্টের প্রস্থ
    >
      {Row}
    </List>
  );
};
```

🔍 ব্যাখ্যা:

* `itemCount`: মোট কতটি আইটেম রেন্ডার হবে
* `itemSize`: প্রতিটি আইটেমের উচ্চতা (pixels)
* `height`: ভিউপোর্টের উচ্চতা, মানে স্ক্রলিং উইন্ডোর অংশ
* `style`: এই style `react-window` দ্বারা পাস হয় যাতে প্রতিটি Row সঠিকভাবে position হয়

***

### ভিন্ন উচ্চতার জন্য: VariableSizeList

সব আইটেম যদি একই মাপের না হয়, তাহলে আপনি ব্যবহার করতে পারেন `VariableSizeList`:

```jsx
import { VariableSizeList as List } from 'react-window';

const getItemSize = index => (index % 2 === 0 ? 30 : 50);

const Row = ({ index, style }) => (
  <div style={style}>
    🌾 ভিন্ন উচ্চতার আইটেম {index}
  </div>
);

const VariableList = () => (
  <List
    height={500}
    itemCount={1000}
    itemSize={getItemSize}
    width={'100%'}
  >
    {Row}
  </List>
);
```

এখানে প্রতিটি আইটেমের উচ্চতা index অনুযায়ী পরিবর্তিত হয় — অর্থাৎ আপনি dynamic UI তৈরি করতে পারবেন সহজেই।

***

### ব্যবহার ক্ষেত্রে

**React Window** ব্যবহার করা যায় নিচের যে কোনো জায়গায় যেখানে বড় ডেটা রয়েছে:

* প্রোডাক্ট ক্যাটালগ
* অর্ডার হিস্টোরি
* Notification feed
* Admin dashboard-এ table rendering,etc

***

### কিছু এক্সট্রা টিপস

* আপনি চাইলে `react-window`-এর উপর custom scrollbar, checkbox, অথবা লোডার যুক্ত করতে পারেন
* Intersection observer এর মাধ্যমে lazy loading implement করা যায়
* আপনি চাইলে গ্রিড ফরম্যাটেও ব্যবহার করতে পারেন — `FixedSizeGrid`, `VariableSizeGrid`

***

React অ্যাপের জন্য বড় ডেটা লিস্ট রেন্ডারিং এখন আর কোনো সমস্যা নয়। `react-window` এর মতো টুল ব্যবহার করে আপনি আপনার অ্যাপকে বানাতে পারেন আরো বেশি responsive, স্কেলেবল এবং স্মুথ।

আপনার যদি হাজার হাজার লিস্ট আইটেম থাকে, তাহলে `react-window` এক কথায় **গেম চেঞ্জার**।

{% hint style="info" %}
References

<https://react-window.vercel.app/#/examples/list/fixed-size>

<https://github.com/bvaughn/react-window>
{% endhint %}