React o‘tishlar (transitions)

UseTransition nima?

useTransition hooki og‘ir yangilanishlar paytida React ilovangizni sezgir saqlashga yordam beradi.

Bu sizga ba’zi state yangilanishlarini “shoshilinch bo‘lmagan” deb belgilash imkonini beradi, bu esa boshqa, tezroq yangilanishlarni birinchi bo‘lib amalga oshirish imkonini beradi.

O‘tishlarni qachon ishlatish kerak?

Quyidagi hollarda o‘tishlardan foydalaning:

• UIni muzlatib qo‘yishi mumkin bo‘lgan sekin operatsiya
• Darhol muhim bo‘lmagan yangilanishlar
• Ko‘rsatish uchun vaqt talab qiladigan qidiruv natijalari

Asosiy misol

Qidiruv funksiyasida o‘tishlardan qanday foydalanishni ko‘rsatadigan oddiy misol:

import { useState, useTransition } from 'react';

function SearchBar() {
  const [text, setText] = useState('');
  const [results, setResults] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // Urgent: Update input right away
    setText(e.target.value);

    // Non-urgent: Update search results
    startTransition(() => {
      setResults(e.target.value);
    });
  };

  return (
    <div>
      <input value={text} onChange={handleChange} />
      {isPending ? (
        <p>Loading...</p>
      ) : (
        <p>Search results for: {results}</p>
      )}
    </div>
  );
}

Ushbu misolda:

• Kiritish maydoni darhol yangilanadi (shoshilinch yangilanish)
• Qidiruv natijalarini yangilash transition (shoshilinch bo‘lmagan) sifatida belgilanadi
• Yuklash xabari o‘tish kutilayotgan paytda ko‘rsatiladi

Haqiqiy dunyo misoli

Sekin qidiruv funksiyasi bilan amaliyroq misol:

import { useState, useTransition } from 'react';

function SearchResults({ query }) {
  // Simulate slow search results
  const items = [];
  if (query) {
    for (let i = 0; i < 1000; i++) {
      items.push(<li key={i}>Result for {query} - {i}</li>);
    }
  }
  return <ul>{items}</ul>;
}

function App() {
  const [input, setInput] = useState('');
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // Urgent: Update input field
    setInput(e.target.value);
    
    // Non-urgent: Update search results
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input 
        type="text" 
        value={input} 
        onChange={handleChange} 
        placeholder="Type to search..."
      />
      {isPending && <p>Loading results...</p>}
      <SearchResults query={query} />
    </div>
  );
}

Bu misol qanday ishlaydi:

1. Kirish maydoniga kiritganingizda, u darhol yangilanadi
2. Qidiruv natijalarini yangilash startTransition-ga o‘ralgan
3. Natijalar yangilanayotganda, isPending haqiqatdir
4. UI ko‘p natijalarga qaramay javob beradi

Transition Hook-dan foydalaning

useTransition hook’i ikkita element qaytaradi:

• isPending: o‘tish faol yoki yo‘qligini bildiradi
• startTransition: yangilanishlarni o‘tish sifatida belgilash funksiyasi