React 19.3: What’s New? View Transitions, Fragment Refs & More ·

React developer হলে নতুন version release হওয়ার পর একটা প্রশ্ন প্রায় সবার মাথায় আসে আবার কী কী শিখতে হবে?

চিন্তার কিছু নেই। React 19.3 এমন কোনো update না যে version update করলেই আপনার পুরোনো সব code ভেঙে যাবে।

বরং এই release-এ React বেশ কিছু experimental feature-কে আরও mature করেছে এবং কিছু নতুন API নিয়ে এসেছে, যেগুলো modern web application তৈরি করার সময় কাজে লাগতে পারে।

React 19.3 release হয়েছে ৯ সেপ্টেম্বর ২০২৬-এ। এই version-এর সবচেয়ে বড় highlight হলো View Transitions এবং Fragment Refs, যেগুলো এখন stable।

এর পাশাপাশি এসেছে browser() API, addTransitionType(), Trusted Types support, Server Components-এর improvement এবং rendering system-এর বেশ কিছু পরিবর্তন।

তাহলে চলুন, React 19.3-এ আসলে কী এসেছে এবং এগুলো আমাদের মতো React developer-এর কাজে কোথায় লাগতে পারে সেটা সহজভাবে দেখে নেওয়া যাক।

What’s New in React 19.3?

React 19.3-কে এমন একটা release বলা যায় যেখানে React-এর core concept পুরোপুরি বদলে যায়নি, কিন্তু modern application development-এর কিছু গুরুত্বপূর্ণ জায়গায় বেশ ভালো improvement এসেছে।

এই release-এর notable changes হলো:

View Transitions এখন stable
Fragment Refs এখন stable
নতুন browser() API
নতুন addTransitionType() API
Suspense-এর সঙ্গে View Transitions-এর উন্নত integration
Trusted Types support
Server Components-এর improvement
Transition rendering-এর improvement
Hydration, forms, Suspense এবং Fast Refresh-এর বিভিন্ন fix

এর মধ্যে View Transitions এবং Fragment Refs developer এবং user দুই দিক থেকেই সবচেয়ে বেশি noticeable হতে পারে।

View Transitions Are Now Stable

ধরুন আপনি একটা modern web application বানিয়েছেন।

User একটা button-এ click করল। সঙ্গে সঙ্গে আগের UI চলে গেল, নতুন UI চলে এলো।

Technically সব ঠিকঠাক। কিন্তু দেখতে একটু এমন Click → Disappear → Appear

মানে website কাজ করছে, কিন্তু user experience বলছে, “ভাই, একটু smooth হওয়া যেত না?”

এই জায়গায় View Transitions বেশ কাজে আসতে পারে।

React 19.3-এ View Transitions এখন stable। এর মাধ্যমে UI-এর এক state থেকে অন্য state-এ যাওয়ার সময় smooth transition তৈরি করা সহজ হয়েছে।

উদাহরণ:

import { ViewTransition } from 'react';

function App({ isShowing }) {
  return (
    <>
      {isShowing && (
        <ViewTransition>
          <Component />
        </ViewTransition>
      )}
    </>
  );
}

এখানে React বুঝতে পারে যে ViewTransition-এর ভেতরের UI পরিবর্তন হয়েছে এবং সেই পরিবর্তনের সময় transition চালানো যায়।

React বিভিন্ন ধরনের UI change handle করতে পারে। যেমন কোনো element নতুন করে আসলে Enter, চলে গেলে Exit, content পরিবর্তন হলে Update, আর named transition এক জায়গা থেকে অন্য জায়গায় move করলে Share transition।

Default হিসেবে React smooth cross-fade effect দিতে পারে। চাইলে CSS বা Web Animations API ব্যবহার করে animation নিজের মতো customize করা যায়।

অর্থাৎ প্রতিটি UI transition-এর জন্য শুরু থেকে সব animation logic নিজে লিখতে হবে না।

Adding More Control with `addTransitionType()`

এবার একটা practical example ধরা যাক।

আপনি একটা image carousel বানাচ্ছেন।

User যখন Next button চাপবে, আপনি চান image ডান দিক থেকে আসুক। আবার Previous চাপলে image বাম দিক থেকে আসুক।

সমস্যা হলো, দুই ক্ষেত্রেই state change হচ্ছে। React শুধু জানলে যে “state change হয়েছে”, সেটা দিয়ে আপনি transition-এর direction বুঝবেন কীভাবে?

React 19.3-এর addTransitionType() এখানেই interesting হয়ে ওঠে।

import {
  addTransitionType,
  startTransition
} from 'react';

function nextSlide() {
  startTransition(() => {
    addTransitionType('next');

    setCurrentSlide(current => current + 1);
  });
}

Previous-এর ক্ষেত্রে:

function previousSlide() {
  startTransition(() => {
    addTransitionType('previous');

    setCurrentSlide(current => current - 1);
  });
}

এখন React শুধু জানছে না যে একটা transition হয়েছে, বরং কোন ধরনের transition হয়েছে সেটাও জানা যাচ্ছে।

এর ফলে next আর previous অনুযায়ী আলাদা animation তৈরি করা সম্ভব।

Carousel, page navigation এবং বিভিন্ন interactive UI-এর ক্ষেত্রে এই control বেশ useful হতে পারে।

View Transitions and Suspense

React-এর Suspense আমরা সাধারণত asynchronous content বা lazy-loaded component handle করার জন্য ব্যবহার করি।

যেমন:

<Suspense fallback={<Loading />}>
  <Component />
</Suspense>

Component load হওয়ার আগ পর্যন্ত Loading দেখাবে, তারপর actual content আসবে।

React 19.3-এ View Transitions এবং Suspense আরও ভালোভাবে একসঙ্গে কাজ করতে পারে।

<ViewTransition>
  <Suspense fallback={<Loading />}>
    <Component />
  </Suspense>
</ViewTransition>

এতে fallback UI থেকে actual content আসার সময় React transition coordinate করতে পারে।

তবে এখানে একটা গুরুত্বপূর্ণ বিষয় আছে। সবকিছুতে animation লাগানো মানেই ভালো UX না।

User button-এ click করার পর loading state যদি সঙ্গে সঙ্গে দেখানোর বদলে animation-এর জন্য অপেক্ষা করে, তাহলে user ভাববে website slow।

তাই transition এমন জায়গায় ব্যবহার করা ভালো যেখানে সেটা interface-কে আরও understandable বা smooth করে।

Smoother Loading for Images and Fonts

আমরা অনেক website-এ একটা common সমস্যা দেখি।

Text আগে চলে আসে, তারপর image load হয়ে হঠাৎ করে পুরো layout নড়ে যায়।

Developer-এর কাছে বিষয়টা খুব simple: Image তো load হয়েছে।

কিন্তু user-এর কাছে: Pageটা হঠাৎ নড়ল কেন?

React 19.3-এর View Transitions এবং Suspense integration images, fonts এবং asynchronous content-এর loading experience আরও coordinated করতে সাহায্য করতে পারে।

উদাহরণ:

<ViewTransition>
  <Suspense fallback={<Fallback />}>
    <img src={imageSrc} />
  </Suspense>
</ViewTransition>

Image-heavy application বা এমন interface যেখানে asynchronous content বেশি, সেখানে এই approach UI-কে আরও polished feel দিতে পারে।

Fragment Refs Are Now Stable

এবার আসি React 19.3-এর আরেকটি interesting feature-এ Fragment Refs।

ধরুন আপনার কাছে কয়েকটি component আছে:

<div ref={ref}>
  <Card />
  <Card />
  <Card />
</div>

এখানে আমরা div ব্যবহার করছি মূলত একটা group-এর ওপর ref রাখার জন্য।

কিন্তু ওই div হয়তো আমাদের আসলে দরকারই ছিল না। শুধু ref-এর জন্য একটা extra wrapper তৈরি করা হলো।

React 19.3-এর Fragment Refs এই সমস্যাটাই solve করতে পারে। এখন Fragment-এর ওপর সরাসরি ref ব্যবহার করা যায়:

import { Fragment, useRef } from 'react';

function Component() {
  const fragmentRef = useRef(null);

  return (
    <Fragment ref={fragmentRef}>
      <Heading />
      <Heading />
      <Heading />
    </Fragment>
  );
}

এর ফলে শুধু ref ব্যবহারের জন্য unnecessary wrapper element যোগ করার প্রয়োজন কমে যেতে পারে।

What Can You Do with Fragment Refs?

Fragment Ref শুধু ref attach করার জন্য নয়। এর মাধ্যমে Fragment-এর direct child elements নিয়ে বিভিন্ন কাজ করা যায়।

Event handling:

fragmentInstance.addEventListener(...)
fragmentInstance.removeEventListener(...)
fragmentInstance.dispatchEvent(...)

Focus control:

fragmentInstance.focus()
fragmentInstance.focusLast()
fragmentInstance.blur()

এছাড়াও elements observe করা, তাদের position সম্পর্কে information নেওয়া এবং scrolling-এর মতো কাজ করা যায়।

fragmentInstance.observeUsing(...)
fragmentInstance.unobserveUsing(...)

fragmentInstance.getClientRects()
fragmentInstance.getRootNode()
fragmentInstance.scrollIntoView()

ধরুন আপনি একটা reusable InView component বানাতে চান, যেটা তার children viewport-এ এসেছে কি না সেটা track করবে।

আগে হয়তো wrapper element ব্যবহার করে কাজ চালাতে হতো। Fragment Refs ব্যবহার করে এখন DOM structure পরিবর্তন না করেও এ ধরনের behavior তৈরি করা সম্ভব।

Meet the New `browser()` API

React 19.3-এর আরেকটি interesting addition হলো browser() API।

এটা বিশেষ করে Server-Side Rendering বা SSR ব্যবহার করা application-এর জন্য useful হতে পারে। কারণ SSR-এর সময় একটা classic problem থাকে।

কিছু information server-এ available থাকে না, কিন্তু browser-এ থাকে।

যেমন:

window
localStorage
navigator

Server তো আর user’s browser-এর localStorage access করতে পারবে না। এজন্য developer-রা অনেক সময় লিখতেন:

if (typeof window !== 'undefined') {
  // browser-only logic
}

অথবা useEffect() দিয়ে browser-এ component mount হওয়ার পর logic চালাতেন।

React 19.3-এ browser() API এই ধরনের browser-dependent rendering আরও explicitly handle করার সুযোগ দেয়।

import { use } from 'react';
import { browser } from 'react-dom';

function Component() {
  use(browser());

  // Browser-only logic
}

Server-এ render করার সময় React component-টিকে suspend করতে পারে। Browser-এ hydration হওয়ার পর component স্বাভাবিকভাবে render করতে পারে।

A Practical Example of `browser()`

ধরুন আপনি user-এর local timezone দেখাতে চান।

function TimeZone() {
  use(browser());

  const timeZone =
    new Intl.DateTimeFormat().resolvedOptions().timeZone;

  return <p>{timeZone}</p>;
}

Server কীভাবে জানবে user Dhaka-তে আছে নাকি London-এ? Server তো আপনার user’s browser-এর পাশে বসে নেই।

এই ধরনের browser-specific information-এর ক্ষেত্রে browser() component-কে browser-এর ওপর নির্ভরশীল হিসেবে handle করতে সাহায্য করে।

Suspense-এর সঙ্গে এটাও ব্যবহার করা যায়:

<Suspense fallback="Loading...">
  <TimeZone />
</Suspense>

SSR application-এ browser-dependent component handle করার জন্য এটি আরও পরিষ্কার একটি approach তৈরি করতে পারে।

Better Trusted Types Support

React 19.3 শুধু animation আর rendering নিয়েই ব্যস্ত ছিল না। Security-এর দিকেও কিছু improvement এসেছে।

এই release-এ React Trusted Types API-এর সঙ্গে আরও ভালোভাবে কাজ করতে পারে।

Trusted Types হলো browser-এর একটি security mechanism, যা কিছু ধরনের DOM-based Cross-Site Scripting বা XSS vulnerability কমাতে সাহায্য করে।

সহজভাবে বললে, browser-এর sensitive DOM API-তে arbitrary string-এর পরিবর্তে trusted value ব্যবহার করার সুযোগ দেওয়া হয়।

React 19.3-এ Trusted Types object-গুলোকে unnecessarily plain string-এ convert না করে pass করার support উন্নত করা হয়েছে।

যেসব বড় application-এ strict security policy বা Content Security Policy ব্যবহার করা হয়, তাদের জন্য এই পরিবর্তন গুরুত্বপূর্ণ হতে পারে।

Improvements for Server Components

React Server Components নিয়ে কাজ করলে Context বেশ গুরুত্বপূর্ণ একটা বিষয়।

আগে Server Component থেকে Context Provider ব্যবহার করতে গিয়ে অনেক সময় আলাদা client component তৈরি করতে হতো।

শুধু একটা কাজের জন্য Context provide করা। React 19.3-এ এই workflow কিছুটা সহজ হয়েছে।

Server Component সরাসরি 'use client' module থেকে Context import করে render করতে পারে।

import { UserContext } from './user-context';

export async function Layout({ children }) {
  const currentUser = await getCurrentUser();

  return (
    <UserContext value={currentUser}>
      {children}
    </UserContext>
  );
}

এর ফলে শুধু Context provide করার জন্য আলাদা wrapper component তৈরি করার প্রয়োজন কমে যেতে পারে।

More Independent Transition Rendering

Modern React application-এ একই সময়ে অনেক কিছু ঘটতে পারে।

কোথাও data load হচ্ছে, কোথাও user interaction হচ্ছে, আবার কোথাও transition চলছে।

এখন যদি একটা update slow হয়, তাহলে অন্য unrelated update-গুলোও অযথা আটকে যাওয়া উচিত নয়।

React 19.3-এ Transition rendering আরও independently কাজ করার দিকে improvement এসেছে।

সহজভাবে বললে একজনের জন্য পুরো বাস থেমে থাকবে না।

একটা slow transition যেন অন্য unrelated transition-কে unnecessarily block না করে, React rendering system সেই দিকেও আরও flexible হয়েছে।

More Improvements in React 19.3

বড় feature-এর বাইরেও React 19.3-এ বেশ কিছু ছোট কিন্তু useful improvement এসেছে।

এর মধ্যে রয়েছে:

useDeferredValue-এর improvement
Suspense এবং Context propagation-এর improvement
Hydration-এর বিভিন্ন fix
useEffectEvent-এর improvement
Form state এবং submission-এর fix
Fast Refresh-এর improvement
<Activity> tree handling-এর improvement
নতুন fullscreen events
Module resource-এর জন্য fetchPriority support
React Server Components-এর error handling improvement
Suspense এবং View Transitions-এর বিভিন্ন bug fix

সবগুলো feature আপনার project-এ এখনই ব্যবহার করতে হবে এমন নয়।

কিন্তু বড় application-এর ক্ষেত্রে এই ছোট ছোট improvement-গুলোই শেষ পর্যন্ত stability এবং developer experience ভালো করতে সাহায্য করে।

Is React 19.3 a Major Change?

React 19.3 দেখে প্রথমে মনে হতে পারে, “এত feature! এবার তো আবার নতুন করে React শিখতে হবে!”

Actually, না। React-এর basic concept একই আছে।

আপনি এখনও component বানাবেন, props ব্যবহার করবেন, state manage করবেন, hooks ব্যবহার করবেন।

তবে React-এর focus ধীরে ধীরে আরও বড় হচ্ছে।

আগে প্রশ্ন ছিল: কীভাবে component render করব?

এখন তার সঙ্গে আরও কিছু প্রশ্ন যোগ হচ্ছে: UI পরিবর্তনের সময় transition কেমন হবে? Data আসার আগ পর্যন্ত user কী দেখবে? কোন component server-এ render হবে? কোন component browser-এর ওপর depend করবে?

React 19.3-এর feature-গুলো মূলত এই সমস্যাগুলোর আশেপাশেই ঘুরছে।

Should You Upgrade to React 19.3?

নতুন project শুরু করছেন?

তাহলে React 19.3 সম্পর্কে জানা এবং documentation দেখে নেওয়া অবশ্যই worthwhile।

তবে existing production application থাকলে শুধু নতুন version release হয়েছে বলেই সঙ্গে সঙ্গে upgrade করার দরকার নেই।

আগে দেখুন আপনার project কী ব্যবহার করছে।

SSR আছে?

Server Components আছে?

Suspense কতটা ব্যবহার করছেন?

কোন framework এবং dependencies-এর ওপর project দাঁড়িয়ে আছে?

তারপর upgrade plan করুন।

আর সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো React 19.3-এর প্রতিটি feature আপনার application-এ ব্যবহার করতেই হবে না। Smooth UI transition দরকার?

View Transitions দেখুন।

Unnecessary wrapper element avoid করতে চান? Fragment Refs দেখুন।

SSR-এ browser-only component আছে? browser() দেখুন।

Strict security requirement আছে? Trusted Types support দেখুন।

মানে আগে problem খুঁজুন, তারপর tool বের করুন।

নতুন tool এসেছে দেখে toolbox-এর সবকিছু একসঙ্গে project-এ ঢুকিয়ে দেওয়ার দরকার নেই।

How to Update to React 19.3

React 19.3 ব্যবহার করতে চাইলে npm দিয়ে update করতে পারেন:

npm install react@19.3 react-dom@19.3

pnpm ব্যবহার করলে:

pnpm add react@19.3 react-dom@19.3

তবে production project update করার আগে অবশ্যই test চালিয়ে নেওয়া ভালো।

বিশেষ করে SSR, Suspense, Server Components বা advanced rendering feature ব্যবহার করলে React-এর official documentation এবং আপনার framework-এর compatibility information দেখে নেওয়া উচিত।

Final Thoughts

React 19.3 এমন কোনো release নয় যেখানে React-এর পুরো game বদলে গেছে।

বরং React ধীরে ধীরে এমন কিছু problem solve করার দিকে এগোচ্ছে, যেগুলো modern web application তৈরি করতে গেলে প্রতিদিনই সামনে আসে।

View Transitions UI-কে আরও smooth করার সুযোগ দিচ্ছে।

Fragment Refs unnecessary wrapper element ছাড়াই multiple DOM elements নিয়ে কাজ করার সুযোগ দিচ্ছে।

browser() server এবং browser-এর boundary আরও পরিষ্কার করছে।

Trusted Types support security-এর জায়গায় React-এর integration improve করছে।

আর Server Components, Suspense এবং Transition rendering-এর improvement React-কে আরও capable করে তুলছে।

তবে নতুন feature এসেছে মানেই সব feature project-এ ব্যবহার করতে হবে এমন না। একজন ভালো developer শুধু জানেন না কোন feature কী করে।

তিনি এটাও জানেন কোন problem হলে কোন feature ব্যবহার করতে হবে।

React 19.3 আমাদের toolbox-এ আরও কয়েকটা নতুন tool যোগ করেছে। এখন কোন tool কখন বের করবেন, সেটা আপনার ওপর।

All Tech Update

Technology এর সকল আপডেট সবার আগে বিস্তারিত পড়ুন –