‏React Router 8.4 اومد: رندر کمتر، مچ کردن سریع‌تر

React Router نسخهٔ 8.4.0 رو ۱۵ سپتامبر ۲۰۲۶ منتشر کرده و دو تغییر اصلیش به سرعت اپ مربوطه. اولیش اینه که context داخلی روتر (یعنی همون جایی که hookها state روتر رو ازش می‌خونن) به چهار تیکهٔ کوچیک‌تر شکسته شده. قبلاً هر تغییری تو state روتر همهٔ کامپوننت‌هایی که hook صدا زده بودن رو دوباره رندر می‌کرد.

حالا این چهار context جدا داریم:

• موقعیت فعلی: useLocation، useSearchParams، useMatches
• ناوبری یا revalidation در جریان: useNavigation، useRevalidation
• داده‌های loader و action: useLoaderData، useActionData
• وضعیت fetcherها: useFetcher، useFetchers

مثلاً کامپوننتی که فقط useLocation رو صدا می‌زنه، دیگه وقتی navigation.state می‌ره رو loading رندر نمی‌شه. یعنی بدون دست زدن به کدت، رندرهای بی‌خود کمتر می‌شن.

تغییر دوم یه route matcher جدید و آزمایشیه (یعنی بخشی که تصمیم می‌گیره آدرس فعلی به کدوم route می‌خوره). این matcher روی پکیج @remix-run/route-pattern ساخته شده و فعلاً فقط تو Data Mode با فلگ unstable_routePatternMatching روشن می‌شه. به گفتهٔ تیم React Router، تو بنچمارک‌های مصنوعی Chromium زمان تموم شدن ناوبری و fetcherها با ۱۰۰ route حدود ۱۹ تا ۳۸ درصد و با ۱۰۰۰ route حدود ۷۱ تا ۸۸ درصد کمتر شده. البته این عدد تأخیر شبکه و رندر React رو حساب نمی‌کنه.

قبل از روشن کردن فلگ باید unstable_preloadRoutePattern() رو صدا بزنی. اینجوری اپ‌هایی که سراغ این قابلیت نمی‌رن، کد matcher جدید رو اصلاً دانلود نمی‌کنن. همراهش یه فیلد تازه به اسم unstable_validateParams هم اومده که برای هر پارامتر یه regex می‌گیره. اگه پارامتر با regex نخونه، روتر می‌ره سراغ routeهای بعدی:

unstable_preloadRoutePattern();

let router = createBrowserRouter(
  [{ path: "/:drink", unstable_validateParams: { drink: /^(wines|whiskeys|sakes|beers)$/ } }],
  { future: { unstable_routePatternMatching: true } },
);

یه نکته هم هست: APIهای قدیمی مثل matchRoutes، matchPath و useMatch هنوز با matcher قدیمی مبتنی بر regex کار می‌کنن و ممکنه نتیجه‌شون کمی فرق کنه. برای مچ کردن با روتر جدید باید از router.match() استفاده کنی که فعلاً خودش هم unstable هست. جدا از این‌ها، گزینهٔ branches تو createStaticRouter هم deprecated شده و حالا روتر خودش routeها رو کش می‌کنه.

نکات کلیدی:

• React Router 8.4.0 تاریخ ۱۵ سپتامبر ۲۰۲۶ منتشر شده.
• context داخلی روتر به ۴ بخش جدا شکسته شده تا رندرهای اضافه کم بشه.
• matcher جدید با فلگ unstable_routePatternMatching فقط تو Data Mode فعال می‌شه.
• بنچمارک: با ۱۰۰۰ route، ناوبری ۷۱ تا ۸۸ درصد سریع‌تر، بدون حساب شبکه و رندر.
• فیلد unstable_validateParams برای هر پارامتر route یه regex می‌گیره.
• گزینهٔ createStaticRouter({ branches }) دیگه deprecated شده.