Blog

React Labs: View Transitions, Activity, மேலும் பல

April 23, 2025 by Ricky Hanlon

React Labs posts-இல், active research மற்றும் development-இல் இருக்கும் projects பற்றி எழுதுகிறோம். இந்த post-இல், இன்று முயற்சிக்கத் தயாராக இருக்கும் இரண்டு புதிய experimental features-ஐயும், இப்போது நாங்கள் செய்து கொண்டிருக்கும் மற்ற பகுதிகளின் updates-ஐயும் பகிர்கிறோம்.

இன்று, testing-க்கு தயாராக இருக்கும் இரண்டு புதிய experimental features-க்கான documentation-ஐ வெளியிடுவதில் மகிழ்ச்சி:

தற்போது development-இல் இருக்கும் புதிய features பற்றிய updates-ஐயும் பகிர்கிறோம்:

புதிய Experimental Features

Note

<Activity /> react@19.2-இல் ship செய்யப்பட்டுள்ளது.

<ViewTransition /> மற்றும் addTransitionType இப்போது react@canary-இல் கிடைக்கின்றன.

View Transitions மற்றும் Activity இப்போது react@experimental-இல் testing-க்கு தயாராக உள்ளன. இந்த features production-இல் test செய்யப்பட்டு stable ஆக உள்ளன; ஆனால் feedback-ஐ சேர்க்கும் போது final API இன்னும் மாறக்கூடும்.

React packages-ஐ சமீபத்திய experimental version-க்கு upgrade செய்து அவற்றை முயற்சிக்கலாம்:

  • react@experimental
  • react-dom@experimental

இந்த features-ஐ உங்கள் app-இல் எப்படி பயன்படுத்துவது என்பதை அறிய தொடர்ந்து படிக்கவும், அல்லது புதிதாக வெளியிடப்பட்ட docs-ஐ பார்க்கவும்:

  • <ViewTransition>: ஒரு Transition-க்கான animation-ஐ activate செய்ய அனுமதிக்கும் component.
  • addTransitionType: ஒரு Transition-ன் காரணத்தை specify செய்ய அனுமதிக்கும் function.
  • <Activity>: UI-ன் பகுதிகளை hide மற்றும் show செய்ய அனுமதிக்கும் component.

View Transitions

React View Transitions என்பது உங்கள் app-இல் UI transitions-க்கு animations சேர்ப்பதை உதவும் புதிய experimental feature. உள்ளே, இந்த animations பெரும்பாலான modern browsers-இல் கிடைக்கும் புதிய startViewTransition API-ஐ பயன்படுத்துகின்றன.

ஒரு element-ஐ animate செய்ய opt-in செய்ய, அதை புதிய <ViewTransition> component-இல் wrap செய்யுங்கள்:

// "what" to animate.
<ViewTransition>
  <div>என்னை animate செய்</div>
</ViewTransition>

Animation activate ஆகும் போது “எதை” animate செய்ய வேண்டும் என்பதை declarative ஆக define செய்ய இந்த புதிய component உதவுகிறது.

View Transition-க்கான இந்த மூன்று triggers-இல் ஒன்றை பயன்படுத்தி “எப்போது” animate செய்ய வேண்டும் என்பதை define செய்யலாம்:

// "when" to animate.

// Transitions
startTransition(() => setState(...));

// Deferred Values
const deferred = useDeferredValue(value);

// Suspense
<Suspense fallback={<Fallback />}>
  <div>ஏற்றுகிறது...</div>
</Suspense>

Default ஆக, இந்த animations View Transitions-க்கான default CSS animations-ஐ பயன்படுத்துகின்றன (பொதுவாக smooth cross-fade). Animation “எப்படி” இயங்க வேண்டும் என்பதை define செய்ய view transition pseudo-selectors-ஐ பயன்படுத்தலாம். உதாரணமாக, எல்லா transitions-க்கும் default animation-ஐ மாற்ற * பயன்படுத்தலாம்:

// "how" to animate.
::view-transition-old(*) {
  animation: 300ms ease-out fade-out;
}
::view-transition-new(*) {
  animation: 300ms ease-in fade-in;
}

startTransition, useDeferredValue, அல்லது Suspense fallback content-க்கு மாறுவது போன்ற animation trigger காரணமாக DOM update ஆகும் போது, animation-க்காக எந்த <ViewTransition> components-ஐ activate செய்ய வேண்டும் என்பதை React declarative heuristics மூலம் தானாக தீர்மானிக்கும். பிறகு browser CSS-இல் define செய்யப்பட்ட animation-ஐ run செய்யும்.

Browser-ன் View Transition API உங்களுக்கு தெரிந்திருந்தால், React அதை எப்படி support செய்கிறது என்பதை அறிய docs-இல் உள்ள <ViewTransition> எப்படி வேலை செய்கிறது பகுதியைப் பார்க்கவும்.

இந்த post-இல், View Transitions-ஐ எப்படி பயன்படுத்துவது என்பதற்கான சில examples-ஐ பார்க்கலாம்.

பின்வரும் interactions எதையும் animate செய்யாத இந்த app-இலிருந்து தொடங்குவோம்:

  • விவரங்களைப் பார்க்க ஒரு video-வை click செய்யுங்கள்.
  • feed-க்கு திரும்ப “பின் செல்” click செய்யுங்கள்.
  • videos-ஐ filter செய்ய list-இல் type செய்யுங்கள்.
import TalkDetails from './Details'; import Home from './Home'; import {useRouter} from './router';

export default function App() {
  const {url} = useRouter();

  // 🚩This version doesn't include any animations yet
  return url === '/' ? <Home /> : <TalkDetails />;
}

Note

View Transitions CSS மற்றும் JS மூலம் இயக்கப்படும் animations-ஐ மாற்றுவதில்லை

Navigation, expanding, opening, அல்லது re-ordering போன்ற UI transitions-க்காக View Transitions பயன்படுத்தப்பட வேண்டும். உங்கள் app-இல் உள்ள எல்லா animations-க்கும் இது மாற்றாக இல்லை.

மேலுள்ள example app-இல், “like” button click செய்யும்போதும் Suspense fallback glimmer-இலும் ஏற்கனவே animations இருப்பதை கவனியுங்கள். ஒரு குறிப்பிட்ட element-ஐ animate செய்வதால் இவை CSS animations-க்கு நல்ல use cases.

Navigations-ஐ animate செய்தல்

எங்கள் app-இல் Suspense-enabled router உள்ளது; இதில் page transitions ஏற்கனவே Transitions ஆகக் குறிக்கப்பட்டுள்ளன. அதனால் navigations startTransition மூலம் செய்யப்படுகின்றன:

function navigate(url) {
  startTransition(() => {
    go(url);
  });
}

startTransition ஒரு View Transition trigger; எனவே pages இடையே animate செய்ய <ViewTransition> சேர்க்கலாம்:

// "what" to animate
<ViewTransition key={url}>
  {url === '/' ? <Home /> : <TalkDetails />}
</ViewTransition>

url மாறும் போது, <ViewTransition> மற்றும் புதிய route render செய்யப்படுகின்றன. <ViewTransition> startTransition-க்குள் update செய்யப்பட்டதால், animation-க்காக <ViewTransition> activate ஆகிறது.

Default ஆக, View Transitions browser-ன் default cross-fade animation-ஐ கொண்டிருக்கும். இதை எங்கள் example-க்கு சேர்த்ததால், pages இடையே navigate செய்யும் ஒவ்வொரு முறையும் cross-fade கிடைக்கிறது:

import {ViewTransition} from 'react'; import Details from './Details';
import Home from './Home'; import {useRouter} from './router';

export default function App() {
  const {url} = useRouter();

  // Use ViewTransition to animate between pages.
  // No additional CSS needed by default.
  return (
    <ViewTransition>
      {url === '/' ? <Home /> : <Details />}
    </ViewTransition>
  );
}

எங்கள் router ஏற்கனவே startTransition பயன்படுத்தி route-ஐ update செய்வதால், <ViewTransition> சேர்க்கும் இந்த ஒரு வரி மாற்றமே default cross-fade animation-ஐ activate செய்கிறது.

இது எப்படி வேலை செய்கிறது என்று அறிய விரும்பினால், docs-இல் உள்ள <ViewTransition> எப்படி வேலை செய்கிறது? பகுதியைப் பார்க்கவும்.

Note

<ViewTransition> animations-இலிருந்து opt out செய்தல்

இந்த example-இல் தெளிவுக்காக app-ன் root-ஐ <ViewTransition>-இல் wrap செய்கிறோம். ஆனால் இதனால் app-இல் உள்ள எல்லா transitions-உம் animate ஆகும்; அது எதிர்பாராத animations-க்கு வழிவகுக்கலாம்.

இதைக் சரிசெய்ய, ஒவ்வொரு page-உம் தன் animation-ஐ control செய்ய route children-ஐ "none" உடன் wrap செய்கிறோம்:

// Layout.js
<ViewTransition default="none">
  {children}
</ViewTransition>

நடைமுறையில், navigations-ஐ “enter” மற்றும் “exit” props வழியாகவோ, அல்லது Transition Types பயன்படுத்தியோ செய்ய வேண்டும்.

Animations-ஐ customize செய்தல்

Default ஆக, <ViewTransition> browser-இல் இருந்து default cross-fade-ஐ கொண்டிருக்கும்.

Animations-ஐ customize செய்ய, <ViewTransition> எப்படி activate ஆகிறது என்பதன் அடிப்படையில் எந்த animations பயன்படுத்த வேண்டும் என்பதை specify செய்ய <ViewTransition> component-க்கு props வழங்கலாம்.

உதாரணமாக, default cross fade animation-ஐ மெதுவாக்கலாம்:

<ViewTransition default="slow-fade">
  <Home />
</ViewTransition>

view transition classes பயன்படுத்தி CSS-இல் slow-fade-ஐ define செய்யலாம்:

::view-transition-old(.slow-fade) {
    animation-duration: 500ms;
}

::view-transition-new(.slow-fade) {
    animation-duration: 500ms;
}

இப்போது cross fade மெதுவாகிறது:

import { ViewTransition } from "react";
import Details from "./Details";
import Home from "./Home";
import { useRouter } from "./router";

export default function App() {
  const { url } = useRouter();

  // Define a default animation of .slow-fade.
  // See animations.css for the animation definition.
  return (
    <ViewTransition default="slow-fade">
      {url === '/' ? <Home /> : <Details />}
    </ViewTransition>
  );
}

<ViewTransition>-ஐ style செய்வதற்கான முழு வழிகாட்டிக்கு Styling View Transitions-ஐ பார்க்கவும்.

Shared Element Transitions பகிரப்பட்ட element மாற்றங்கள்

இரண்டு pages-லும் ஒரே element இருந்தால், அதை ஒரு page-இலிருந்து அடுத்த page-க்கு animate செய்ய நீங்கள் அடிக்கடி விரும்பலாம்.

இதற்கு <ViewTransition>-க்கு unique name சேர்க்கலாம்:

<ViewTransition name={`video-${video.id}`}>
  <Thumbnail video={video} />
</ViewTransition>

இப்போது video thumbnail இரண்டு pages இடையே animate ஆகிறது:

import { useState, ViewTransition } from "react"; import LikeButton from "./LikeButton"; import { useRouter } from "./router"; import { PauseIcon, PlayIcon } from "./Icons"; import { startTransition } from "react";

export function Thumbnail({ video, children }) {
  // Add a name to animate with a shared element transition.
  // This uses the default animation, no additional css needed.
  return (
    <ViewTransition name={`video-${video.id}`}>
      <div
        aria-hidden="true"
        tabIndex={-1}
        className={`thumbnail ${video.image}`}
      >
        {children}
      </div>
    </ViewTransition>
  );
}

export function VideoControls() {
  const [isPlaying, setIsPlaying] = useState(false);

  return (
    <span
      className="controls"
      onClick={() =>
        startTransition(() => {
          setIsPlaying((p) => !p);
        })
      }
    >
      {isPlaying ? <PauseIcon /> : <PlayIcon />}
    </span>
  );
}

export function Video({ video }) {
  const { navigate } = useRouter();

  return (
    <div className="video">
      <div
        className="link"
        onClick={(e) => {
          e.preventDefault();
          navigate(`/video/${video.id}`);
        }}
      >
        <Thumbnail video={video}></Thumbnail>

        <div className="info">
          <div className="video-title">{video.title}</div>
          <div className="video-description">{video.description}</div>
        </div>
      </div>
      <LikeButton video={video} />
    </div>
  );
}

Default ஆக, transition-க்காக activate செய்யப்படும் ஒவ்வொரு element-க்கும் React தானாக unique name generate செய்கிறது (<ViewTransition> எப்படி வேலை செய்கிறது பார்க்கவும்). name கொண்ட ஒரு <ViewTransition> remove செய்யப்பட்டு, அதே name கொண்ட புதிய <ViewTransition> சேர்க்கப்படும் transition-ஐ React கண்டால், அது shared element transition-ஐ activate செய்யும்.

மேலும் தகவலுக்கு, docs-இல் உள்ள Shared Element-ஐ animate செய்தல் பகுதியைப் பார்க்கவும்.

காரணத்தின் அடிப்படையில் animate செய்தல்

சில நேரங்களில், அது எப்படி trigger செய்யப்பட்டது என்பதின் அடிப்படையில் elements வேறுபடியாக animate ஆக வேண்டும் என்று நீங்கள் விரும்பலாம். இந்த use case-க்காக, transition-ன் காரணத்தை specify செய்ய addTransitionType என்ற புதிய API-ஐ சேர்த்துள்ளோம்:

function navigate(url) {
  startTransition(() => {
    // Transition type for the cause "nav forward"
    addTransitionType('nav-forward');
    go(url);
  });
}
function navigateBack(url) {
  startTransition(() => {
    // Transition type for the cause "nav backward"
    addTransitionType('nav-back');
    go(url);
  });
}

Transition types மூலம், <ViewTransition>-க்கு props வழியாக custom animations வழங்கலாம். “6 வீடியோக்கள்” மற்றும் “பின் செல்” ஆகிய header-க்கு shared element transition சேர்ப்போம்:

<ViewTransition
  name="nav"
  share={{
    'nav-forward': 'slide-forward',
    'nav-back': 'slide-back',
  }}>
  {heading}
</ViewTransition>

Transition type-ன் அடிப்படையில் எப்படி animate செய்ய வேண்டும் என்பதை define செய்ய இங்கு share prop-ஐ pass செய்கிறோம். Share transition nav-forward-இலிருந்து activate ஆகும் போது, slide-forward என்ற view transition class apply செய்யப்படுகிறது. அது nav-back-இலிருந்து வந்தால், slide-back animation activate ஆகும். இந்த animations-ஐ CSS-இல் define செய்வோம்:

::view-transition-old(.slide-forward) {
    /* when sliding forward, the "old" page should slide out to left. */
    animation: ...
}

::view-transition-new(.slide-forward) {
    /* when sliding forward, the "new" page should slide in from right. */
    animation: ...
}

::view-transition-old(.slide-back) {
    /* when sliding back, the "old" page should slide out to right. */
    animation: ...
}

::view-transition-new(.slide-back) {
    /* when sliding back, the "new" page should slide in from left. */
    animation: ...
}

இப்போது navigation type-ன் அடிப்படையில் thumbnail உடன் header-ஐயும் animate செய்யலாம்:

import {ViewTransition} from 'react'; import { useIsNavPending } from "./router";

export default function Page({ heading, children }) {
  const isPending = useIsNavPending();
  return (
    <div className="page">
      <div className="top">
        <div className="top-nav">
          {/* Custom classes based on transition type. */}
          <ViewTransition
            name="nav"
            share={{
              'nav-forward': 'slide-forward',
              'nav-back': 'slide-back',
            }}>
            {heading}
          </ViewTransition>
          {isPending && <span className="loader"></span>}
        </div>
      </div>
      {/* Opt-out of ViewTransition for the content. */}
      {/* Content can define it's own ViewTransition. */}
      <ViewTransition default="none">
        <div className="bottom">
          <div className="content">{children}</div>
        </div>
      </ViewTransition>
    </div>
  );
}

Suspense Boundaries-ஐ animate செய்தல்

Suspense-உம் View Transitions-ஐ activate செய்யும்.

Fallback content-ஆக மாறுவதை animate செய்ய, Suspense-ஐ <ViewTranstion> கொண்டு wrap செய்யலாம்:

<ViewTransition>
  <Suspense fallback={<VideoInfoFallback />}>
    <VideoInfo />
  </Suspense>
</ViewTransition>

இதைக் சேர்த்தால், fallback content-ஆக cross-fade ஆகும். ஒரு video-வை click செய்து, video info animate ஆகி வருவது எப்படி என்பதை பாருங்கள்:

import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";

function VideoDetails({ id }) {
  // Cross-fade the fallback to content.
  return (
    <ViewTransition default="slow-fade">
      <Suspense fallback={<VideoInfoFallback />}>
          <VideoInfo id={id} />
      </Suspense>
    </ViewTransition>
  );
}

function VideoInfoFallback() {
  return (
    <div>
      <div className="fit fallback title"></div>
      <div className="fit fallback description"></div>
    </div>
  );
}

export default function Details() {
  const { url, navigateBack } = useRouter();
  const videoId = url.split("/").pop();
  const video = use(fetchVideo(videoId));

  return (
    <Layout
      heading={
        <div
          className="fit back"
          onClick={() => {
            navigateBack("/");
          }}
        >
          <ChevronLeft /> பின் செல்
        </div>
      }
    >
      <div className="details">
        <Thumbnail video={video} large>
          <VideoControls />
        </Thumbnail>
        <VideoDetails id={video.id} />
      </div>
    </Layout>
  );
}

function VideoInfo({ id }) {
  const details = use(fetchVideoDetails(id));
  return (
    <div>
      <p className="fit info-title">{details.title}</p>
      <p className="fit info-description">{details.description}</p>
    </div>
  );
}

Fallback-இல் exit மற்றும் content-இல் enter பயன்படுத்தி custom animations-ஐயும் வழங்கலாம்:

<Suspense
  fallback={
    <ViewTransition exit="slide-down">
      <VideoInfoFallback />
    </ViewTransition>
  }
>
  <ViewTransition enter="slide-up">
    <VideoInfo id={id} />
  </ViewTransition>
</Suspense>

CSS-இல் slide-down மற்றும் slide-up-ஐ இப்படி define செய்வோம்:

::view-transition-old(.slide-down) {
  /* Slide the fallback down */
  animation: ...;
}

::view-transition-new(.slide-up) {
  /* Slide the content up */
  animation: ...;
}

இப்போது Suspense content, sliding animation உடன் fallback-ஐ மாற்றுகிறது:

import { use, Suspense, ViewTransition } from "react"; import { fetchVideo, fetchVideoDetails } from "./data"; import { Thumbnail, VideoControls } from "./Videos"; import { useRouter } from "./router"; import Layout from "./Layout"; import { ChevronLeft } from "./Icons";

function VideoDetails({ id }) {
  return (
    <Suspense
      fallback={
        // Animate the fallback down.
        <ViewTransition exit="slide-down">
          <VideoInfoFallback />
        </ViewTransition>
      }
    >
      {/* Animate the content up */}
      <ViewTransition enter="slide-up">
        <VideoInfo id={id} />
      </ViewTransition>
    </Suspense>
  );
}

function VideoInfoFallback() {
  return (
    <>
      <div className="fallback title"></div>
      <div className="fallback description"></div>
    </>
  );
}

export default function Details() {
  const { url, navigateBack } = useRouter();
  const videoId = url.split("/").pop();
  const video = use(fetchVideo(videoId));

  return (
    <Layout
      heading={
        <div
          className="fit back"
          onClick={() => {
            navigateBack("/");
          }}
        >
          <ChevronLeft /> பின் செல்
        </div>
      }
    >
      <div className="details">
        <Thumbnail video={video} large>
          <VideoControls />
        </Thumbnail>
        <VideoDetails id={video.id} />
      </div>
    </Layout>
  );
}

function VideoInfo({ id }) {
  const details = use(fetchVideoDetails(id));
  return (
    <>
      <p className="info-title">{details.title}</p>
      <p className="info-description">{details.description}</p>
    </>
  );
}

Lists-ஐ animate செய்தல்

Search செய்யக்கூடிய items list போன்றவற்றில் items re-order ஆகும் போது lists-ஐ animate செய்யவும் <ViewTransition> பயன்படுத்தலாம்:

<div className="videos">
  {filteredVideos.map((video) => (
    <ViewTransition key={video.id}>
      <Video video={video} />
    </ViewTransition>
  ))}
</div>

ViewTransition-ஐ activate செய்ய useDeferredValue பயன்படுத்தலாம்:

const [searchText, setSearchText] = useState('');
const deferredSearchText = useDeferredValue(searchText);
const filteredVideos = filterVideos(videos, deferredSearchText);

இப்போது search bar-இல் type செய்யும் போது items animate ஆகின்றன:

import { useId, useState, use, useDeferredValue, ViewTransition } from "react";import { Video } from "./Videos";import Layout from "./Layout";import { fetchVideos } from "./data";import { IconSearch } from "./Icons";

function SearchList({searchText, videos}) {
  // Activate with useDeferredValue ("when")
  const deferredSearchText = useDeferredValue(searchText);
  const filteredVideos = filterVideos(videos, deferredSearchText);
  return (
    <div className="video-list">
      <div className="videos">
        {filteredVideos.map((video) => (
          // Animate each item in list ("what")
          <ViewTransition key={video.id}>
            <Video video={video} />
          </ViewTransition>
        ))}
      </div>
      {filteredVideos.length === 0 && (
        <div className="no-results">முடிவுகள் இல்லை</div>
      )}
    </div>
  );
}

export default function Home() {
  const videos = use(fetchVideos());
  const count = videos.length;
  const [searchText, setSearchText] = useState('');

  return (
    <Layout heading={<div className="fit">{count} வீடியோக்கள்</div>}>
      <SearchInput value={searchText} onChange={setSearchText} />
      <SearchList videos={videos} searchText={searchText} />
    </Layout>
  );
}

function SearchInput({ value, onChange }) {
  const id = useId();
  return (
    <form className="search" onSubmit={(e) => e.preventDefault()}>
      <label htmlFor={id} className="sr-only">
        தேடு
      </label>
      <div className="search-input">
        <div className="search-icon">
          <IconSearch />
        </div>
        <input
          type="text"
          id={id}
          placeholder="தேடு"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
      </div>
    </form>
  );
}

function filterVideos(videos, query) {
  const keywords = query
    .toLowerCase()
    .split(" ")
    .filter((s) => s !== "");
  if (keywords.length === 0) {
    return videos;
  }
  return videos.filter((video) => {
    const words = (video.title + " " + video.description)
      .toLowerCase()
      .split(" ");
    return keywords.every((kw) => words.some((w) => w.includes(kw)));
  });
}

இறுதி முடிவு

சில <ViewTransition> components மற்றும் சில CSS வரிகளைச் சேர்த்ததன் மூலம், மேலுள்ள எல்லா animations-ஐயும் இறுதி முடிவில் சேர்க்க முடிந்தது.

View Transitions பற்றி எங்களுக்கு உற்சாகம் உள்ளது; நீங்கள் உருவாக்கக்கூடிய apps-ஐ அவை ஒரு நிலை உயர்த்தும் என்று நினைக்கிறோம். React releases-ன் experimental channel-இல் இன்று முயற்சிக்கத் தயாராக உள்ளன.

Slow fade-ஐ அகற்றி, இறுதி முடிவைப் பார்ப்போம்:

import {ViewTransition} from 'react'; import Details from './Details'; import Home from './Home'; import {useRouter} from './router';

export default function App() {
  const {url} = useRouter();

  // Animate with a cross fade between pages.
  return (
    <ViewTransition key={url}>
      {url === '/' ? <Home /> : <Details />}
    </ViewTransition>
  );
}

அவை எப்படி வேலை செய்கின்றன என்பதை மேலும் அறிய விரும்பினால், docs-இல் உள்ள <ViewTransition> எப்படி வேலை செய்கிறது பகுதியைப் பார்க்கவும்.

View Transitions-ஐ எவ்வாறு உருவாக்கினோம் என்ற கூடுதல் பின்னணிக்கு, @sebmarkbage உருவாக்கிய #31975, #32105, #32041, #32734, #32797, #31999, #32031, #32050, #32820, #32029, #32028, மற்றும் #32038-ஐ பார்க்கவும் (நன்றி Seb!).

Activity

Note

<Activity /> இப்போது React-ன் Canary channel-இல் கிடைக்கிறது.

React-ன் release channels பற்றி இங்கே மேலும் அறிக.

முந்தைய updates-இல், components-ஐ visually hidden ஆகவும் deprioritized ஆகவும் வைத்திருக்க, அதே நேரத்தில் UI state-ஐ preserve செய்து, unmount செய்வதோ CSS மூலம் hide செய்வதோடு ஒப்பிடும்போது performance cost-ஐ குறைக்கும் API பற்றி research செய்து வருகிறோம் என்று பகிர்ந்தோம்.

இப்போது அந்த API-யையும் அது எப்படி வேலை செய்கிறது என்பதையும் பகிரத் தயாராக உள்ளோம்; அதனால் experimental React versions-இல் அதை test செய்ய தொடங்கலாம்.

<Activity> என்பது UI-ன் பகுதிகளை hide மற்றும் show செய்யும் புதிய component:

<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

ஒரு Activity visible ஆக இருக்கும் போது, அது வழக்கம்போல் render செய்யப்படுகிறது. Activity hidden ஆக இருக்கும் போது, அது unmount செய்யப்படும்; ஆனால் அதன் state save செய்யப்படும், மேலும் screen-இல் visible ஆக இருப்பதையெல்லாம் விட குறைந்த priority-யில் render தொடரும்.

User பயன்படுத்தாத UI பகுதிகளின் state-ஐ save செய்ய, அல்லது user அடுத்ததாக பயன்படுத்த வாய்ப்புள்ள பகுதிகளை pre-render செய்ய Activity பயன்படுத்தலாம்.

மேலுள்ள View Transition examples-ஐ மேம்படுத்தும் சில examples-ஐ பார்க்கலாம்.

Note

ஒரு Activity hidden ஆக இருக்கும் போது Effects mount ஆகாது.

ஒரு <Activity> hidden ஆக இருக்கும் போது, Effects unmount செய்யப்படுகின்றன. Conceptually, component unmount செய்யப்படுகிறது; ஆனால் React state-ஐ பின்னர் பயன்படுத்த save செய்கிறது.

நடைமுறையில், உங்களுக்கு Effect தேவைப்படாமல் இருக்கலாம் வழிகாட்டியை நீங்கள் பின்பற்றியிருந்தால் இது எதிர்பார்த்தபடி வேலை செய்யும். Problematic Effects-ஐ விரைவாக கண்டுபிடிக்க, <StrictMode> சேர்க்க பரிந்துரைக்கிறோம்; அது unexpected side effects-ஐ பிடிக்க Activity unmounts மற்றும் mounts-ஐ முன்கூட்டியே perform செய்யும்.

Activity மூலம் state-ஐ restore செய்தல்

User ஒரு page-இலிருந்து navigate away செய்யும் போது, பழைய page-ஐ render செய்வதை நிறுத்துவது பொதுவானது:

function App() {
  const { url } = useRouter();

  return (
    <>
      {url === '/' && <Home />}
      {url !== '/' && <Details />}
    </>
  );
}

ஆனால் இதன் பொருள், user பழைய page-க்கு திரும்பினால் முந்தைய state அனைத்தும் இழக்கப்படும். உதாரணமாக, <Home /> page-இல் ஒரு <input> field இருந்தால், user page-ஐ விட்டு சென்றபோது அந்த <input> unmount செய்யப்படும்; அவர்கள் type செய்த text அனைத்தும் இழக்கப்படும்.

User pages மாற்றும் போது state-ஐ வைத்திருக்க Activity அனுமதிக்கிறது; அதனால் அவர்கள் திரும்பி வரும்போது விட்ட இடத்திலிருந்து தொடரலாம். Tree-ன் ஒரு பகுதியை <Activity>-இல் wrap செய்து mode-ஐ toggle செய்வதன் மூலம் இது செய்யப்படுகிறது:

function App() {
  const { url } = useRouter();

  return (
    <>
      <Activity mode={url === '/' ? 'visible' : 'hidden'}>
        <Home />
      </Activity>
      {url !== '/' && <Details />}
    </>
  );
}

இந்த மாற்றத்தால், மேலுள்ள View Transitions example-ஐ மேம்படுத்தலாம். முன்பு, நீங்கள் ஒரு video-வை search செய்து, ஒன்றை select செய்து, திரும்பியபோது search filter இழந்துவிடும். Activity மூலம், search filter restore ஆகும்; நீங்கள் விட்ட இடத்திலிருந்து தொடரலாம்.

ஒரு video-வை search செய்து, அதை select செய்து, “பின் செல்” click செய்து பாருங்கள்:

import { Activity, ViewTransition } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router";

export default function App() {
  const { url } = useRouter();

  return (
    // View Transitions know about Activity
    <ViewTransition>
      {/* Render Home in Activity so we don't lose state */}
      <Activity mode={url === '/' ? 'visible' : 'hidden'}>
        <Home />
      </Activity>
      {url !== '/' && <Details />}
    </ViewTransition>
  );
}

Activity மூலம் pre-render செய்தல்

சில நேரங்களில், user அடுத்ததாக பயன்படுத்த வாய்ப்புள்ள UI பகுதியை முன்கூட்டியே prepare செய்ய விரும்பலாம்; அவர்கள் அதை பயன்படுத்தத் தயாராகும் நேரத்தில் அது தயாராக இருக்கும். அடுத்த route render செய்ய தேவையான data-வால் suspend ஆக வேண்டியிருந்தால் இது குறிப்பாக பயனுள்ளது, ஏனெனில் user navigate செய்வதற்கு முன்பே data fetch செய்யப்பட்டிருப்பதை உறுதி செய்ய உதவலாம்.

உதாரணமாக, எங்கள் app-இல் நீங்கள் ஒரு video-வை select செய்யும் போது ஒவ்வொரு video-விற்கான data-வை load செய்ய suspend ஆக வேண்டும். User navigate செய்யும் வரை எல்லா pages-ஐயும் hidden <Activity>-இல் render செய்வதன் மூலம் இதை மேம்படுத்தலாம்:

<ViewTransition>
  <Activity mode={url === '/' ? 'visible' : 'hidden'}>
    <Home />
  </Activity>
  <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
    <Details id={id} />
  </Activity>
  <Activity mode={url === '/details/1' ? 'visible' : 'hidden'}>
    <Details id={id} />
  </Activity>
<ViewTransition>

இந்த update மூலம், அடுத்த page-இல் உள்ள content pre-render ஆக நேரம் கிடைத்தால், அது Suspense fallback இல்லாமல் animate ஆகி வரும். ஒரு video-வை click செய்து, Details page-இல் video title மற்றும் description fallback இல்லாமல் உடனே render ஆகும் என்பதை கவனியுங்கள்:

import { Activity, ViewTransition, use } from "react"; import Details from "./Details"; import Home from "./Home"; import { useRouter } from "./router"; import {fetchVideos} from './data';

export default function App() {
  const { url } = useRouter();
  const videoId = url.split("/").pop();
  const videos = use(fetchVideos());

  return (
    <ViewTransition>
      {/* Render videos in Activity to pre-render them */}
      {videos.map(({id}) => (
        <Activity key={id} mode={videoId === id ? 'visible' : 'hidden'}>
          <Details id={id}/>
        </Activity>
      ))}
      <Activity mode={url === '/' ? 'visible' : 'hidden'}>
        <Home />
      </Activity>
    </ViewTransition>
  );
}

Activity உடன் Server-Side Rendering செய்தல்

Server-side rendering (SSR) பயன்படுத்தும் page-இல் Activity பயன்படுத்தும் போது, கூடுதல் optimizations உள்ளன.

Page-ன் ஒரு பகுதி mode="hidden" உடன் render செய்யப்பட்டால், அது SSR response-இல் சேர்க்கப்படாது. அதற்கு பதிலாக, page-ன் மீதமுள்ள பகுதி hydrate ஆகும் போது, screen-இல் visible content-க்கு priority கொடுத்து, Activity உள்ள content-க்கான client render-ஐ React schedule செய்யும்.

mode="visible" உடன் render செய்யப்பட்ட UI பகுதிகளுக்கு, Suspense content குறைந்த priority-யில் hydrate செய்யப்படுவது போலவே, Activity-க்குள் உள்ள content hydration-ஐ React de-prioritize செய்யும். User page-உடன் interact செய்தால், தேவைப்பட்டால் boundary-க்குள் hydration-க்கு priority கொடுப்போம்.

இவை advanced use cases; ஆனால் Activity-க்காக கருதப்பட்ட கூடுதல் நன்மைகளை அவை காட்டுகின்றன.

Activity-க்கான எதிர்கால modes

எதிர்காலத்தில் Activity-க்கு மேலும் modes சேர்க்கலாம்.

உதாரணமாக, modal render செய்வது ஒரு பொதுவான use case; அதில் முந்தைய “inactive” page, “active” modal view-க்கு பின்னால் visible ஆக இருக்கும். “hidden” mode இந்த use case-க்கு வேலை செய்யாது, ஏனெனில் அது visible அல்ல, SSR-இலும் சேர்க்கப்படாது.

அதற்கு பதிலாக, content-ஐ visible ஆகவும் SSR-இல் சேர்க்கப்பட்டதாகவும் வைத்துக்கொண்டு, அதை unmounted ஆக வைத்து updates-ஐ de-prioritize செய்யும் புதிய mode பற்றி பரிசீலிக்கிறோம். Modal open ஆக இருக்கும் போது backgrounded content update ஆகுவது கவனம் சிதறச் செய்யக்கூடும் என்பதால், இந்த mode DOM updates-ஐ “pause” செய்யவும் வேண்டியிருக்கலாம்.

Activity-க்காக பரிசீலிக்கும் மற்றொரு mode, அதிக memory பயன்படுத்தப்பட்டால் hidden Activities-ன் state-ஐ தானாக destroy செய்யும் திறன். Component ஏற்கனவே unmounted ஆக இருப்பதால், மிக அதிக resources consume செய்வதை விட, app-இன் சமீபத்தில் குறைவாக பயன்படுத்தப்பட்ட hidden பகுதிகளின் state-ஐ destroy செய்வது சிறந்ததாக இருக்கலாம்.

இவை இன்னும் நாங்கள் explore செய்து கொண்டிருக்கும் பகுதிகள்; முன்னேற்றம் அடையும்போது மேலும் பகிர்வோம். இன்று Activity என்ன கொண்டுள்ளது என்பதைப் பற்றி மேலும் அறிய docs-ஐ பார்க்கவும்.

Development-இல் உள்ள features

கீழே உள்ள பொதுவான problems-ஐ தீர்க்க உதவும் features-ஐயும் நாங்கள் develop செய்து வருகிறோம்.

சாத்தியமான solutions மீது iterate செய்யும் போது, நாங்கள் land செய்யும் PRs அடிப்படையில் test செய்து கொண்டிருக்கும் சில potential APIs பகிரப்படுவதைக் காணலாம். வெவ்வேறு ideas-ஐ முயற்சிக்கும் போது, அவற்றைச் சோதித்த பிறகு வேறு solutions-ஐ அடிக்கடி மாற்றவோ அகற்றவோ செய்வோம் என்பதை நினைவில் கொள்ளுங்கள்.

நாங்கள் வேலை செய்து கொண்டிருக்கும் solutions மிகவும் முன்கூட்டியே பகிரப்பட்டால், community-இல் churn மற்றும் confusion உருவாகலாம். Transparent ஆக இருப்பதையும் confusion-ஐ குறைப்பதையும் சமநிலைப்படுத்த, மனதில் வைத்திருக்கும் குறிப்பிட்ட solution-ஐ பகிராமல், தற்போது solutions develop செய்து கொண்டிருக்கும் problems-ஐ பகிர்கிறோம்.

இந்த features முன்னேறும்போது, நீங்கள் முயற்சிக்க docs உடன் blog-இல் அவற்றை announce செய்வோம்.

React Performance Tracks செயல்திறன் தடங்கள்

உங்கள் React app-ன் performance பற்றி கூடுதல் தகவல் வழங்க, custom tracks சேர்க்க அனுமதிக்கும் browser APIs பயன்படுத்தி performance profilers-க்கான புதிய custom tracks தொகுப்பில் வேலை செய்து வருகிறோம்.

இந்த feature இன்னும் progress-இல் உள்ளது; எனவே அதை experimental feature ஆக முழுமையாக release செய்ய docs publish செய்ய இன்னும் தயாராக இல்லை. React-ன் experimental version பயன்படுத்தும்போது sneak preview கிடைக்கும்; அது profiles-க்கு performance tracks-ஐ தானாக சேர்க்கும்:

Performance போன்ற சில known issues, மற்றும் Suspended trees-இல் scheduler track எப்போதும் work-ஐ “connecting” செய்யாதது போன்றவற்றை address செய்ய திட்டமிட்டுள்ளோம்; எனவே இது முயற்சிக்க இன்னும் முழுமையாக தயாராக இல்லை. Tracks-ன் design மற்றும் usability-ஐ மேம்படுத்த early adopters-இலிருந்து feedback-ஐயும் இன்னும் சேகரித்து வருகிறோம்.

அந்த issues-ஐ தீர்த்ததும், experimental docs publish செய்து, இது முயற்சிக்க தயாராக உள்ளது என்று பகிர்வோம்.

தானியங்கு Effect Dependencies

Hooks-ஐ release செய்தபோது, எங்களுக்கு மூன்று motivations இருந்தன:

  • Components இடையே code பகிர்தல்: உங்கள் component hierarchy-ஐ மாற்றாமல் stateful logic-ஐ reuse செய்ய hooks, render props மற்றும் higher-order components போன்ற patterns-ஐ மாற்றின.
  • Lifecycles அல்ல, function அடிப்படையில் சிந்தித்தல்: lifecycle methods அடிப்படையில் split செய்ய கட்டாயப்படுத்துவதற்கு பதிலாக, எந்த pieces தொடர்புடையவை (subscription அமைத்தல் அல்லது data fetch செய்தல் போன்றவை) என்பதன் அடிப்படையில் ஒரு component-ஐ சிறிய functions-ஆக split செய்ய hooks அனுமதித்தன.
  • Ahead-of-time compilation-ஐ support செய்தல்: lifecycle methods மற்றும் classes-ன் limitations காரணமாக வரும் unintentional de-optimizations-ஐ குறைத்து, ahead-of-time compilation support செய்ய hooks design செய்யப்பட்டன.

அவை release ஆனதிலிருந்து, hooks components இடையே code பகிர்வதில் வெற்றிகரமாக இருந்துள்ளன. Components இடையே logic பகிர hooks இப்போது விருப்பமான வழியாக உள்ளன; render props மற்றும் higher order components-க்கு use cases குறைந்துள்ளன. Class components மூலம் சாத்தியமில்லாத Fast Refresh போன்ற features-ஐ support செய்வதிலும் hooks வெற்றிகரமாக இருந்துள்ளன.

Effects கடினமாக இருக்கலாம்

துரதிருஷ்டவசமாக, சில hooks-ஐ lifecycles-க்கு பதிலாக function அடிப்படையில் சிந்திப்பது இன்னும் கடினமாக உள்ளது. குறிப்பாக Effects இன்னும் புரிந்துகொள்ள கடினமாக உள்ளன; developers-இடமிருந்து நாம் அடிக்கடி கேட்கும் மிக பொதுவான pain point அதுவே. கடந்த ஆண்டு, Effects எப்படி பயன்படுத்தப்பட்டன, அந்த use cases-ஐ எப்படி simplify செய்து நேரடியாகப் புரிந்துகொள்ளும் வகையில் மாற்றலாம் என்பதைக் குறித்து நாங்கள் குறிப்பிடத்தக்க நேரம் research செய்தோம்.

பல சமயங்களில், Effect தேவைப்படாத இடத்தில் Effect பயன்படுத்துவதுதான் confusion-க்கு காரணம் என்று கண்டோம். Effects சரியான solution அல்லாத பல cases-ஐ உங்களுக்கு Effect தேவைப்படாமல் இருக்கலாம் guide விவரிக்கிறது. ஆனால் ஒரு problem-க்கு Effect சரியானதாக இருந்தாலும், class component lifecycles-ஐ விட Effects புரிந்துகொள்ள இன்னும் கடினமாக இருக்கலாம்.

Confusion-க்கான காரணங்களில் ஒன்று, developers Effects-ஐ Effect பார்வையில் (Effect என்ன செய்கிறது) அல்லாமல், component பார்வையில் (lifecycle போல) சிந்திப்பதாக இருக்கலாம் என்று நாங்கள் நம்புகிறோம்.

Docs-இல் உள்ள ஒரு example-ஐப் பார்க்கலாம்:

useEffect(() => {
  // Your Effect connected to the room specified with roomId...
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
    // ...until it disconnected
    connection.disconnect();
  };
}, [roomId]);

பல users இந்த code-ஐ “mount ஆனபோது, roomId-க்கு connect செய்; roomId மாறும் ஒவ்வொரு முறையும், பழைய room-இலிருந்து disconnect செய்து connection-ஐ மீண்டும் உருவாக்கு” என்று படிப்பார்கள். ஆனால் இது component-ன் lifecycle perspective-இல் சிந்திப்பது; அதாவது Effect-ஐ சரியாக எழுத ஒவ்வொரு component lifecycle state பற்றியும் சிந்திக்க வேண்டும். இது கடினமாக இருக்கலாம்; எனவே component perspective பயன்படுத்தும்போது class lifecycles-ஐ விட Effects கடினமாகத் தோன்றுவது புரிந்துகொள்ளத்தக்கது.

Dependencies இல்லாத Effects

அதற்கு பதிலாக, Effect-ன் perspective-இல் சிந்திப்பது சிறந்தது. Component lifecycles பற்றி Effect-க்கு தெரியாது. Synchronization-ஐ எப்படி தொடங்குவது, அதை எப்படி நிறுத்துவது என்பதையே அது விவரிக்கிறது. Users Effects-ஐ இவ்வாறு சிந்திக்கும் போது, அவர்களின் Effects எழுத திறமையாகவும், தேவையான அளவு பலமுறை தொடங்கி நிறுத்தப்படுவதற்கு அதிக resilient ஆகவும் இருக்கும்.

Effects ஏன் component perspective-இல் சிந்திக்கப்படுகின்றன என்று research செய்ய சில நேரம் செலவிட்டோம்; அதற்கான காரணங்களில் ஒன்று dependency array என்று நினைக்கிறோம். அதை நீங்கள் எழுத வேண்டியிருப்பதால், அது நேராக முன்னிலையிலேயே இருந்து நீங்கள் எதற்கு “react” செய்கிறீர்கள் என்பதை நினைவூட்டுகிறது, மேலும் ‘இந்த values மாறும் போது இதை செய்’ என்ற mental model-க்குள் இழுக்கிறது.

Hooks-ஐ release செய்தபோது, ahead-of-time compilation மூலம் அவற்றை பயன்படுத்த மேம்படுத்த முடியும் என்று நாங்கள் அறிந்திருந்தோம். React Compiler மூலம், பெரும்பாலான cases-இல் useCallback மற்றும் useMemo-வை நீங்களே எழுதுவதை தவிர்க்க முடிகிறது. Effects-க்காக, compiler dependencies-ஐ உங்களுக்காக insert செய்ய முடியும்:

useEffect(() => {
  const connection = createConnection(serverUrl, roomId);
  connection.connect();
  return () => {
    connection.disconnect();
  };
}); // compiler dependencies-ஐ insert செய்தது.

இந்த code மூலம், React Compiler dependencies-ஐ infer செய்து தானாக insert செய்ய முடியும்; எனவே அவற்றை நீங்கள் பார்க்கவோ எழுதவோ தேவையில்லை. IDE extension மற்றும் useEffectEvent போன்ற features மூலம், debug செய்ய வேண்டிய நேரங்களில் அல்லது dependency ஒன்றை அகற்றி optimize செய்ய வேண்டிய நேரங்களில் Compiler என்ன insert செய்தது என்பதை காட்ட CodeLens வழங்கலாம். இது Effects எழுதுவதற்கான சரியான mental model-ஐ reinforce செய்ய உதவுகிறது: Effect எப்போது வேண்டுமானாலும் run ஆகி உங்கள் component அல்லது hook-ன் state-ஐ வேறு ஒன்றுடன் synchronize செய்யலாம்.

Dependencies-ஐ தானாக insert செய்வது எழுத மேம்படுத்துவது மட்டுமல்லாமல், component lifecycles அல்ல, Effect என்ன செய்கிறது என்ற அடிப்படையில் சிந்திக்க உங்களை வழிநடத்துவதால் அவற்றை புரிந்துகொள்ளவும் உதவும் என்பதே எங்கள் நம்பிக்கை.

Compiler IDE Extension

2025-இல் பின்னர் React Compiler-ன் முதல் stable release-ஐ பகிர்ந்தோம், மேலும் கூடுதல் improvements ship செய்வதில் தொடர்ந்து invest செய்து வருகிறோம்.

உங்கள் code-ஐ புரிந்துகொள்ளவும் debug செய்யவும் உதவும் தகவலை வழங்க React Compiler-ஐ பயன்படுத்தும் வழிகளையும் explore செய்யத் தொடங்கியுள்ளோம். Lauren Tan-ன் React Conf talk-இல் பயன்படுத்திய extension போல, React Compiler மூலம் இயங்கும் புதிய experimental LSP-based React IDE extension என்பது நாங்கள் explore செய்யத் தொடங்கிய ஒரு idea.

Compiler-ன் static analysis-ஐ பயன்படுத்தி உங்கள் IDE-க்குள் நேரடியாக கூடுதல் தகவல், suggestions, மற்றும் optimization வாய்ப்புகளை வழங்க முடியும் என்பதே எங்கள் idea. உதாரணமாக, Rules of React-ஐ மீறும் code-க்கு diagnostics, components மற்றும் hooks compiler மூலம் optimize செய்யப்பட்டனவா என்பதை காட்ட hovers, அல்லது தானாக insert செய்யப்பட்ட Effect dependencies-ஐ பார்க்க CodeLens வழங்கலாம்.

IDE extension இன்னும் ஆரம்பக்கட்ட exploration; ஆனால் எதிர்கால updates-இல் எங்கள் progress-ஐ பகிர்வோம்.

Fragment Refs

Event management, positioning, focus போன்ற பல DOM APIs-ஐ React உடன் எழுதும்போது compose செய்வது கடினம். இது developers-ஐ Effects-ஐ நாடவோ, multiple Refs manage செய்யவோ, அல்லது findDOMNode (React 19-இல் அகற்றப்பட்டது) போன்ற APIs பயன்படுத்தவோ வழிவகுக்கும்.

ஒரே element-ஐ மட்டும் அல்லாமல் DOM elements குழுவைக் காட்டும் refs-ஐ Fragments-க்கு சேர்ப்பதை explore செய்து வருகிறோம். இது multiple children-ஐ manage செய்வதை simplify செய்து, DOM APIs அழைக்கும் போது composable React code எழுத உதவும் என்பதே எங்கள் நம்பிக்கை.

Fragment refs இன்னும் research-இல் உள்ளன. Final API முடிவதற்கு நெருங்கும்போது மேலும் பகிர்வோம்.

Gesture Animations

Menu-வை open செய்ய swipe செய்வது, அல்லது photo carousel-இல் scroll செய்வது போன்ற gesture animations-ஐ support செய்ய View Transitions-ஐ மேம்படுத்தும் வழிகளையும் research செய்து வருகிறோம்.

சில காரணங்களால் gestures புதிய challenges-ஐ உருவாக்குகின்றன:

  • Gestures தொடர்ச்சியானவை: நீங்கள் swipe செய்யும் போது, animation trigger ஆகி completion வரை run ஆகுவதற்கு பதிலாக, உங்கள் விரல் இருக்கும் இடத்தோடு கட்டுப்படும்.
  • Gestures complete ஆகாமல் இருக்கலாம்: உங்கள் விரலை release செய்யும் போது, நீங்கள் எவ்வளவு தூரம் சென்றீர்கள் என்பதன் அடிப்படையில் gesture animations completion வரை run ஆகலாம், அல்லது அவற்றின் original state-க்கு திரும்பலாம் (menu-வை பகுதியளவு மட்டும் open செய்தால் போல).
  • Gestures old மற்றும் new-ஐ invert செய்கின்றன: animate செய்யும் போது, நீங்கள் animate செய்து வெளியேறும் page “alive” மற்றும் interactive ஆகத் தொடர வேண்டும். இது browser View Transition model-ஐ invert செய்கிறது; அந்த model-இல் “old” state snapshot ஆகவும் “new” state live DOM ஆகவும் இருக்கும்.

நன்றாக வேலை செய்யும் ஒரு approach-ஐ கண்டுபிடித்திருக்கிறோம் என்றும் gesture transitions trigger செய்ய புதிய API ஒன்றை அறிமுகப்படுத்தலாம் என்றும் நாங்கள் நம்புகிறோம். இப்போதைக்கு <ViewTransition> ship செய்வதில் கவனம் செலுத்துகிறோம்; அதன் பிறகு gestures-ஐ மீண்டும் பார்க்கலாம்.

Concurrent Stores

Concurrent rendering உடன் React 18-ஐ release செய்தபோது, React state அல்லது context பயன்படுத்தாத external store libraries, store update ஆகும் போது synchronous render-ஐ force செய்வதன் மூலம் concurrent rendering-ஐ support செய்ய useSyncExternalStore-ஐயும் release செய்தோம்.

ஆனால் useSyncExternalStore பயன்படுத்துவதற்கு ஒரு cost உள்ளது; அது transitions போன்ற concurrent features-இலிருந்து bail out செய்ய force செய்கிறது, மேலும் இருக்கும் content Suspense fallbacks-ஐ show செய்ய force செய்கிறது.

React 19 ship ஆனதால், use API உடன் concurrent external stores-ஐ முழுமையாக support செய்யும் primitive உருவாக்க இந்த problem space-ஐ மீண்டும் பார்க்கிறோம்:

const value = use(store);

Render நேரத்தில் tearing இல்லாமல் external state படிக்க அனுமதிப்பதும், React வழங்கும் எல்லா concurrent features உடனும் seamless ஆக வேலை செய்யச் செய்வதும் எங்கள் goal.

இந்த research இன்னும் ஆரம்ப நிலையில் உள்ளது. மேலும் முன்னேறியதும், மேலும் தகவல்களையும் புதிய APIs எப்படி இருக்கும் என்பதையும் பகிர்வோம்.

இந்த post-ஐ review செய்த Aurora Scharff, Dan Abramov, Eli White, Lauren Tan, Luna Wei, Matt Carroll, Jack Pope, Jason Bonta, Jordan Brown, Jordan Eldredge, Mofei Zhang, Sebastien Lorber, Sebastian Markbåge, மற்றும் Tim Yung-க்கு நன்றி.

PreviousReact 19.2
NextSunsetting Create React App