React-இன் useDeferredValue ஹூக் பற்றிய ஆழமான பார்வை. UI தாமதத்தை சரிசெய்வது, concurrency-ஐ புரிந்துகொள்வது, useTransition உடன் ஒப்பிடுவது, மற்றும் உலகளாவிய பார்வையாளர்களுக்காக வேகமான செயலிகளை உருவாக்குவது எப்படி என்பதை அறியுங்கள்.
React-இன் useDeferredValue: தடையில்லா UI செயல்திறனுக்கான முழுமையான வழிகாட்டி
நவீன வலை உருவாக்க உலகில், பயனர் அனுபவம் மிக முக்கியமானது. ஒரு வேகமான, பதிலளிக்கக்கூடிய இடைமுகம் இனி ஒரு ஆடம்பரம் அல்ல - அது ஒரு எதிர்பார்ப்பு. உலகெங்கிலும் உள்ள பயனர்களுக்கு, பலவிதமான சாதனங்கள் மற்றும் நெட்வொர்க் நிலைமைகளில், ஒரு பின்தங்கிய, நடுக்கமான UI, மீண்டும் வரும் வாடிக்கையாளருக்கும் இழந்த வாடிக்கையாளருக்கும் இடையிலான வித்தியாசமாக இருக்கலாம். இங்குதான் React 18-இன் concurrent அம்சங்கள், குறிப்பாக useDeferredValue ஹூக், விளையாட்டை மாற்றுகிறது.
நீங்கள் எப்போதாவது ஒரு பெரிய பட்டியலை வடிகட்டும் தேடல் புலம், நிகழ்நேரத்தில் புதுப்பிக்கப்படும் தரவு கட்டம், அல்லது ஒரு சிக்கலான டாஷ்போர்டு கொண்ட ஒரு React செயலியை உருவாக்கியிருந்தால், நீங்கள் அஞ்சும் UI முடக்கத்தை சந்தித்திருப்பீர்கள். பயனர் தட்டச்சு செய்கிறார், மற்றும் ஒரு நொடியின் ஒரு பகுதிக்கு, முழு செயலியும் பதிலளிக்காமல் போகிறது. இது நடக்கிறது ஏனெனில் React-இல் பாரம்பரிய ரெண்டரிங் தடுக்கும் ஒன்றாகும். ஒரு state அப்டேட் ஒரு re-render-ஐத் தூண்டுகிறது, அது முடியும் வரை வேறு எதுவும் நடக்க முடியாது.
இந்த முழுமையான வழிகாட்டி உங்களை useDeferredValue ஹூக்கின் ஆழமான ஆய்வுக்கு அழைத்துச் செல்லும். இது தீர்க்கும் சிக்கல், React-இன் புதிய concurrent இயந்திரத்துடன் இது எப்படி செயல்படுகிறது, மற்றும் அதிக வேலை செய்யும்போதும் வேகமானதாக உணரக்கூடிய நம்பமுடியாத அளவிற்கு பதிலளிக்கக்கூடிய செயலிகளை உருவாக்க இதை நீங்கள் எவ்வாறு பயன்படுத்தலாம் என்பதை நாங்கள் ஆராய்வோம். உலகளாவிய பார்வையாளர்களுக்காக நடைமுறை எடுத்துக்காட்டுகள், மேம்பட்ட வடிவங்கள் மற்றும் முக்கியமான சிறந்த நடைமுறைகளை நாங்கள் உள்ளடக்குவோம்.
முக்கிய சிக்கலைப் புரிந்துகொள்ளுதல்: தடுக்கும் UI
தீர்வைப் பாராட்டுவதற்கு முன், நாம் சிக்கலை முழுமையாகப் புரிந்து கொள்ள வேண்டும். React பதிப்பு 18-க்கு முன்பு, ரெண்டரிங் என்பது ஒரு ஒத்திசைவான மற்றும் குறுக்கிட முடியாத செயல்முறையாக இருந்தது. ஒரு ஒற்றைப் பாதை சாலையை கற்பனை செய்து பாருங்கள்: ஒரு கார் (ஒரு ரெண்டர்) நுழைந்தவுடன், அது முடிவை அடையும் வரை வேறு எந்த காரும் கடந்து செல்ல முடியாது. இப்படித்தான் React வேலை செய்தது.
ஒரு உன்னதமான சூழ்நிலையை கருத்தில் கொள்வோம்: தேடக்கூடிய பொருட்களின் பட்டியல். ஒரு பயனர் தேடல் பெட்டியில் தட்டச்சு செய்கிறார், மற்றும் கீழே உள்ள ஆயிரக்கணக்கான பொருட்களின் பட்டியல் அவர்களின் உள்ளீட்டின் அடிப்படையில் வடிகட்டப்படுகிறது.
ஒரு பொதுவான (மற்றும் தாமதமான) செயல்படுத்தல்
React 18-க்கு முந்தைய உலகில், அல்லது concurrent அம்சங்களைப் பயன்படுத்தாமல், குறியீடு இப்படி இருக்கலாம்:
கூறின் அமைப்பு:
கோப்பு: SearchPage.js
import React, { useState } from 'react';
import ProductList from './ProductList';
import { generateProducts } from './data'; // ஒரு பெரிய வரிசையை உருவாக்கும் ஒரு செயல்பாடு
const allProducts = generateProducts(20000); // 20,000 தயாரிப்புகளை கற்பனை செய்வோம்
function SearchPage() {
const [query, setQuery] = useState('');
const filteredProducts = allProducts.filter(product => {
return product.name.toLowerCase().includes(query.toLowerCase());
});
function handleChange(e) {
setQuery(e.target.value);
}
return (
இது ஏன் மெதுவாக உள்ளது?
பயனரின் செயலை நாம் பின்பற்றுவோம்:
- பயனர் ஒரு எழுத்தை தட்டச்சு செய்கிறார், உதாரணமாக 'a'.
- onChange நிகழ்வு தூண்டப்பட்டு, handleChange-ஐ அழைக்கிறது.
- setQuery('a') அழைக்கப்படுகிறது. இது SearchPage கூறின் ஒரு re-render-ஐ திட்டமிடுகிறது.
- React re-render-ஐத் தொடங்குகிறது.
- ரெண்டரின் உள்ளே,
const filteredProducts = allProducts.filter(...)என்ற வரி செயல்படுத்தப்படுகிறது. இதுதான் செலவுமிக்க பகுதி. 20,000 உருப்படிகளைக் கொண்ட ஒரு வரிசையை வடிகட்டுவது, ஒரு எளிய 'includes' சோதனையுடன் கூட, நேரம் எடுக்கும். - இந்த வடிகட்டல் நடக்கும்போது, உலாவியின் பிரதான த்ரெட் முழுமையாக ஆக்கிரமிக்கப்பட்டுள்ளது. இது எந்த புதிய பயனர் உள்ளீட்டையும் செயலாக்க முடியாது, உள்ளீட்டு புலத்தை பார்வைக்கு புதுப்பிக்க முடியாது, மற்றும் வேறு எந்த ஜாவாஸ்கிரிப்டையும் இயக்க முடியாது. UI தடுக்கப்பட்டுள்ளது.
- வடிகட்டல் முடிந்தவுடன், React ProductList கூறை ரெண்டர் செய்ய தொடர்கிறது, அது ஆயிரக்கணக்கான DOM முனைகளை ரெண்டர் செய்தால் அதுவே ஒரு கனமான செயல்பாடாக இருக்கலாம்.
- இறுதியாக, இந்த எல்லா வேலைகளுக்கும் பிறகு, DOM புதுப்பிக்கப்படுகிறது. பயனர் உள்ளீட்டு பெட்டியில் 'a' என்ற எழுத்து தோன்றுவதையும், பட்டியல் புதுப்பிக்கப்படுவதையும் பார்க்கிறார்.
பயனர் வேகமாக தட்டச்சு செய்தால் - உதாரணமாக, "apple" - இந்த முழு தடுக்கும் செயல்முறையும் 'a', பின்னர் 'ap', பின்னர் 'app', 'appl', மற்றும் 'apple' ஆகியவற்றுக்கு நடக்கிறது. இதன் விளைவாக, உள்ளீட்டு புலம் தடுமாறி, பயனரின் தட்டச்சு வேகத்துடன் তাল মিলিয়েச் செல்ல போராடும் ஒரு குறிப்பிடத்தக்க தாமதம் ஏற்படுகிறது. இது ஒரு மோசமான பயனர் அனுபவம், குறிப்பாக உலகின் பல பகுதிகளில் பொதுவான குறைந்த சக்தி கொண்ட சாதனங்களில்.
React 18-இன் Concurrency-ஐ அறிமுகப்படுத்துதல்
React 18 இந்த மாதிரியை concurrency-ஐ அறிமுகப்படுத்துவதன் மூலம் அடிப்படையில் மாற்றுகிறது. Concurrency என்பது parallelism (ஒரே நேரத்தில் பல விஷயங்களைச் செய்வது) போன்றது அல்ல. மாறாக, இது React-ஆல் ஒரு ரெண்டரை இடைநிறுத்த, மீண்டும் தொடங்க, அல்லது கைவிட முடியும் திறனாகும். ஒற்றைப் பாதை சாலையில் இப்போது கடந்து செல்லும் பாதைகளும் ஒரு போக்குவரத்துக் கட்டுப்பாட்டாளரும் உள்ளனர்.
concurrency உடன், React புதுப்பிப்புகளை இரண்டு வகைகளாக வகைப்படுத்தலாம்:
- அவசரமான புதுப்பிப்புகள்: உள்ளீட்டில் தட்டச்சு செய்வது, ஒரு பொத்தானைக் கிளிக் செய்வது, அல்லது ஒரு ஸ்லைடரை இழுப்பது போன்ற உடனடியாக உணர வேண்டிய விஷயங்கள் இவை. பயனர் உடனடி பின்னூட்டத்தை எதிர்பார்க்கிறார்.
- நிலைமாற்றப் புதுப்பிப்புகள் (Transition Updates): இவை UI-ஐ ஒரு காட்சியிலிருந்து மற்றொரு காட்சிக்கு மாற்றக்கூடிய புதுப்பிப்புகள். இவை தோன்றுவதற்கு ஒரு கணம் எடுத்துக்கொண்டால் அது ஏற்றுக்கொள்ளத்தக்கது. ஒரு பட்டியலை வடிகட்டுவது அல்லது புதிய உள்ளடக்கத்தை ஏற்றுவது ஆகியவை உன்னதமான எடுத்துக்காட்டுகள்.
React இப்போது ஒரு அவசரமற்ற "transition" ரெண்டரைத் தொடங்கலாம், மேலும் ஒரு அவசரமான புதுப்பிப்பு (மற்றொரு விசை அழுத்தம் போன்றவை) வந்தால், அது நீண்ட நேரம் இயங்கும் ரெண்டரை இடைநிறுத்தி, முதலில் அவசரமானதைக் கையாண்டு, பின்னர் அதன் வேலையை மீண்டும் தொடங்கலாம். இது UI எல்லா நேரங்களிலும் ஊடாடும் தன்மையுடன் இருப்பதை உறுதி செய்கிறது. useDeferredValue ஹூக் இந்த புதிய சக்தியைப் பயன்படுத்துவதற்கான ஒரு முதன்மை கருவியாகும்.
`useDeferredValue` என்றால் என்ன? ஒரு விரிவான விளக்கம்
அதன் மையத்தில், useDeferredValue என்பது உங்கள் கூறில் ஒரு குறிப்பிட்ட மதிப்பு அவசரமானது அல்ல என்று React-க்கு சொல்ல அனுமதிக்கும் ஒரு ஹூக் ஆகும். இது ஒரு மதிப்பை ஏற்றுக்கொண்டு, அவசரமான புதுப்பிப்புகள் நடக்கும்போது "பின்தங்கும்" அந்த மதிப்பின் புதிய நகலைத் திருப்பித் தருகிறது.
தொடரியல் (Syntax)
இந்த ஹூக்கைப் பயன்படுத்துவது நம்பமுடியாத அளவிற்கு எளிது:
import { useDeferredValue } from 'react';
const deferredValue = useDeferredValue(value);
அவ்வளவுதான். நீங்கள் அதற்கு ஒரு மதிப்பைக் கொடுக்கிறீர்கள், அது உங்களுக்கு அந்த மதிப்பின் ஒரு தாமதமான பதிப்பைத் தருகிறது.
இது திரைக்குப் பின்னால் எப்படி வேலை செய்கிறது
அந்த மாயத்தை விளக்குவோம். நீங்கள் useDeferredValue(query)-ஐப் பயன்படுத்தும்போது, React என்ன செய்கிறது என்பது இங்கே:
- ஆரம்ப ரெண்டர்: முதல் ரெண்டரில், deferredQuery ஆரம்ப query-ஐப் போலவே இருக்கும்.
- ஒரு அவசரமான புதுப்பிப்பு நிகழ்கிறது: பயனர் ஒரு புதிய எழுத்தைத் தட்டச்சு செய்கிறார். query நிலை 'a'-இலிருந்து 'ap'-க்கு மாறுகிறது.
- உயர்-முன்னுரிமை ரெண்டர்: React உடனடியாக ஒரு re-render-ஐத் தூண்டுகிறது. இந்த முதல், அவசரமான re-render-இன் போது, useDeferredValue ஒரு அவசரமான புதுப்பிப்பு செயல்பாட்டில் இருப்பதை அறியும். எனவே, அது இன்னும் முந்தைய மதிப்பையே, அதாவது 'a'-ஐத் திருப்பித் தருகிறது. உங்கள் கூறு விரைவாக re-render ஆகிறது, ஏனெனில் உள்ளீட்டு புலத்தின் மதிப்பு 'ap' ஆகிறது (state-இலிருந்து), ஆனால் உங்கள் UI-இன் deferredQuery-ஐச் சார்ந்திருக்கும் பகுதி (மெதுவான பட்டியல்) இன்னும் பழைய மதிப்பைப் பயன்படுத்துகிறது மற்றும் மீண்டும் கணக்கிடப்பட வேண்டியதில்லை. UI பதிலளிக்கக்கூடியதாகவே உள்ளது.
- குறைந்த-முன்னுரிமை ரெண்டர்: அவசரமான ரெண்டர் முடிந்த உடனேயே, React பின்னணியில் இரண்டாவது, அவசரமற்ற re-render-ஐத் தொடங்குகிறது. *இந்த* ரெண்டரில், useDeferredValue புதிய மதிப்பான 'ap'-ஐத் திருப்பித் தருகிறது. இந்த பின்னணி ரெண்டர்தான் செலவுமிக்க வடிகட்டல் செயல்பாட்டைத் தூண்டுகிறது.
- குறுக்கீடுதன்மை (Interruptibility): இதுதான் முக்கிய பகுதி. 'ap'-க்கான குறைந்த-முன்னுரிமை ரெண்டர் இன்னும் செயல்பாட்டில் இருக்கும்போது பயனர் மற்றொரு எழுத்தைத் ('app') தட்டச்சு செய்தால், React அந்த பின்னணி ரெண்டரைத் தூக்கி எறிந்துவிட்டு மீண்டும் தொடங்கும். இது புதிய அவசரமான புதுப்பிப்புக்கு ('app') முன்னுரிமை அளிக்கிறது, பின்னர் சமீபத்திய தாமதமான மதிப்புடன் ஒரு புதிய பின்னணி ரெண்டரைத் திட்டமிடுகிறது.
இது செலவுமிக்க வேலை எப்போதும் மிகச் சமீபத்திய தரவுகளில் செய்யப்படுவதை உறுதிசெய்கிறது, மேலும் இது பயனரை புதிய உள்ளீட்டை வழங்குவதிலிருந்து ஒருபோதும் தடுக்காது. இது சிக்கலான கைமுறை debouncing அல்லது throttling தர்க்கம் இல்லாமல் கனமான கணக்கீடுகளுக்கு முன்னுரிமை அளிக்க ஒரு சக்திவாய்ந்த வழியாகும்.
நடைமுறைச் செயல்படுத்தல்: நமது தாமதமான தேடலைச் சரிசெய்தல்
useDeferredValue-ஐப் பயன்படுத்தி நமது முந்தைய உதாரணத்தை மீண்டும் மாற்றி அமைத்து, அது செயல்பாட்டில் எப்படி இருக்கிறது என்று பார்ப்போம்.
கோப்பு: SearchPage.js (மேம்படுத்தப்பட்டது)
import React, { useState, useDeferredValue, useMemo } from 'react';
import ProductList from './ProductList';
import { generateProducts } from './data';
const allProducts = generateProducts(20000);
// செயல்திறனுக்காக memoized செய்யப்பட்ட பட்டியலைக் காண்பிக்கும் ஒரு கூறு
const MemoizedProductList = React.memo(ProductList);
function SearchPage() {
const [query, setQuery] = useState('');
// 1. query மதிப்பைத் தாமதப்படுத்துங்கள். இந்த மதிப்பு 'query' நிலைக்குப் பின்தங்கும்.
const deferredQuery = useDeferredValue(query);
// 2. செலவுமிக்க வடிகட்டல் இப்போது deferredQuery-ஆல் இயக்கப்படுகிறது.
// மேலும் மேம்படுத்தலுக்கு இதை useMemo-வில் போர்த்துகிறோம்.
const filteredProducts = useMemo(() => {
console.log('Filtering for:', deferredQuery);
return allProducts.filter(product => {
return product.name.toLowerCase().includes(deferredQuery.toLowerCase());
});
}, [deferredQuery]); // deferredQuery மாறும்போது மட்டுமே மீண்டும் கணக்கிடப்படும்
function handleChange(e) {
// இந்த state புதுப்பிப்பு அவசரமானது மற்றும் உடனடியாக செயலாக்கப்படும்
setQuery(e.target.value);
}
return (
பயனர் அனுபவத்தில் மாற்றம்
இந்த எளிய மாற்றத்துடன், பயனர் அனுபவம் உருமாறுகிறது:
- பயனர் உள்ளீட்டு புலத்தில் தட்டச்சு செய்கிறார், மற்றும் உரை உடனடியாக, பூஜ்ஜிய தாமதத்துடன் தோன்றுகிறது. இது உள்ளீட்டின் value நேரடியாக query state உடன் இணைக்கப்பட்டுள்ளதால், இது ஒரு அவசரமான புதுப்பிப்பாகும்.
- கீழே உள்ள தயாரிப்புகளின் பட்டியல் ஒரு நொடியின் ஒரு பகுதி பிடிக்க தாமதமாகலாம், ஆனால் அதன் ரெண்டரிங் செயல்முறை உள்ளீட்டு புலத்தை ஒருபோதும் தடுக்காது.
- பயனர் வேகமாக தட்டச்சு செய்தால், பட்டியல் இறுதித் தேடல் சொல்லுடன் கடைசியில் ஒருமுறை மட்டுமே புதுப்பிக்கப்படலாம், ஏனெனில் React இடைப்பட்ட, காலாவதியான பின்னணி ரெண்டர்களை நிராகரிக்கிறது.
செயலி இப்போது கணிசமாக வேகமாகவும் மேலும் தொழில்முறையாகவும் உணரப்படுகிறது.
`useDeferredValue` மற்றும் `useTransition`: என்ன வித்தியாசம்?
concurrent React-ஐக் கற்கும் டெவலப்பர்களுக்கு இது மிகவும் பொதுவான குழப்பங்களில் ஒன்றாகும். useDeferredValue மற்றும் useTransition ஆகிய இரண்டும் புதுப்பிப்புகளை அவசரமற்றவை எனக் குறிக்கப் பயன்படுத்தப்படுகின்றன, ஆனால் அவை வெவ்வேறு சூழ்நிலைகளில் பயன்படுத்தப்படுகின்றன.
முக்கிய வேறுபாடு: உங்களுக்கு எங்கே கட்டுப்பாடு உள்ளது?
`useTransition`
state புதுப்பிப்பைத் தூண்டும் குறியீட்டின் மீது உங்களுக்கு கட்டுப்பாடு இருக்கும்போது நீங்கள் useTransition-ஐப் பயன்படுத்துகிறீர்கள். இது உங்கள் state புதுப்பிப்பைச் சுற்றி போர்த்துவதற்கு, பொதுவாக startTransition என்று அழைக்கப்படும் ஒரு செயல்பாட்டை உங்களுக்கு வழங்குகிறது.
const [isPending, startTransition] = useTransition();
function handleChange(e) {
const nextValue = e.target.value;
// அவசரமான பகுதியை உடனடியாகப் புதுப்பிக்கவும்
setInputValue(nextValue);
// மெதுவான புதுப்பிப்பை startTransition-இல் போர்த்தவும்
startTransition(() => {
setSearchQuery(nextValue);
});
}
- எப்போது பயன்படுத்துவது: நீங்களே state-ஐ அமைக்கும்போது மற்றும் setState அழைப்பைச் சுற்றி போர்த்த முடிந்தால்.
- முக்கிய அம்சம்: ஒரு boolean isPending கொடியை வழங்குகிறது. நிலைமாற்றம் செயலாக்கப்படும்போது ஏற்றுதல் சுழற்சிகள் அல்லது பிற பின்னூட்டங்களைக் காண்பிக்க இது மிகவும் பயனுள்ளதாக இருக்கும்.
`useDeferredValue`
மதிப்பைப் புதுப்பிக்கும் குறியீட்டை நீங்கள் கட்டுப்படுத்தாதபோது நீங்கள் useDeferredValue-ஐப் பயன்படுத்துகிறீர்கள். இது பெரும்பாலும் மதிப்பு props-இலிருந்து, ஒரு பெற்றோர் கூறிலிருந்து அல்லது ஒரு மூன்றாம் தரப்பு நூலகத்தால் வழங்கப்படும் மற்றொரு ஹூக்கிலிருந்து வரும்போது நிகழ்கிறது.
function SlowList({ valueFromParent }) {
// valueFromParent எப்படி அமைக்கப்படுகிறது என்பதை நாங்கள் கட்டுப்படுத்தவில்லை.
// நாங்கள் அதை பெற்று, அதன் அடிப்படையில் ரெண்டரிங்கை தாமதப்படுத்த விரும்புகிறோம்.
const deferredValue = useDeferredValue(valueFromParent);
// ... மெதுவான பகுதியை ரெண்டர் செய்ய deferredValue-ஐப் பயன்படுத்தவும்
}
- எப்போது பயன்படுத்துவது: உங்களிடம் இறுதி மதிப்பு மட்டுமே இருக்கும்போது மற்றும் அதை அமைத்த குறியீட்டைச் சுற்றி போர்த்த முடியாதபோது.
- முக்கிய அம்சம்: ஒரு "reactive" அணுகுமுறை. அது எங்கிருந்து வந்தாலும், ஒரு மதிப்பு மாறுவதற்கு இது வெறுமனே வினைபுரிகிறது. இது ஒரு உள்ளமைக்கப்பட்ட isPending கொடியை வழங்காது, ஆனால் நீங்களே எளிதாக ஒன்றை உருவாக்கலாம்.
ஒப்பீட்டுச் சுருக்கம்
| அம்சம் | `useTransition` | `useDeferredValue` |
|---|---|---|
| எதைச் சுற்றி போர்த்துகிறது | ஒரு state புதுப்பிப்புச் செயல்பாடு (எ.கா., startTransition(() => setState(...))) |
ஒரு மதிப்பு (எ.கா., useDeferredValue(myValue)) |
| கட்டுப்பாட்டுப் புள்ளி | புதுப்பிப்புக்கான நிகழ்வு கையாளுபவர் அல்லது தூண்டுதலை நீங்கள் கட்டுப்படுத்தும்போது. | நீங்கள் ஒரு மதிப்பைப் பெறும்போது (எ.கா., props-இலிருந்து) மற்றும் அதன் மூலத்தின் மீது கட்டுப்பாடு இல்லாதபோது. |
| ஏற்றுதல் நிலை (Loading State) | ஒரு உள்ளமைக்கப்பட்ட `isPending` boolean-ஐ வழங்குகிறது. | உள்ளமைக்கப்பட்ட கொடி இல்லை, ஆனால் `const isStale = originalValue !== deferredValue;` உடன் பெறலாம். |
| உவமை | நீங்கள் ஒரு அனுப்புநர், எந்த ரயில் (state புதுப்பிப்பு) மெதுவான பாதையில் புறப்பட வேண்டும் என்பதைத் தீர்மானிக்கிறீர்கள். | நீங்கள் ஒரு நிலைய மேலாளர், ரயிலில் ஒரு மதிப்பு வருவதைப் பார்த்து, அதை பிரதான பலகையில் காண்பிப்பதற்கு முன்பு ஒரு கணம் நிலையத்தில் வைத்திருக்க முடிவு செய்கிறீர்கள். |
மேம்பட்ட பயன்பாட்டு வழக்குகள் மற்றும் வடிவங்கள்
எளிய பட்டியல் வடிகட்டலுக்கு அப்பால், useDeferredValue அதிநவீன பயனர் இடைமுகங்களை உருவாக்குவதற்கான பல சக்திவாய்ந்த வடிவங்களைத் திறக்கிறது.
வடிவம் 1: பின்னூட்டமாக ஒரு "பழைய" UI-ஐக் காண்பித்தல்
எந்தவொரு காட்சிப் பின்னூட்டமும் இல்லாமல் ஒரு சிறிய தாமதத்துடன் புதுப்பிக்கப்படும் ஒரு UI பயனருக்குப் பிழையானதாக உணரப்படலாம். அவர்களின் உள்ளீடு பதிவு செய்யப்பட்டதா என்று அவர்கள் ஆச்சரியப்படலாம். தரவு புதுப்பிக்கப்படுகிறது என்பதற்கு ஒரு நுட்பமான அறிகுறியை வழங்குவது ஒரு சிறந்த வடிவமாகும்.
அசல் மதிப்பை தாமதமான மதிப்புடன் ஒப்பிடுவதன் மூலம் இதை நீங்கள் அடையலாம். அவை வேறுபட்டால், ஒரு பின்னணி ரெண்டர் நிலுவையில் உள்ளது என்று அர்த்தம்.
function SearchPage() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
// இந்த boolean பட்டியல் உள்ளீட்டிற்குப் பின்தங்கியுள்ளதா என்பதை நமக்குச் சொல்கிறது
const isStale = query !== deferredQuery;
const filteredProducts = useMemo(() => {
// ... deferredQuery-ஐப் பயன்படுத்தி செலவுமிக்க வடிகட்டல்
}, [deferredQuery]);
return (
இந்த எடுத்துக்காட்டில், பயனர் தட்டச்சு செய்தவுடன், isStale உண்மையாகிறது. பட்டியல் சற்று மங்கலாகிறது, இது புதுப்பிக்கப்பட உள்ளது என்பதைக் குறிக்கிறது. தாமதமான ரெண்டர் முடிந்தவுடன், query மற்றும் deferredQuery மீண்டும் சமமாகின்றன, isStale பொய்யாகிறது, மற்றும் பட்டியல் புதிய தரவுகளுடன் முழு ஒளிபுகாநிலைக்குத் திரும்புகிறது. இது useTransition-இலிருந்து வரும் isPending கொடிக்குச் சமமானது.
வடிவம் 2: வரைபடங்கள் மற்றும் காட்சிப்படுத்தல்களில் புதுப்பிப்புகளைத் தாமதப்படுத்துதல்
ஒரு புவியியல் வரைபடம் அல்லது ஒரு நிதி விளக்கப்படம் போன்ற ஒரு சிக்கலான தரவு காட்சிப்படுத்தலை கற்பனை செய்து பாருங்கள், அது ஒரு தேதி வரம்பிற்கான பயனர் கட்டுப்பாட்டில் உள்ள ஸ்லைடரின் அடிப்படையில் மீண்டும் ரெண்டர் செய்கிறது. விளக்கப்படம் ஒவ்வொரு பிக்சல் அசைவிலும் மீண்டும் ரெண்டர் செய்தால் ஸ்லைடரை இழுப்பது மிகவும் நடுக்கமாக இருக்கும்.
ஸ்லைடரின் மதிப்பைத் தாமதப்படுத்துவதன் மூலம், ஸ்லைடர் கைப்பிடி மென்மையாகவும் பதிலளிக்கக்கூடியதாகவும் இருப்பதை நீங்கள் உறுதிசெய்யலாம், அதே நேரத்தில் கனமான விளக்கப்படக் கூறு பின்னணியில் அழகாக மீண்டும் ரெண்டர் செய்கிறது.
function ChartDashboard() {
const [year, setYear] = useState(2023);
const deferredYear = useDeferredValue(year);
// HeavyChart என்பது செலவுமிக்க கணக்கீடுகளைச் செய்யும் ஒரு memoized கூறு
// இது deferredYear மதிப்பு நிலைபெற்றவுடன் மட்டுமே மீண்டும் ரெண்டர் செய்யும்.
const chartData = useMemo(() => computeChartData(deferredYear), [deferredYear]);
return (
சிறந்த நடைமுறைகள் மற்றும் பொதுவான தவறுகள்
சக்தி வாய்ந்ததாக இருந்தாலும், useDeferredValue விவேகத்துடன் பயன்படுத்தப்பட வேண்டும். பின்பற்ற வேண்டிய சில முக்கிய சிறந்த நடைமுறைகள் இங்கே:
- முதலில் சுயவிவரமிடுங்கள், பின்னர் மேம்படுத்துங்கள்: useDeferredValue-ஐ எல்லா இடங்களிலும் தூவ வேண்டாம். உண்மையான செயல்திறன் தடைகளைக் கண்டறிய React DevTools Profiler-ஐப் பயன்படுத்தவும். இந்த ஹூக் குறிப்பாக ஒரு re-render உண்மையிலேயே மெதுவாகவும் மோசமான பயனர் அனுபவத்தை ஏற்படுத்தும் சூழ்நிலைகளுக்காகவும் உள்ளது.
- தாமதமான கூறை எப்போதும் Memoize செய்யவும்: ஒரு மதிப்பைத் தாமதப்படுத்துவதன் முதன்மை நன்மை, ஒரு மெதுவான கூறைத் தேவையற்ற முறையில் மீண்டும் ரெண்டர் செய்வதைத் தவிர்ப்பது. இந்த நன்மை மெதுவான கூறு React.memo-வில் போர்த்தப்படும்போது முழுமையாக உணரப்படுகிறது. இது அதன் props (தாமதமான மதிப்பு உட்பட) உண்மையில் மாறும்போது மட்டுமே மீண்டும் ரெண்டர் செய்வதை உறுதிசெய்கிறது, தாமதமான மதிப்பு இன்னும் பழையதாக இருக்கும் ஆரம்ப உயர்-முன்னுரிமை ரெண்டரின் போது அல்ல.
- பயனர் பின்னூட்டம் வழங்கவும்: "பழைய UI" வடிவத்தில் விவாதிக்கப்பட்டபடி, சில வகையான காட்சி அறிகுறி இல்லாமல் UI-ஐ ஒருபோதும் தாமதத்துடன் புதுப்பிக்க விடாதீர்கள். பின்னூட்டம் இல்லாதது அசல் தாமதத்தை விட அதிக குழப்பத்தை ஏற்படுத்தும்.
- உள்ளீட்டின் மதிப்பையே தாமதப்படுத்த வேண்டாம்: ஒரு உள்ளீட்டைக் கட்டுப்படுத்தும் மதிப்பைத் தாமதப்படுத்த முயற்சிப்பது ஒரு பொதுவான தவறு. உள்ளீட்டின் value prop எப்போதும் உயர்-முன்னுரிமை state-உடன் இணைக்கப்பட வேண்டும், அது உடனடியாக உணரப்படுவதை உறுதிசெய்ய. மெதுவான கூறுக்கு அனுப்பப்படும் மதிப்பை நீங்கள் தாமதப்படுத்துகிறீர்கள்.
- `timeoutMs` விருப்பத்தைப் புரிந்து கொள்ளுங்கள் (கவனத்துடன் பயன்படுத்தவும்): useDeferredValue ஒரு காலக்கெடுவிற்கான விருப்பமான இரண்டாவது வாதத்தை ஏற்றுக்கொள்கிறது:
useDeferredValue(value, { timeoutMs: 500 }). இது React-க்கு மதிப்பை எவ்வளவு நேரம் தாமதப்படுத்த வேண்டும் என்பதைக் கூறுகிறது. இது சில சந்தர்ப்பங்களில் பயனுள்ளதாக இருக்கும் ஒரு மேம்பட்ட அம்சமாகும், ஆனால் பொதுவாக, React-ஐ நேரத்தை நிர்வகிக்க விடுவது நல்லது, ஏனெனில் அது சாதனத் திறன்களுக்காக உகந்ததாக உள்ளது.
உலகளாவிய பயனர் அனுபவத்தில் (UX) தாக்கம்
useDeferredValue போன்ற கருவிகளை ஏற்றுக்கொள்வது ஒரு தொழில்நுட்ப மேம்படுத்தல் மட்டுமல்ல; இது ஒரு உலகளாவிய பார்வையாளர்களுக்காக ஒரு சிறந்த, மேலும் உள்ளடக்கிய பயனர் அனுபவத்திற்கான ஒரு அர்ப்பணிப்பாகும்.
- சாதன சமத்துவம்: டெவலப்பர்கள் பெரும்பாலும் உயர்-நிலை இயந்திரங்களில் வேலை செய்கிறார்கள். ஒரு புதிய மடிக்கணினியில் வேகமாக உணரப்படும் ஒரு UI, உலகின் கணிசமான பகுதிக்கு முதன்மை இணைய சாதனமாக இருக்கும் ஒரு பழைய, குறைந்த-திறன் கொண்ட மொபைல் போனில் பயன்படுத்த முடியாததாக இருக்கலாம். தடையில்லா ரெண்டரிங் உங்கள் செயலியை ஒரு பரந்த அளவிலான வன்பொருளில் மேலும் நெகிழ்ச்சியுடனும் செயல்திறனுடனும் ஆக்குகிறது.
- மேம்படுத்தப்பட்ட அணுகல்தன்மை: முடங்கும் ஒரு UI, திரை வாசிப்பான்கள் மற்றும் பிற உதவி தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்கு குறிப்பாக சவாலாக இருக்கலாம். பிரதான த்ரெட்டை சுதந்திரமாக வைத்திருப்பது இந்த கருவிகள் தொடர்ந்து சீராக செயல்படுவதை உறுதிசெய்கிறது, அனைத்து பயனர்களுக்கும் ஒரு நம்பகமான மற்றும் குறைவான வெறுப்பூட்டும் அனுபவத்தை வழங்குகிறது.
- மேம்படுத்தப்பட்ட உணரப்பட்ட செயல்திறன்: உளவியல் பயனர் அனுபவத்தில் ஒரு பெரிய பங்கு வகிக்கிறது. உள்ளீட்டிற்கு உடனடியாக பதிலளிக்கும் ஒரு இடைமுகம், திரையின் சில பகுதிகள் புதுப்பிக்க ஒரு கணம் எடுத்துக்கொண்டாலும், நவீனமான, நம்பகமான மற்றும் நன்கு வடிவமைக்கப்பட்டதாக உணரப்படுகிறது. இந்த உணரப்பட்ட வேகம் பயனர் நம்பிக்கையையும் திருப்தியையும் உருவாக்குகிறது.
முடிவுரை
React-இன் useDeferredValue ஹூக், செயல்திறன் மேம்படுத்தலை நாம் அணுகும் விதத்தில் ஒரு முன்னுதாரண மாற்றமாகும். debouncing மற்றும் throttling போன்ற கைமுறை, மற்றும் பெரும்பாலும் சிக்கலான, நுட்பங்களை நம்புவதற்குப் பதிலாக, நமது UI-இன் எந்தப் பகுதிகள் குறைந்த முக்கியத்துவம் வாய்ந்தவை என்பதை நாம் இப்போது அறிவிக்கலாம், இது ரெண்டரிங் வேலையை மிகவும் புத்திசாலித்தனமான மற்றும் பயனர்-நட்பு முறையில் திட்டமிட அனுமதிக்கிறது.
concurrency-இன் முக்கிய கொள்கைகளைப் புரிந்துகொள்வதன் மூலமும், useDeferredValue மற்றும் useTransition-ஐ எப்போது பயன்படுத்த வேண்டும் என்பதை அறிவதன் மூலமும், மற்றும் memoization மற்றும் பயனர் பின்னூட்டம் போன்ற சிறந்த நடைமுறைகளைப் பயன்படுத்துவதன் மூலமும், நீங்கள் UI நடுக்கத்தை நீக்கி, செயல்பாட்டுக்கு மட்டுமல்ல, பயன்படுத்த மகிழ்ச்சியாக இருக்கும் செயலிகளை உருவாக்கலாம். ஒரு போட்டித்தன்மை வாய்ந்த உலகளாவிய சந்தையில், ஒரு வேகமான, பதிலளிக்கக்கூடிய மற்றும் அணுகக்கூடிய பயனர் அனுபவத்தை வழங்குவது இறுதி அம்சமாகும், மேலும் அதை அடைய உங்கள் ஆயுதக் களஞ்சியத்தில் உள்ள மிகவும் சக்திவாய்ந்த கருவிகளில் useDeferredValue ஒன்றாகும்.