ரியாக்ட் சஸ்பென்ஸ் பவுண்டரிகள்: அறிவிப்புமுறை லோடிங் நிலை நிர்வாகத்தில் ஒரு ஆழமான பார்வை

நவீன வலை உருவாக்க உலகில், ஒரு தடையற்ற மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உருவாக்குவது மிக முக்கியமானது. டெவலப்பர்கள் சந்திக்கும் மிகவும் தொடர்ச்சியான சவால்களில் ஒன்று லோடிங் நிலைகளை நிர்வகிப்பதாகும். ஒரு பயனர் சுயவிவரத்திற்கான தரவைப் பெறுவது முதல் ஒரு பயன்பாட்டின் புதிய பகுதியைப் ஏற்றுவது வரை, காத்திருக்கும் தருணங்கள் முக்கியமானவை. வரலாற்று ரீதியாக, இது isLoading, isFetching, மற்றும் hasError போன்ற பூலியன் கொடிகளின் சிக்கலான வலையை உள்ளடக்கியது, இது நமது கூறுகளில் சிதறிக் கிடந்தது. இந்த கட்டாய அணுகுமுறை நமது குறியீட்டை குழப்புகிறது, தர்க்கத்தை சிக்கலாக்குகிறது, மற்றும் ரேஸ் கண்டிஷன்கள் போன்ற பிழைகளுக்கு அடிக்கடி காரணமாகிறது.

ரியாக்ட் சஸ்பென்ஸ் இங்கே வருகிறது. ஆரம்பத்தில் React.lazy() உடன் கோட்-ஸ்பிளிட்டிங்கிற்காக அறிமுகப்படுத்தப்பட்டாலும், அதன் திறன்கள் ரியாக்ட் 18 உடன் வியத்தகு रूपத்தில் விரிவடைந்து, ஒத்திசைவற்ற செயல்பாடுகளை, குறிப்பாக தரவுப் பெறுதலைக் கையாள ஒரு சக்திவாய்ந்த, முதல்-நிலை பொறிமுறையாக மாறியுள்ளது. சஸ்பென்ஸ் லோடிங் நிலைகளை ஒரு அறிவிப்புமுறையில் நிர்வகிக்க அனுமதிக்கிறது, இது நமது கூறுகளைப் பற்றி நாம் எழுதும் மற்றும் பகுத்தறியும் முறையை அடிப்படையில் மாற்றுகிறது. "நான் லோடிங் ஆகிக்கொண்டிருக்கிறேனா?" என்று கேட்பதற்குப் பதிலாக, நமது கூறுகள் வெறுமனே, "ரெண்டர் செய்ய எனக்கு இந்தத் தரவு தேவை. நான் காத்திருக்கும்போது, தயவுசெய்து இந்த ஃபால்பேக் UI-ஐக் காட்டுங்கள்" என்று கூறலாம்.

இந்த விரிவான வழிகாட்டி உங்களை நிலை நிர்வாகத்தின் பாரம்பரிய முறைகளிலிருந்து ரியாக்ட் சஸ்பென்ஸின் அறிவிப்புமுறை முன்னுதாரணத்திற்கு ஒரு பயணத்திற்கு அழைத்துச் செல்லும். சஸ்பென்ஸ் பவுண்டரிகள் என்றால் என்ன, அவை கோட்-ஸ்பிளிட்டிங் மற்றும் தரவுப் பெறுதல் ஆகிய இரண்டிற்கும் எவ்வாறு செயல்படுகின்றன, மற்றும் உங்கள் பயனர்களை எரிச்சலூட்டுவதற்குப் பதிலாக அவர்களை மகிழ்விக்கும் சிக்கலான லோடிங் UI-களை எவ்வாறு ஒழுங்கமைப்பது என்பதை நாம் ஆராய்வோம்.

பழைய வழி: கைமுறை லோடிங் நிலைகளின் கடினமான வேலை

சஸ்பென்ஸின் நேர்த்தியை நாம் முழுமையாகப் பாராட்டுவதற்கு முன்பு, அது தீர்க்கும் சிக்கலைப் புரிந்துகொள்வது அவசியம். useEffect மற்றும் useState ஹூக்குகளைப் பயன்படுத்தி தரவைப் பெறும் ஒரு பொதுவான கூறுகளைப் பார்ப்போம்.

பயனர் தரவைப் பெற்று காண்பிக்க வேண்டிய ஒரு கூறைக் கற்பனை செய்து பாருங்கள்:

import React, { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Reset state for new userId
    setIsLoading(true);
    setUser(null);
    setError(null);

    const fetchUser = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    };

    fetchUser();
  }, [userId]); // Re-fetch when userId changes

  if (isLoading) {
    return <p>சுயவிவரம் ஏற்றப்படுகிறது...</p>;
  }

  if (error) {
    return <p>பிழை: {error.message}</p>;
  }

  return (
    <div>
      <h1>{user.name}</h1>
      <p>மின்னஞ்சல்: {user.email}</p>
    </div>
  );
}

இந்த முறை செயல்படக்கூடியது, ஆனால் இதில் பல குறைபாடுகள் உள்ளன:

• பாய்லர்பிளேட்: ஒவ்வொரு ஒத்திசைவற்ற செயல்பாட்டிற்கும் நமக்கு குறைந்தது மூன்று நிலை மாறிகள் (data, isLoading, error) தேவை. இது ஒரு சிக்கலான பயன்பாட்டில் மோசமாக அளவிடப்படுகிறது.
• சிதறிய தர்க்கம்: ரெண்டரிங் தர்க்கம் நிபந்தனை சோதனைகளுடன் (if (isLoading), if (error)) துண்டிக்கப்பட்டுள்ளது. முதன்மை "சந்தோஷமான பாதை" ரெண்டர் தர்க்கம் একেবারে கீழே தள்ளப்படுகிறது, இது கூறுகளைப் படிப்பதை கடினமாக்குகிறது.
• ரேஸ் கண்டிஷன்கள்: useEffect ஹூக்கிற்கு கவனமான சார்பு மேலாண்மை தேவை. சரியான கிளீனப் இல்லாமல், userId ப்ராப் விரைவாக மாறினால், ஒரு மெதுவான பதிலால் ஒரு வேகமான பதில் மேலெழுதப்படலாம். நமது உதாரணம் எளிமையானது என்றாலும், சிக்கலான காட்சிகள் எளிதில் நுட்பமான பிழைகளை அறிமுகப்படுத்தலாம்.
• நீர்வீழ்ச்சி பெறுதல்கள்: ஒரு சைல்ட் கூறுக்கும் தரவைப் பெற வேண்டியிருந்தால், பேரண்ட் லோடிங் முடிக்கும் வரை அது ரெண்டர் செய்ய (அதனால் பெற) கூட தொடங்க முடியாது. இது திறமையற்ற தரவு-ஏற்றும் நீர்வீழ்ச்சிகளுக்கு வழிவகுக்கிறது.

ரியாக்ட் சஸ்பென்ஸ் அறிமுகம்: ஒரு முன்னுதாரண மாற்றம்

சஸ்பென்ஸ் இந்த மாதிரியை தலைகீழாக மாற்றுகிறது. கூறு லோடிங் நிலையை உள்நாட்டில் நிர்வகிப்பதற்குப் பதிலாக, அது ஒரு ஒத்திசைவற்ற செயல்பாட்டின் மீதான அதன் சார்பை நேரடியாக ரியாக்டிடம் தெரிவிக்கிறது. அதற்குத் தேவையான தரவு இன்னும் கிடைக்கவில்லை என்றால், கூறு ரெண்டரிங்கை "சஸ்பெண்ட்" செய்கிறது.

ஒரு கூறு சஸ்பெண்ட் ஆகும்போது, ரியாக்ட் கூறு மரத்தில் மேலே சென்று மிக நெருக்கமான சஸ்பென்ஸ் பவுண்டரியைக் கண்டறிகிறது. ஒரு சஸ்பென்ஸ் பவுண்டரி என்பது நீங்கள் உங்கள் மரத்தில் <Suspense> ஐப் பயன்படுத்தி வரையறுக்கும் ஒரு கூறு ஆகும். இந்த பவுண்டரி, அதற்குள் உள்ள அனைத்து கூறுகளும் அவற்றின் தரவு சார்புகளைத் தீர்க்கும் வரை ஒரு ஃபால்பேக் UI-ஐ (ஒரு ஸ்பின்னர் அல்லது ஒரு ஸ்கெலிட்டன் லோடர் போன்றவை) ரெண்டர் செய்யும்.

மைய யோசனை என்னவென்றால், தரவு சார்பை அது தேவைப்படும் கூறுடன் இணைத்து, லோடிங் UI-ஐ கூறு மரத்தில் ஒரு உயர் மட்டத்தில் மையப்படுத்துவதாகும். இது கூறு தர்க்கத்தை சுத்தம் செய்கிறது மற்றும் பயனரின் லோடிங் அனுபவத்தின் மீது சக்திவாய்ந்த கட்டுப்பாட்டை உங்களுக்கு வழங்குகிறது.

ஒரு கூறு எவ்வாறு "சஸ்பெண்ட்" ஆகிறது?

சஸ்பென்ஸின் பின்னணியில் உள்ள மாயாஜாலம் முதலில் அசாதாரணமாகத் தோன்றும் ஒரு வடிவத்தில் உள்ளது: ஒரு Promise-ஐ த்ரோ செய்தல். சஸ்பென்ஸ்-இயக்கப்பட்ட தரவு மூலம் இதுபோன்று செயல்படுகிறது:

1. ஒரு கூறு தரவைக் கேட்கும்போது, தரவு மூலம் அது தரவை கேச் செய்துள்ளதா என்று சரிபார்க்கிறது.
2. தரவு கிடைத்தால், அது ஒத்திசைவாக அதைத் திருப்பித் தருகிறது.
3. தரவு கிடைக்கவில்லை என்றால் (அதாவது, அது தற்போது பெறப்படுகிறது), தரவு மூலம் நடந்துகொண்டிருக்கும் பெறுதல் கோரிக்கையைக் குறிக்கும் Promise-ஐ த்ரோ செய்கிறது.

ரியாக்ட் இந்த த்ரோ செய்யப்பட்ட Promise-ஐப் பிடிக்கிறது. இது உங்கள் பயன்பாட்டை செயலிழக்கச் செய்யாது. அதற்கு பதிலாக, அது அதை ஒரு சமிக்ஞையாக விளக்குகிறது: "இந்த கூறு இன்னும் ரெண்டர் செய்யத் தயாராக இல்லை. அதை இடைநிறுத்தி, ஒரு ஃபால்பேக்கைக் காட்ட மேலே ஒரு சஸ்பென்ஸ் பவுண்டரியைத் தேடுங்கள்." Promise தீர்க்கப்பட்டவுடன், ரியாக்ட் கூறுகளை மீண்டும் ரெண்டர் செய்ய முயற்சிக்கும், அது இப்போது அதன் தரவைப் பெற்று வெற்றிகரமாக ரெண்டர் செய்யும்.

<Suspense> பவுண்டரி: உங்கள் லோடிங் UI அறிவிப்பாளர்

<Suspense> கூறு இந்த வடிவத்தின் இதயமாகும். இது பயன்படுத்த மிகவும் எளிமையானது, இது ஒரு ஒற்றை, தேவையான ப்ராப்: fallback ஐ எடுக்கிறது.

import { Suspense } from 'react';

function App() {
  return (
    <div>
      <h1>எனது பயன்பாடு</h1>
      <Suspense fallback={<p>உள்ளடக்கம் ஏற்றப்படுகிறது...</p>}>
        <SomeComponentThatFetchesData />
      </Suspense>
    </div>
  );
}

இந்த எடுத்துக்காட்டில், SomeComponentThatFetchesData சஸ்பெண்ட் ஆனால், தரவு தயாராகும் வரை பயனர் "உள்ளடக்கம் ஏற்றப்படுகிறது..." என்ற செய்தியைக் காண்பார். ஃபால்பேக் ஒரு எளிய சரம் முதல் ஒரு சிக்கலான ஸ்கெலிட்டன் கூறு வரை எந்தவொரு செல்லுபடியாகும் ரியாக்ட் நோடாகவும் இருக்கலாம்.

பாரம்பரிய பயன்பாட்டு வழக்கு: React.lazy() உடன் கோட் ஸ்பிளிட்டிங்

சஸ்பென்ஸின் மிகவும் நிறுவப்பட்ட பயன்பாடு கோட் ஸ்பிளிட்டிங் ஆகும். இது ஒரு கூறுக்கான ஜாவாஸ்கிரிப்டை அது உண்மையில் தேவைப்படும் வரை ஏற்றுவதை ஒத்திவைக்க உங்களை அனுமதிக்கிறது.

import React, { Suspense, lazy } from 'react';

// இந்த கூறின் குறியீடு ஆரம்ப கட்டில் இருக்காது.
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <div>
      <h2>உடனடியாக ஏற்றப்படும் சில உள்ளடக்கம்</h2>
      <Suspense fallback={<div>கூறு ஏற்றப்படுகிறது...</div>}>
        <HeavyComponent />
      </Suspense>
    </div>
  );
}

இங்கே, ரியாக்ட் HeavyComponent-ஐ முதலில் ரெண்டர் செய்ய முயற்சிக்கும்போது மட்டுமே அதற்கான ஜாவாஸ்கிரிப்டைப் பெறும். அது பெறப்பட்டு பாகுபடுத்தப்படும்போது, சஸ்பென்ஸ் ஃபால்பேக் காட்டப்படும். இது ஆரம்ப பக்க ஏற்றுதல் நேரங்களை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த நுட்பமாகும்.

நவீன எல்லை: சஸ்பென்ஸுடன் தரவுப் பெறுதல்

ரியாக்ட் சஸ்பென்ஸ் பொறிமுறையை வழங்கும்போது, அது ஒரு குறிப்பிட்ட தரவுப்-பெறும் கிளையண்டை வழங்காது. சஸ்பென்ஸை தரவுப் பெறுதலுக்குப் பயன்படுத்த, அதனுடன் ஒருங்கிணைக்கும் ஒரு தரவு மூலம் உங்களுக்குத் தேவை (அதாவது, தரவு நிலுவையில் இருக்கும்போது ஒரு Promise-ஐ த்ரோ செய்யும் ஒன்று).

Relay மற்றும் Next.js போன்ற கட்டமைப்புகள் சஸ்பென்ஸிற்கான உள்ளமைக்கப்பட்ட, முதல்-வகுப்பு ஆதரவைக் கொண்டுள்ளன. TanStack Query (முன்பு ரியாக்ட் குவரி) மற்றும் SWR போன்ற பிரபலமான தரவுப்-பெறும் நூலகங்களும் சோதனை அல்லது முழு ஆதரவை வழங்குகின்றன.

கருத்தைப் புரிந்துகொள்ள, fetch API-ஐ சஸ்பென்ஸ்-இணக்கமானதாக மாற்ற அதைச் சுற்றி ஒரு மிக எளிமையான, கருத்தியல் ரேப்பரை உருவாக்குவோம். குறிப்பு: இது கல்வி நோக்கங்களுக்கான ஒரு எளிமைப்படுத்தப்பட்ட எடுத்துக்காட்டு மற்றும் உற்பத்திக்கு தயாராக இல்லை. இதில் முறையான கேச்சிங் மற்றும் பிழை கையாளுதல் நுணுக்கங்கள் இல்லை.

// data-fetcher.js
// முடிவுகளை சேமிக்க ஒரு எளிய கேச்
const cache = new Map();

export function fetchData(url) {
  if (!cache.has(url)) {
    cache.set(url, { status: 'pending', promise: fetchAndCache(url) });
  }

  const record = cache.get(url);

  if (record.status === 'pending') {
    throw record.promise; // இது தான் மாயாஜாலம்!
  }
  if (record.status === 'error') {
    throw record.error;
  }
  if (record.status === 'success') {
    return record.data;
  }
}

async function fetchAndCache(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Fetch failed with status ${response.status}`);
    }
    const data = await response.json();
    cache.set(url, { status: 'success', data });
  } catch (e) {
    cache.set(url, { status: 'error', error: e });
  }
}

இந்த ரேப்பர் ஒவ்வொரு URL-க்கும் ஒரு எளிய நிலையை பராமரிக்கிறது. fetchData அழைக்கப்படும்போது, அது நிலையை சரிபார்க்கிறது. அது நிலுவையில் இருந்தால், அது ப்ராமிஸை த்ரோ செய்கிறது. அது வெற்றிகரமாக இருந்தால், அது தரவைத் திருப்பித் தருகிறது. இப்போது, நமது UserProfile கூறுகளை இதைப் பயன்படுத்தி மீண்டும் எழுதுவோம்.

// UserProfile.js
import React, { Suspense } from 'react';
import { fetchData } from './data-fetcher';

// உண்மையில் தரவைப் பயன்படுத்தும் கூறு
function ProfileDetails({ userId }) {
  // தரவைப் படிக்க முயற்சிக்கவும். அது தயாராக இல்லை என்றால், இது சஸ்பெண்ட் ஆகும்.
  const user = fetchData(`https://api.example.com/users/${userId}`);

  return (
    <div>
      <h1>{user.name}</h1>
      <p>மின்னஞ்சல்: {user.email}</p>
    </div>
  );
}

// லோடிங் நிலை UI-ஐ வரையறுக்கும் பேரண்ட் கூறு
export function UserProfile({ userId }) {
  return (
    <Suspense fallback={<p>சுயவிவரம் ஏற்றப்படுகிறது...</p>}>
      <ProfileDetails userId={userId} />
    </Suspense>
  );
}

வித்தியாசத்தைப் பாருங்கள்! ProfileDetails கூறு சுத்தமாகவும், தரவை ரெண்டர் செய்வதில் மட்டுமே கவனம் செலுத்துகிறது. அதில் isLoading அல்லது error நிலைகள் இல்லை. அது தனக்குத் தேவையான தரவை வெறுமனே கோருகிறது. ஒரு லோடிங் இண்டிகேட்டரைக் காட்டும் பொறுப்பு பேரண்ட் கூறான UserProfile-க்கு மாற்றப்பட்டுள்ளது, இது காத்திருக்கும்போது என்ன காட்ட வேண்டும் என்பதை அறிவிப்புமுறையில் கூறுகிறது.

சிக்கலான லோடிங் நிலைகளை ஒழுங்கமைத்தல்

பல ஒத்திசைவற்ற சார்புகளுடன் சிக்கலான UI-களை நீங்கள் உருவாக்கும்போது சஸ்பென்ஸின் உண்மையான சக்தி வெளிப்படும்.

ஒரு அடுக்கடுக்கான UI-க்கு உள்ளமைக்கப்பட்ட சஸ்பென்ஸ் பவுண்டரிகள்

ஒரு மெருகூட்டப்பட்ட லோடிங் அனுபவத்தை உருவாக்க நீங்கள் சஸ்பென்ஸ் பவுண்டரிகளை உள்ளமைக்கலாம். ஒரு டாஷ்போர்டு பக்கத்தை ஒரு சைட் பார், ஒரு பிரதான உள்ளடக்கப் பகுதி, மற்றும் சமீபத்திய செயல்பாடுகளின் பட்டியலுடன் கற்பனை செய்து பாருங்கள். இவற்றில் ஒவ்வொன்றிற்கும் அதன் சொந்த தரவுப் பெறுதல் தேவைப்படலாம்.

function DashboardPage() {
  return (
    <div>
      <h1>டாஷ்போர்டு</h1>
      <div className="layout">
        <Suspense fallback={<p>வழிசெலுத்தல் ஏற்றப்படுகிறது...</p>}>
          <Sidebar />
        </Suspense>

        <main>
          <Suspense fallback={<ProfileSkeleton />}>
            <MainContent />
          </Suspense>

          <Suspense fallback={<ActivityFeedSkeleton />}>
            <ActivityFeed />
          </Suspense>
        </main>
      </div>
    </div>
  );
}

இந்த அமைப்புடன்:

• பிரதான உள்ளடக்கம் இன்னும் ஏற்றப்பட்டுக் கொண்டிருந்தாலும், Sidebar அதன் தரவு தயாரானவுடன் தோன்றலாம்.
• MainContent மற்றும் ActivityFeed சுயாதீனமாக ஏற்றப்படலாம். பயனர் ஒவ்வொரு பகுதிக்கும் ஒரு விரிவான ஸ்கெலிட்டன் லோடரைக் காண்கிறார், இது ஒரு ஒற்றை, பக்கம் முழுவதும் உள்ள ஸ்பின்னரை விட சிறந்த சூழலை வழங்குகிறது.

இது பயனுள்ள உள்ளடக்கத்தை பயனருக்கு விரைவில் காட்ட உங்களை அனுமதிக்கிறது, இது உணரப்பட்ட செயல்திறனை வியத்தகு रूपத்தில் மேம்படுத்துகிறது.

UI "பாப்கார்னிங்"-ஐத் தவிர்த்தல்

சில நேரங்களில், அடுக்கடுக்கான அணுகுமுறை பல ஸ்பின்னர்கள் தோன்றி விரைவாக மறைந்து ஒரு அதிர்ச்சியூட்டும் விளைவுக்கு வழிவகுக்கும், இந்த விளைவு பெரும்பாலும் "பாப்கார்னிங்" என்று அழைக்கப்படுகிறது. இதைத் தீர்க்க, நீங்கள் சஸ்பென்ஸ் பவுண்டரியை மரத்தில் மேலே நகர்த்தலாம்.

function DashboardPage() {
  return (
    <div>
      <h1>டாஷ்போர்டு</h1>
      <Suspense fallback={<DashboardSkeleton />}>
        <div className="layout">
          <Sidebar />
          <main>
            <MainContent />
            <ActivityFeed />
          </main>
        </div>
      </Suspense>
    </div>
  );
}

இந்த பதிப்பில், அனைத்து சைல்ட் கூறுகளும் (Sidebar, MainContent, ActivityFeed) தங்கள் தரவைத் தயாராக வைத்திருக்கும் வரை ஒரு ஒற்றை DashboardSkeleton காட்டப்படும். பின்னர் முழு டாஷ்போர்டும் ஒரே நேரத்தில் தோன்றும். உள்ளமைக்கப்பட்ட பவுண்டரிகளுக்கும் ஒரு ஒற்றை உயர்-நிலை பவுண்டரிக்கும் இடையிலான தேர்வு ஒரு UX வடிவமைப்பு முடிவாகும், இது சஸ்பென்ஸ் செயல்படுத்துவதை அற்பமாக்குகிறது.

எர்ரர் பவுண்டரிகளுடன் பிழை கையாளுதல்

சஸ்பென்ஸ் ஒரு ப்ராமிஸின் காத்திருப்பு நிலையைக் கையாளுகிறது, ஆனால் நிராகரிக்கப்பட்ட நிலை என்ன? ஒரு கூறு மூலம் த்ரோ செய்யப்பட்ட ப்ராமிஸ் நிராகரிக்கப்பட்டால் (எ.கா., ஒரு நெட்வொர்க் பிழை), அது ரியாக்டில் உள்ள மற்ற ரெண்டரிங் பிழைகளைப் போலவே கருதப்படும்.

தீர்வு எர்ரர் பவுண்டரிகளைப் பயன்படுத்துவதாகும். ஒரு எர்ரர் பவுண்டரி என்பது ஒரு சிறப்பு வாழ்க்கைச் சுழற்சி முறையான componentDidCatch() அல்லது ஒரு ஸ்டேடிக் முறையான getDerivedStateFromError()-ஐ வரையறுக்கும் ஒரு கிளாஸ் கூறு ஆகும். இது அதன் சைல்ட் கூறு மரத்தில் எங்கும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடிக்கிறது, அந்தப் பிழைகளைப் பதிவுசெய்கிறது, மற்றும் ஒரு ஃபால்பேக் UI-ஐக் காட்டுகிறது.

இதோ ஒரு எளிய எர்ரர் பவுண்டரி கூறு:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    // அடுத்த ரெண்டர் ஃபால்பேக் UI-ஐக் காட்டும் வகையில் நிலையை புதுப்பிக்கவும்.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // நீங்கள் ஒரு பிழை அறிக்கை சேவைக்கு பிழையைப் பதிவு செய்யலாம்
    console.error("ஒரு பிழை பிடிபட்டது:", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // நீங்கள் எந்தவொரு தனிப்பயன் ஃபால்பேக் UI-ஐயும் ரெண்டர் செய்யலாம்
      return <h1>ஏதோ தவறு நடந்துவிட்டது. மீண்டும் முயற்சிக்கவும்.</h1>;
    }

    return this.props.children; 
  }
}

காத்திருப்பு, வெற்றி, மற்றும் பிழை ஆகிய மூன்று நிலைகளையும் கையாளும் ஒரு வலுவான அமைப்பை உருவாக்க நீங்கள் எர்ரர் பவுண்டரிகளை சஸ்பென்ஸுடன் இணைக்கலாம்.

import { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';
import { UserProfile } from './UserProfile';

function App() {
  return (
    <div>
      <h2>பயனர் தகவல்</h2>
      <ErrorBoundary>
        <Suspense fallback={<p>ஏற்றப்படுகிறது...</p>}>
          <UserProfile userId={123} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

இந்த வடிவத்துடன், UserProfile-க்குள் தரவுப் பெறுதல் வெற்றியடைந்தால், சுயவிவரம் காட்டப்படும். அது நிலுவையில் இருந்தால், சஸ்பென்ஸ் ஃபால்பேக் காட்டப்படும். அது தோல்வியுற்றால், எர்ரர் பவுண்டரியின் ஃபால்பேக் காட்டப்படும். தர்க்கம் அறிவிப்புமுறையானது, தொகுக்கக்கூடியது, மற்றும் பகுத்தறிய எளிதானது.

ட்ரான்சிஷன்கள்: UI புதுப்பிப்புகளைத் தடுக்காத திறவுகோல்

புதிரின் இறுதிப் பகுதி ஒன்று உள்ளது. வேறு ஒரு பயனர் சுயவிவரத்தைப் பார்க்க "அடுத்து" பொத்தானைக் கிளிக் செய்வது போன்ற ஒரு புதிய தரவுப் பெறுதலைத் தூண்டும் ஒரு பயனர் தொடர்பைக் கவனியுங்கள். மேலே உள்ள அமைப்புடன், பொத்தானைக் கிளிக் செய்து userId ப்ராப் மாறும் தருணத்தில், UserProfile கூறு மீண்டும் சஸ்பெண்ட் ஆகும். இதன் பொருள் தற்போது தெரியும் சுயவிவரம் மறைந்து, லோடிங் ஃபால்பேக்கால் மாற்றப்படும். இது திடீரெனவும் இடையூறாகவும் உணரப்படலாம்.

இங்கேதான் ட்ரான்சிஷன்கள் வருகின்றன. ட்ரான்சிஷன்கள் ரியாக்ட் 18-ல் ஒரு புதிய அம்சமாகும், இது சில நிலை புதுப்பிப்புகளை அவசரமற்றவை எனக் குறிக்க உங்களை அனுமதிக்கிறது. ஒரு நிலை புதுப்பிப்பு ஒரு ட்ரான்சிஷனில் மூடப்பட்டிருக்கும்போது, ரியாக்ட் புதிய உள்ளடக்கத்தை பின்னணியில் தயாரிக்கும்போது பழைய UI-ஐ (பழைய உள்ளடக்கம்) தொடர்ந்து காண்பிக்கும். புதிய உள்ளடக்கம் காட்டத் தயாரானவுடன் மட்டுமே அது UI புதுப்பிப்பைச் செய்யும்.

இதற்கான முதன்மை API useTransition ஹூக் ஆகும்.

import React, { useState, useTransition, Suspense } from 'react';
import { UserProfile } from './UserProfile';

function ProfileSwitcher() {
  const [userId, setUserId] = useState(1);
  const [isPending, startTransition] = useTransition();

  const handleNextClick = () => {
    startTransition(() => {
      setUserId(id => id + 1);
    });
  };

  return (
    <div>
      <button onClick={handleNextClick} disabled={isPending}>
        அடுத்த பயனர்
      </button>

      {isPending && <span> புதிய சுயவிவரம் ஏற்றப்படுகிறது...</span>}

      <ErrorBoundary>
        <Suspense fallback={<p>ஆரம்ப சுயவிவரம் ஏற்றப்படுகிறது...</p>}>
          <UserProfile userId={userId} />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}

இப்போது என்ன நடக்கிறது என்பது இங்கே:

1. userId: 1-க்கான ஆரம்ப சுயவிவரம் ஏற்றப்படுகிறது, சஸ்பென்ஸ் ஃபால்பேக்கைக் காட்டுகிறது.
2. பயனர் "அடுத்த பயனர்" என்பதைக் கிளிக் செய்கிறார்.
3. setUserId அழைப்பு startTransition-ல் மூடப்பட்டுள்ளது.
4. ரியாக்ட் நினைவகத்தில் புதிய userId 2 உடன் UserProfile-ஐ ரெண்டர் செய்யத் தொடங்குகிறது. இது அதை சஸ்பெண்ட் செய்ய வைக்கிறது.
5. முக்கியமாக, சஸ்பென்ஸ் ஃபால்பேக்கைக் காட்டுவதற்குப் பதிலாக, ரியாக்ட் பழைய UI-ஐ (பயனர் 1-க்கான சுயவிவரம்) திரையில் வைத்திருக்கிறது.
6. useTransition மூலம் திருப்பியளிக்கப்பட்ட isPending பூலியன் true ஆகிறது, இது பழைய உள்ளடக்கத்தை நீக்காமல் ஒரு நுட்பமான, இன்லைன் லோடிங் இண்டிகேட்டரைக் காட்ட அனுமதிக்கிறது.
7. பயனர் 2-க்கான தரவு பெறப்பட்டு, UserProfile வெற்றிகரமாக ரெண்டர் செய்ய முடிந்தவுடன், ரியாக்ட் புதுப்பிப்பைச் செய்கிறது, மற்றும் புதிய சுயவிவரம் தடையின்றி தோன்றும்.

ட்ரான்சிஷன்கள் கட்டுப்பாட்டின் இறுதி அடுக்கை வழங்குகின்றன, இது உங்களுக்கு அதிநவீன மற்றும் பயனர்-நட்பு லோடிங் அனுபவங்களை உருவாக்க உதவுகிறது, அவை ஒருபோதும் அதிர்ச்சியூட்டுவதாக உணரப்படாது.

சிறந்த நடைமுறைகள் மற்றும் உலகளாவிய பரிசீலனைகள்

• பவுண்டரிகளை வியூகமாக வைக்கவும்: ஒவ்வொரு சிறிய கூறுகளையும் ஒரு சஸ்பென்ஸ் பவுண்டரியில் மூட வேண்டாம். அவற்றை உங்கள் பயன்பாட்டில் ஒரு பக்கம், ஒரு பெரிய பேனல், அல்லது ஒரு குறிப்பிடத்தக்க விட்ஜெட் போன்ற, பயனருக்கு ஒரு லோடிங் நிலை அர்த்தமுள்ளதாக இருக்கும் தர்க்கரீதியான புள்ளிகளில் வைக்கவும்.
• அர்த்தமுள்ள ஃபால்பேக்குகளை வடிவமைக்கவும்: பொதுவான ஸ்பின்னர்கள் எளிதானவை, ஆனால் ஏற்றப்படும் உள்ளடக்கத்தின் வடிவத்தைப் பிரதிபலிக்கும் ஸ்கெலிட்டன் லோடர்கள் ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகின்றன. அவை லேஅவுட் மாற்றத்தைக் குறைக்கின்றன மற்றும் என்ன உள்ளடக்கம் தோன்றும் என்று பயனர் எதிர்பார்க்க உதவுகின்றன.
• அணுகல்தன்மையைக் கருத்தில் கொள்ளுங்கள்: லோடிங் நிலைகளைக் காட்டும்போது, அவை அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். உள்ளடக்க கொள்கலனில் aria-busy="true" போன்ற ARIA பண்புகளைப் பயன்படுத்தி, ஸ்கிரீன் ரீடர் பயனர்களுக்கு உள்ளடக்கம் புதுப்பிக்கப்படுவதைத் தெரிவிக்கவும்.
• சர்வர் கூறுகளைத் தழுவுங்கள்: சஸ்பென்ஸ் என்பது ரியாக்ட் சர்வர் கூறுகளுக்கு (RSC) ஒரு அடித்தள தொழில்நுட்பமாகும். Next.js போன்ற கட்டமைப்புகளைப் பயன்படுத்தும்போது, தரவு கிடைக்கும்போது சர்வரிலிருந்து HTML-ஐ ஸ்ட்ரீம் செய்ய சஸ்பென்ஸ் உங்களை அனுமதிக்கிறது, இது ஒரு உலகளாவிய பார்வையாளர்களுக்கு நம்பமுடியாத வேகமான ஆரம்ப பக்க ஏற்றங்களுக்கு வழிவகுக்கிறது.
• சுற்றுச்சூழலைப் பயன்படுத்துங்கள்: அடிப்படைக் கொள்கைகளைப் புரிந்துகொள்வது முக்கியம் என்றாலும், உற்பத்தி பயன்பாடுகளுக்கு, TanStack Query, SWR, அல்லது Relay போன்ற போரில் சோதிக்கப்பட்ட நூலகங்களை நம்புங்கள். அவை தடையற்ற சஸ்பென்ஸ் ஒருங்கிணைப்பை வழங்கும் போது கேச்சிங், நகல் நீக்கம், மற்றும் பிற சிக்கல்களைக் கையாளுகின்றன.

முடிவுரை

ரியாக்ட் சஸ்பென்ஸ் ஒரு புதிய அம்சத்தை விட மேலானதைக் குறிக்கிறது; இது ரியாக்ட் பயன்பாடுகளில் நாம் ஒத்திசைவின்மையை அணுகும் முறையில் ஒரு அடிப்படை பரிணாம வளர்ச்சியாகும். கைமுறை, கட்டாய லோடிங் கொடிகளிலிருந்து விலகி, ஒரு அறிவிப்புமுறை மாதிரியைத் தழுவுவதன் மூலம், நாம் சுத்தமான, மீள்திறன் கொண்ட, மற்றும் தொகுக்க எளிதான கூறுகளை எழுதலாம்.

காத்திருப்பு நிலைகளுக்கு <Suspense>, தோல்வி நிலைகளுக்கு எர்ரர் பவுண்டரிகள், மற்றும் தடையற்ற புதுப்பிப்புகளுக்கு useTransition ஆகியவற்றை இணைப்பதன் மூலம், உங்கள் வசம் ஒரு முழுமையான மற்றும் சக்திவாய்ந்த கருவித்தொகுப்பு உள்ளது. நீங்கள் எளிய லோடிங் ஸ்பின்னர்கள் முதல் சிக்கலான, அடுக்கடுக்கான டாஷ்போர்டு வெளிப்பாடுகள் வரை அனைத்தையும் குறைந்தபட்ச, கணிக்கக்கூடிய குறியீட்டைக் கொண்டு ஒழுங்கமைக்கலாம். நீங்கள் உங்கள் திட்டங்களில் சஸ்பென்ஸை ஒருங்கிணைக்கத் தொடங்கும்போது, அது உங்கள் பயன்பாட்டின் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்துவதோடு மட்டுமல்லாமல், உங்கள் நிலை மேலாண்மை தர்க்கத்தை வியத்தகு रूपத்தில் எளிதாக்குவதையும் காண்பீர்கள், இது உண்மையிலேயே முக்கியமானவற்றில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது: சிறந்த அம்சங்களை உருவாக்குவது.