React useTransition Hook Complete Guide (React 18 (Hindi)

✨ Quick Answer: React 18 का useTransition hook क्या है? इस complete guide में सीखें कैसे अपनी React app की performance को बेहतर बनाएं। आसान Hindi में अभी पढ़ें!

मान लीजिए आप अपनी ReactJS एप्लीकेशन में एक बड़ा heavy data filter या search bar बना रहे हैं। जैसे ही user input box में कुछ टाइप करता है, पूरा UI एक सेकंड के लिए freeze हो जाता है। User बार-बार बटन दबाता है, लेकिन स्क्रीन हिलती तक नहीं! ऐसा इसलिए होता है क्योंकि React डिफ़ॉल्ट रूप से हर State Update को समान प्राथमिकता (priority) देता है। लेकिन क्या हो अगर हम React को बता सकें कि कौन सा काम ज़्यादा ज़रूरी है और किसे बाद में भी किया जा सकता है? यहीं पर एंट्री होती है React 18 के सबसे जादुई feature यानी React useTransition Hook की!

React useTransition Hook क्या है और इसकी ज़रूरत क्यों पड़ी?

React 17 और उससे पुराने वर्शन्स में, React के काम करने का तरीका बिल्कुल synchronous था। इसका मतलब यह है कि अगर कोई State Update ट्रिगर हुआ है, तो React उसे पूरा प्रोसेस करने के बाद ही स्क्रीन पर नया बदलाव दिखाएगा। इस बीच, user browser के साथ कोई इंटरैक्शन (जैसे click या scroll) नहीं कर पाता था। इसे हम Blocking Rendering कहते हैं।

React 18 में React Official Documentation के अनुसार Concurrent Rendering का concept लाया गया। इसका मतलब है कि React अब एक समय पर कई काम कर सकता है, और ज़रूरत पड़ने पर किसी भारी रेंडरिंग टास्क को बीच में रोक (pause) कर user के clicks या inputs को पहले हैंडल कर सकता है।

जब हम useTransition का इस्तेमाल करते हैं, तो हम React को साफ़ शब्दों में बताते हैं: "भाई देखो, यह जो State Update है, यह बहुत भारी है। इसे बैकग्राउंड में आराम से करो। अगर इस बीच user कुछ और टाइप करता है, तो पहले उसका काम करो, इसे बाद में निपटा लेना।"

Urgent Updates vs Non-Urgent (Transition) Updates में क्या अंतर है?

React में हमारे पास दो मुख्य प्रकार के updates होते हैं:

• Urgent Updates: ये वे बदलाव हैं जो user को तुरंत स्क्रीन पर दिखने चाहिए। जैसे - input field में character टाइप होना, dropdown का खुलना, या किसी toggle button पर click होना। अगर इनमें 100ms का भी delay हो, तो user को UI बहुत slow और laggy लगता है।
• Transition Updates (Non-Urgent): ये वे काम हैं जो background में हो सकते हैं और अगर इनमें थोड़ा समय भी लगे (जैसे आधा सेकंड), तो user को कोई बुरा नहीं लगेगा। जैसे - search results का filter होना, एक tab से दूसरे heavy tab पर switch होना, या charts/graphs का render होना।

useTransition Hook का Syntax कैसे काम करता है?

चलिए देखते हैं कि useTransition को अपने React components में कैसे import और initialize करते हैं:

import { useTransition, useState } from 'react';

const [isPending, startTransition] = useTransition();

यहाँ useTransition हमें एक array return करता है जिसमें दो चीज़ें होती हैं:

1. isPending (boolean): यह एक flag है जो बताता है कि आपका transition update अभी भी background में चल रहा है या पूरा हो चुका है। इसका use करके हम UI में कोई loader, spinner या blurred effect दिखा सकते हैं।
2. startTransition (function): यह एक wrapper function है। इसके अंदर हम उस State Update function को डालते हैं जिसे हम low-priority बनाना चाहते हैं।

बिना useTransition के समस्या: Slow Search Filter Scenario

दोस्तों, पहले हम बिना useTransition के एक practical code देखते हैं, ताकि आपको असली समस्या समझ आए। मान लीजिए हमारे पास एक ऐसी list है जिसमें 15,000 items हैं, और हम उसे user input के आधार पर filter कर रहे हैं।

import React, { useState } from 'react';

// 15,000 items की heavy list generate करना
const largeList = Array.from({ length: 15000 }, (_, index) => `Item #${index + 1}`);

function HeavySearchWithoutTransition() {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredList, setFilteredList] = useState(largeList);

  const handleChange = (e) => {
    const value = e.target.value;
    
    // Urgent Update: Input box में text तुरंत दिखना चाहिए
    setSearchTerm(value);

    // Heavy Update: 15,000 rows को filter करना (यह UI को freeze कर देता है)
    const filtered = largeList.filter(item => item.includes(value));
    setFilteredList(filtered);
  };

  return (
    

      
Slow List Filtering (Without useTransition)
      
      
Results count: {filteredList.length}
      

        {filteredList.map((item, index) => (
          

            {item}
          
        ))}
      
    
  );
}

export default HeavySearchWithoutTransition;

इस कोड में समस्या क्या है? जैसे ही आप input field में तेजी से टाइप करेंगे, आपको महसूस होगा कि keyboard से type किए गए letters स्क्रीन पर अटक-अटक कर आ रहे हैं। ऐसा इसलिए हो रहा है क्योंकि setSearchTerm(value) और setFilteredList(filtered) दोनों एक साथ synchronous तरीके से चलते हैं, जिससे main thread block हो जाता है।

समाधान: useTransition के साथ Production-Ready Code

चलिए अब इसी component को useTransition का इस्तेमाल करके super fast और user-friendly बनाते हैं। ध्यान दें कि हमने कैसे isPending का इस्तेमाल करके UI को responsive रखा है:

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

// 15,000 items की heavy list generate करना
const largeList = Array.from({ length: 15000 }, (_, index) => `Item #${index + 1}`);

function FastSearchWithTransition() {
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredList, setFilteredList] = useState(largeList);
  
  // useTransition hook initialize करना
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    
    // 1. Urgent Update (Immediate UI response)
    setSearchTerm(value);

    // 2. Non-Urgent Update wrapped inside startTransition
    startTransition(() => {
      const filtered = largeList.filter(item => item.includes(value));
      setFilteredList(filtered);
    });
  };

  return (
    

      
Responsive List Filtering (With useTransition)
      
      

        
        
        {/* isPending का उपयोग करके Loading text दिखाना */}
        {isPending && Updating...}
      

      
Results count: {filteredList.length}
      
      {/* List opacity changes based on isPending for better UX */}
      

        {filteredList.map((item, index) => (
          

            {item}
          
        ))}
      
    
  );
}

export default FastSearchWithTransition;

क्या बदलाव आया? अब जब आप input box में टाइप करेंगे, तो text तुरंत टाइप होगा बिना किसी lag के! React background में filter processing करेगा और जब processing पूरी हो जाएगी, तो list को update कर देगा। इस दौरान user screen पर smooth loading indicator (Updating...) देख सकता है।

useTransition vs Normal Updates: Direct Comparison Table

आइए इन दोनों के अंतर को एक clear table के ज़रिए समझते हैं ताकि इंटरव्यू में भी आप आसानी से जवाब दे सकें:

useTransition vs useDeferredValue में क्या अंतर है?

कई डेवलपर्स इन दोनों hooks के बीच भ्रमित (confuse) हो जाते हैं क्योंकि दोनों का काम performance को optimize करना ही है। लेकिन दोनों में एक बड़ा बुनियादी अंतर है:

• useTransition: इसका इस्तेमाल तब किया जाता है जब आपके पास State Update Code का access हो (जैसे आप startTransition(() => setState(...)) लिख सकते हैं)।
• useDeferredValue: इसका इस्तेमाल तब किया जाता है जब आपको Props या किसी external library से कोई value मिल रही हो जिसे आप direct control नहीं कर सकते (जैसे const deferredValue = useDeferredValue(externalQuery))।

useTransition का इस्तेमाल करते समय किन Common Errors से बचें?

दोस्तों, इस hook का उपयोग करते समय कुछ ऐसी गलतियाँ हैं जो लगभग हर developer करता है। चलिए उन्हें समझते हैं ताकि आप आसानी से किसी भी error को solve कर सकें:

1. Do NOT wrap synchronous operations that aren't state updates

startTransition के अंदर केवल वही code होना चाहिए जो React State को change करता है। आप इसके अंदर direct heavy calculations (बिना state update के) नहीं डाल सकते।

// ❌ गलत तरीका (This will not optimize anything)
startTransition(() => {
  const heavyValue = performHeavyMath(); // State set नहीं हो रहा है
});

//   सही तरीका
const [value, setValue] = useState();
startTransition(() => {
  const result = performHeavyMath();
  setValue(result); // State Update wrapper के अंदर है
});

2. Can't use with Controlled Inputs directly

कभी भी input field के value attribute से जुड़े state को startTransition में न डालें। ऐसा करने से input fill करते समय keystrokes block या lag होने लगेंगे।

// ❌ बहुत बड़ी गलती!
const handleChange = (e) => {
  startTransition(() => {
    setInputValue(e.target.value); // Input laggy हो जाएगा!
  });
};

3. Async functions within startTransition

अगर आपको startTransition के अंदर कोई API call या asynchronous कार्य करना है, तो ध्यान रहे कि React 18 में async updates को wrapped state handles की तरह handle करने के नियम अलग हैं। यदि आप setTimeout या fetch का use कर रहे हैं, तो state update को synchronous wrapper में ही रखें:

// ❌ गलत तरीका (React immediately assumes transition is finished)
startTransition(async () => {
  await fetchResults();
  setResults(data);
});

//   सही तरीका
const handleFetch = async () => {
  const data = await fetchResults();
  startTransition(() => {
    setResults(data);
  });
};

Performance Optimization Best Practices

यदि आप अपनी React apps को scalable और fast बनाना चाहते हैं, तो इन बातों का विशेष ध्यान रखें:

• Don't Overuse: हर state update को transition में डालने की गलती न करें। केवल वहीं use करें जहाँ heavy rendering के कारण UI freeze की समस्या आ रही हो।
• Combine with useMemo: यदि आपकी child elements बहुत heavy हैं, तो component tree को render होने से बचाने के लिए useMemo या React.memo का useTransition के साथ combo बनायें।
• Provide Visual Feedback: जब isPending true हो, तो screen पर loading spinner या opacity reduce करना न भूलें ताकि user को पता चले कि application crash नहीं हुई है, बल्कि processing चल रही है।

तो दोस्तों, आज हमने सीखा कि React 18 का useTransition hook कैसे हमारे user experience को 10x बेहतर बना सकता है। हमने synchronous rendering की समस्या को समझा, background updates का architectural flow देखा, और एक production-ready search list component को code किया। अब इसे अपने live projects में इस्तेमाल करें और अपनी web apps को smoother बनाएँ!