Frontender Libs - обзор библиотек JS / CSS

Async Transitions: обновление без блокировки

Transition API в React позволяет плавно обновлять состояние без блокировки UI.

Как использовать:

1. Импортируйте useTransition.
2. Создайте хук useTransition.
3. Оберните изменение состояния в startTransition.

Что происходит:

1. startTransition вызывает функцию асинхронно, позволяя отменить изменение.
2. Пока функция выполняется, isPending = true.
3. Когда функция завершается, isPending = false.

Пример:

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <p>Current tab: {tab}</p>
      <button onClick={() => selectTab('home')}>Home</button>
      <button onClick={() => selectTab('about')}>About</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

👉 @sWebDev

👍4

www.tg-me.com/us/Frontender Libs обзор библиотек JS CSS/com.sWebDev/2753

1.59K viewsMar 18, 2024 at 08:11

tg-me.com/sWebDev/2753

Create: 2024-03-18
Last Update: 2025-07-09 20:52:17

function TabContainer() {
  const [isPending, startTransition] = useTransition();
  const [tab, setTab] = useState('about');

  function selectTab(nextTab) {
    startTransition(() => {
      setTab(nextTab);
    });
  }

  return (
    <div>
      <p>Current tab: {tab}</p>
      <button onClick={() => selectTab('home')}>Home</button>
      <button onClick={() => selectTab('about')}>About</button>
      {isPending && <p>Loading...</p>}
    </div>
  );
}

👉 @sWebDev

BY Frontender Libs - обзор библиотек JS / CSS

Share with your friend now:
tg-me.com/sWebDev/2753

Frontender Libs обзор библиотек JS CSS Telegram | DID YOU KNOW?

Dump Scam in Leaked Telegram Chat