জয়েন লগইন

রিয়েক্ট useTransition

🌈রিয়েক্ট useTransition কি?

📋রিয়েক্ট useTransition হলো স্টেট আপডেটকে ট্রানজিশন হিসেবে পরিচালনা করার পদ্ধতি।

⚒️রিয়েক্ট useTransition স্টেট আপডেটকে ট্রানজিশন হিসেবে পরিচালনা করতে ব্যবহৃত হয়।

রিয়েক্ট useTransition স্টেট আপডেটকে ট্রানজিশন হিসেবে পরিচালনা করার উদাহরণ।

react
import {createRoot} from "react-dom/client";
import React, {useState, useTransition} from "react";

function App() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);
  const [isPending, startTransition] = useTransition();

  function changeText(e) {
    setText(e.target.value);
    startTransition(() => {
      setList(Array.from({length: 1000}, (_, i) =>
        e.target.value + " " + i
      ));
    });
  }

  return (
    <div>
      <input value={text} onChange={changeText} placeholder="সার্চ"/>
      <p>{isPending ? "লোডিং" : ""}</p>
      {list.slice(0, 5).map((item, i) => (
        <div key={i}>{item}</div>
      ))}
    </div>
  );
}

createRoot(
  document.getElementById("root")
).render(<App/>);