React — популярная библиотека JavaScript для создания пользовательских интерфейсов. Он известен своей эффективностью и ориентирован на создание повторно используемых компонентов пользовательского интерфейса. Одной из ключевых особенностей React является введение хуков, которые представляют собой функции, которые перехватывают состояние React. Одним из этих хуков является хук useTransition. Этот хук позволяет изменять состояние без блокировки интерфейса, что обеспечивает плавность работы.

Понимание хука useTransition

Чтобы лучше понять хук useTransition, мы рассмотрим следующий пример.

import {useState} from "react"

const App = () => {
  const [post, setPost] = useState(undefined)

  const fetchData = async () => {
    await fetch("https://jsonplaceholder.org/posts/1")
      .then((result) => result.json())
      .then((result) => setPost(result))
  }

  return(
    

      {post !== undefined && (
      

        
{post?.title}
        
{post?.content}
      
      )}
      
        Get post
      
    
  )
}

export default App; 

при нажатии кнопки в зависимости от того, насколько медленный Интернет или насколько тяжелая задача, выполняемая внутри функции fetchData, пользовательский интерфейс может зависнуть во время задачи выборки, что приведет к ухудшению пользовательского опыта. также существует возможность спама пользователем кнопки, если вы не хотите, чтобы пользователь злоупотреблял вашим приложением. Кроме того, приложение не показывает пользователю никаких указаний на то, что операция находится в процессе.

Эти проблемы можно легко исправить с помощью хука useTransition, мы можем обновить предыдущий код примерно так.

import {useState, useTransition} from "react"
import {ImSpinner2} from "react-icons/im"

const App = () => {
  const [pending, startTransition] = useTransition()
  const [post, setPost] = useState({})

  const fetchData = () => {
    startTransition( async () => {
      await fetch("https://jsonplaceholder.org/posts/1")
        .then((result) => result.json())
        .then((result) => setPost(result))
    })
  }

  return(
    

      {post !== undefined && (
      

        
{post.title}
        
{post.content}
      
      )}
      
        {pending ?  : "Get post" }
      
    
  )
}

export default App; 

Вызванный хук useTransition возвращает два значения: в ожидании, какое значение будет истинным, если задача была выполнена, и функция startTransition содержит задачу, которая может быть прервана более срочными задачами.

В приведенном выше примере мы обернули запрос на выборку в асинхронную стрелочную функцию, которая находится внутри функции startTransition.

и в кнопке мы модифицируем ее таким образом, чтобы она включала отключенные атрибуты, связанные с ожиданием, и мы изменили метку кнопки, чтобы отображать счетчик, когда задача находится в ожидании, и показывать метку «Получить публикацию», когда задача не находится в состоянии ожидания.

Это обеспечивает удобство работы с пользователем, повышает производительность и защищает ваше приложение от неправомерного поведения пользователей.

Заключение

Хук useTransition меняет правила игры при создании производительных приложений React с удобным пользовательским интерфейсом. Это гарантирует, что пользовательский интерфейс будет оставаться отзывчивым во время потенциально медленных операций, а также предотвратит зависание пользовательского интерфейса, что повышает общее удобство работы пользователя.