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 عالي الأداء مع تجربة مستخدم سلسة. فهو يضمن بقاء واجهة المستخدم سريعة الاستجابة أثناء العمليات التي قد تكون بطيئة ويمنع تجميد واجهة المستخدم مما يعزز تجربة المستخدم الشاملة.