banti kevat

Posted on Jul 11 • Originally published at itinfohubs.blogspot.com

React useTransition Hook Complete Guide (React 18 (Hindi)

#javascript #react #programming #webdev

React useTransition Hook क्या है? React 18 के इस powerful feature से slow UI renders को smoothly handle करना सीखें इस complete Hindi guide में!

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

⚡ Quick Answer: React useTransition Hook एक React 18 Concurrent hook है जो बिना UI को block किए कुछ State Updates को 'Transitions' (कम प्राथमिकता वाले कार्यों) के रूप में mark करने की अनुमति देता है। यह high-priority updates (जैसे typing) को low-priority updates (जैसे search result rendering) के कारण lag होने से बचाता है।

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 होना।

🏗️ React 18 State Update Flow Diagram

User Typing (Urgent)
➔
Browser Thread Free
➔
List Filtering (Transition)

Diagram: How useTransition prioritizes immediate input over heavy background rendering.

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

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

import { useTransition, useState } from 'react';

const [isPending, startTransition] = useTransition();

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

isPending (boolean): यह एक flag है जो बताता है कि आपका transition update अभी भी background में चल रहा है या पूरा हो चुका है। इसका use करके हम UI में कोई loader, spinner या blurred effect दिखा सकते हैं।
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 के ज़रिए समझते हैं ताकि इंटरव्यू में भी आप आसानी से जवाब दे सकें:

Feature	Normal State Update (Default)	Transition Update (useTransition)
Priority Level	High (Urgent) - Immediate rendering	Low (Non-Urgent) - Background rendering
UI Blocking	हाँ, heavy components में UI freeze हो जाता है	नहीं, browser main thread हमेशा responsive रहता है
State Interruption	नहीं हो सकता, render cycle पूरा करना ही पड़ता है	हाँ, नया input आते ही पुराना render बीच में रद्द हो जाता है
Loading State	मैन्युअली loader state manage करनी पड़ती है	`isPending` flag स्वतः built-in मिलता है
Use Case	Inputs, toggles, dialog modals open/close	Large lists rendering, graphs, tab switching

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 बनाएँ!

Frequently Asked Questions (FAQs)

Q1: क्या useTransition से API requests fast हो जाती हैं?
नहीं, useTransition API requests को तेज़ नहीं बनाता। इसका मुख्य काम React Rendering performance को optimize करना है, ताकि भारी UI elements को render करते समय browser main thread block न हो और user interface responsive बना रहे।
Q2: क्या हम एक Component में multiple useTransition hooks का उपयोग कर सकते हैं?
हाँ, आप एक ही component में multiple useTransition hooks का उपयोग कर सकते हैं, लेकिन आम तौर पर इसकी आवश्यकता नहीं होती। एक ही startTransition\ instance का उपयोग विभिन्न State Updates को wrap करने के लिए किया जा सकता है।
Q3: React useTransition और Debouncing में क्या अंतर है?
Debouncing एक set delay (जैसे 300ms) के बाद कार्य को trigger करता है, जिससे render cycle टल जाता है। useTransition कोई artificial delay नहीं जोड़ता; यह तुरंत background में render करना शुरू कर देता है, लेकिन user inputs को high priority देकर UI responsive रखता है।
Q4: क्या useTransition का उपयोग React 17 या उससे पुराने versions में किया जा सकता है?
नहीं, useTransition React 18 का built-in concurrent mode feature है। इसका उपयोग करने के लिए आपका React version कम से कम 18 या उससे ऊपर होना चाहिए और root rendering के लिए ReactDOM.createRoot का उपयोग होना आवश्यक है।
Q5: क्या isPending state को custom styling के लिए use किया जा सकता है?
हाँ, बिल्कुल! isPending true होने पर आप heavy list component की opacity कम कर सकते हैं, inputs को partially disable कर सकते हैं, या spinner/loading animation screen पर render कर सकते हैं, जिससे UX बेहतर होता है।

DEV Community