‏react-window 2.5.0: اسکرول همراه صفحه و هوک useVirtualizer

react-window یه کتابخونه‌ی virtualization برای React هست، یعنی به جای رندر هزاران ردیف، فقط ردیف‌هایی رو می‌سازه که تو صفحه دیده می‌شن. نسخه‌ی 2.5.0 که Brian Vaughn منتشرش کرده، بیشتر روی این تمرکز داره که لیست‌ها و گریدهای مجازی تو چیدمان‌های واقعی‌تر هم درست کار کنن.

مهم‌ترین قابلیت، prop جدید scrollElement برای List و Grid هست. اگه مقدارش رو "window" بذاری، لیست با خود صفحه اسکرول می‌شه؛ یه المنت والد که اسکرول می‌خوره رو هم می‌شه بهش داد. لیست با ارتفاع کاملش رندر می‌شه، ولی فقط ردیف‌های داخل viewport همون المنت ساخته می‌شن.

موقعیت لیست داخل اون المنت هر بار که رندر، اسکرول یا resize می‌شه دوباره اندازه گرفته می‌شه، حتی وقتی محتوای بالاش تغییر کنه (مثلاً یه عکس بالای لیست لود بشه). متدهای اسکرول دستوری هم حالا خود scrollElement رو اسکرول می‌کنن. ستون‌های گرید فقط وقتی همراهش اسکرول می‌شن که گرید به اندازه‌ی محتواش پهن باشه، مثلاً با width: "max-content"؛ وگرنه داخل خود گرید اسکرول می‌خورن.

هوک useVirtualizer برای رندر headless اومده، یعنی منطق virtualization رو می‌گیری و ظاهرش رو خودت می‌سازی، مثلاً یه جدول HTML معنایی. این هوک آیتم‌هایی که باید رندر بشن رو با offset و اندازه‌شون، اندازه‌ی کل، بازه‌ی قابل‌دیدن و متد scrollToIndex برمی‌گردونه. آپشن‌هاش هم مثل propهای List هست، از جمله scrollElement و ارتفاع پویا با useDynamicRowHeight.

هوک useIsScrolling می‌گه لیست، گرید یا scrollElement الان در حال اسکروله یا نه، که مثلاً برای رندر ردیف‌های ساده‌تر موقع اسکرول به درد می‌خوره. هر جا مرورگر پشتیبانی کنه، از رویداد scrollend استفاده می‌کنه.

یه بهبود دیگه هم اینه که scrollToRow، scrollToColumn، scrollToCell و scrollToIndex حالا مثل scrollIntoView خود مرورگر، scroll-padding در CSS رو رعایت می‌کنن. یعنی با scroll-padding-top دیگه ردیف زیر هدر چسبان (sticky) قایم نمی‌شه. سایت مستندات هم صفحه‌های تازه‌ای برای اسکرول همراه صفحه، این دو هوک و infinite loading گرفته.

نکات کلیدی:

• prop جدید scrollElement با مقدار "window" یا یه المنت والد، لیست و گرید رو همراه صفحه اسکرول می‌کنه.
• useVirtualizer یه هوک headless برای ساختن UI مجازی دلخواه مثل جدول HTML هست.
• useIsScrolling وضعیت اسکرول رو می‌ده و جایی که بشه از رویداد scrollend استفاده می‌کنه.
• متدهای اسکرول به ردیف و ستون حالا scroll-padding در CSS رو رعایت می‌کنن.