React Basics~Render Performance/useTransition

Summarize this content to 400 words in Persian Lang
فرض کنید که ما تعداد زیادی داده مانند 10 هزار داده را نمایش می دهیم، اغلب در قرار دادن مقدار بعدی به فیلد ورودی تاخیر وجود دارد.
در این حالت وقتی مقداری را وارد می کنیم، صفحه نمایش داده های فیلتر شده را نمایش می دهد.
اما پس از آن، مشکلی که رخ می دهد، تأخیر در نمایش عملکرد بعدی مانند ورودی مقدار بعدی به فیلد ورودی به دلیل مدیریت بیش از حد داده است.

・src/Example.js

import { useState } from “react”;

const generateDummyItem = (num) => {
return new Array(num).fill(null).map((item, index) => `item ${index}`);
};

const dummyItems = generateDummyItem(10000);

const Example = () => {
const [filterVal, setFilterVal] = useState(“”);

const changeHandler = (e) => {
setFilterVal(e.target.value);
};

return (
<>
<input type=”text” onChange={changeHandler} />
{isPending && <div>Loading…</div>}
<ul>
{dummyItems
.filter((item) => {
if (filterVal === “”) return true;
return item.includes(filterVal);
})
.map((item) => (
<li key={item}>{item}</li>
))}
</ul>
</>
);
};

export default Example;

برای حل مشکل، می توانیم آن را بپیچیم setFilterVal عملکرد با startTransition.

const changeHandler = (e) => {
startTransition(() => {
setFilterVal(e.target.value);
})
};

startTransition باعث می شود که یک تابع تاخیر در آن اجرا شود.
به لطف این ویژگی، می توانیم به راحتی به مقدار بعدی در قسمت ورودی برویم.

・قبل از ورودی

・بعد از ورودی

• فرض کنید که ما تعداد زیادی داده مانند 10 هزار داده را نمایش می دهیم، اغلب در قرار دادن مقدار بعدی به فیلد ورودی تاخیر وجود دارد.

• در این حالت وقتی مقداری را وارد می کنیم، صفحه نمایش داده های فیلتر شده را نمایش می دهد.

• اما پس از آن، مشکلی که رخ می دهد، تأخیر در نمایش عملکرد بعدی مانند ورودی مقدار بعدی به فیلد ورودی به دلیل مدیریت بیش از حد داده است.

・src/Example.js

import { useState } from "react";

const generateDummyItem = (num) => {
  return new Array(num).fill(null).map((item, index) => `item ${index}`);
};

const dummyItems = generateDummyItem(10000);

const Example = () => {
  const [filterVal, setFilterVal] = useState("");

  const changeHandler = (e) => {
      setFilterVal(e.target.value);
  };

  return (
    <>
      <input type="text" onChange={changeHandler} />
      {isPending && <div>Loading...</div>}
      <ul>
        {dummyItems
          .filter((item) => {
            if (filterVal === "") return true;
            return item.includes(filterVal);
          })
          .map((item) => (
            <li key={item}>{item}</li>
          ))}
      </ul>
    </>
  );
};

export default Example;

• برای حل مشکل، می توانیم آن را بپیچیم setFilterVal عملکرد با startTransition.

  const changeHandler = (e) => {
    startTransition(() => {
      setFilterVal(e.target.value);
    })
  };

• startTransition باعث می شود که یک تابع تاخیر در آن اجرا شود.

• به لطف این ویژگی، می توانیم به راحتی به مقدار بعدی در قسمت ورودی برویم.

・قبل از ورودی

・بعد از ورودی