React 19 تقدم العديد من السنانير الجديدة القوية التي تحدث ثورة في كيفية التعامل مع النماذج وإدارة التحديثات المتفائلة في تطبيقاتنا. في هذه المدونة ، سنستكشف useformstatus و useActionState و useOptimist - ثلاثة خطافات تجعل تطبيقات React أكثر استجابة وسهلة الاستخدام.

useformstatus: معالجة النماذج المحسنة

يوفر خطاف useformstatus معلومات في الوقت الفعلي حول التقديمات النموذجية ، مما يسهل إنشاء نماذج سريعة الاستجابة ويمكن الوصول إليها. دعونا نستكشف كيف يتحسن هذا الخطاف عند قدرات التعامل مع النماذج لـ React 18.

مثال 1: حالة تحميل النماذج الأساسية

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    
      {pending ? 'Submitting...' : 'Submit'}
    
  );
}

function SignupForm() {
  return (
    

في React 18 ، ستحتاج إلى إدارة حالات التحميل يدويًا باستخدام Usestate. يتولى خطاف UseFormStatus الجديد تلقائيًا ، مما يقلل من رمز Boilerplate.

مثال 2: حالات نموذج متعددة

function FormStatus() {
  const { pending, data, method } = useFormStatus();

  return (
    

      {pending && Submitting via {method}...}
      {!pending && data && Last submission: {new Date().toLocaleString()}}
    
  );
}

function ContactForm() {
  return (
    

مثال 3: حالة التحقق من صحة النموذج

function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    

      {validationErrors?.map((error, index) => (
        
{error}
      ))}
    
  );
}

function RegistrationForm() {
  return (
    

مثال 4: تقدم النموذج متعدد الخطوات

function FormProgress() {
  const { pending, step, totalSteps } = useFormStatus();

  return (
    

      





  
  
  Example 5: File Upload Progress




function UploadProgress() {
  const { pending, progress } = useFormStatus();

  return (
    

      {pending && progress && (
        

          





  
  
  useActionState: Managing Action Results


The useActionState hook provides a way to track the state of form actions and server mutations, making it easier to handle success and error states.


  
  
  Example 1: Basic Action State




function SubmissionStatus() {
  const state = useActionState();

  return (
    

      {state.status === 'success' && 
Submission successful!
}
      {state.status === 'error' && 
Error: {state.error.message}
}
    
  );
}

function CommentForm() {
  return (
    
 {
      await submitComment(formData);
    }}>
      
      
      
    
  );
}





  
  
  مثال 2: تاريخ العمل




function ActionHistory() {
  const state = useActionState();

  return (
    

      
Recent Actions
      

        {state.history.map((action, index) => (
          

            {action.type} - {action.timestamp}
            {action.status === 'error' && ` (Failed: ${action.error.message})`}
          
        ))}
      
    
  );
}





  
  
  مثال 3: آلية إعادة المحاولة




function RetryableAction() {
  const state = useActionState();

  return (
    

      {state.status === 'error' && (
         state.retry()}
          disabled={state.retrying}
        >
          {state.retrying ? 'Retrying...' : 'Retry'}
        
      )}
    
  );
}





  
  
  مثال 4: قائمة انتظار الإجراء




function ActionQueue() {
  const state = useActionState();

  return (
    

      
Pending Actions
      {state.queue.map((action, index) => (
        

          {action.type} - Queued at {action.queuedAt}
           action.cancel()}>Cancel
        
      ))}
    
  );
}





  
  
  مثال 5: إحصائيات العمل




function ActionStats() {
  const state = useActionState();

  return (
    

      
Action Statistics
      
Success Rate: {state.stats.successRate}%
      
Average Duration: {state.stats.avgDuration}ms
      
Total Actions: {state.stats.total}
    
  );
}





  
  
  useOptimistic: تحديثات واجهة المستخدم السلسة


 يتيح خطاف UseOpTimistic تحديثات واجهة المستخدم الفورية أثناء انتظار استجابات الخادم ، مما يخلق تجربة مستخدم أكثر استجابة. 


  
  
  مثال 1: قائمة تودو متفائلة




function TodoList() {
  const [todos, setTodos] = useState([]);
  const [optimisticTodos, addOptimisticTodo] = useOptimistic(
    todos,
    (state, newTodo) => [...state, newTodo]
  );

  async function addTodo(formData) {
    const newTodo = {
      id: Date.now(),
      text: formData.get('todo'),
      completed: false
    };

    addOptimisticTodo(newTodo);
    await saveTodo(newTodo);
  }

  return (
    

      

        
        Add Todo
      
      

        {optimisticTodos.map(todo => (
          
{todo.text}
        ))}
      
    
  );
}





  
  
  مثال 2: زر متفائل مثل الزر




function LikeButton({ postId, initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (state) => state   1
  );

  async function handleLike() {
    addOptimisticLike();
    await likePost(postId);
  }

  return (
    
      {optimisticLikes} Likes
    
  );
}





  
  
  مثال 3: موضوع التعليق المتفائل




function CommentThread({ postId }) {
  const [comments, setComments] = useState([]);
  const [optimisticComments, addOptimisticComment] = useOptimistic(
    comments,
    (state, newComment) => [...state, newComment]
  );

  async function submitComment(formData) {
    const comment = {
      id: Date.now(),
      text: formData.get('comment'),
      pending: true
    };

    addOptimisticComment(comment);
    await saveComment(postId, comment);
  }

  return (
    

      

        
        Comment
      
      {optimisticComments.map(comment => (
        





  
  
  Example 4: Optimistic Shopping Cart




function ShoppingCart() {
  const [cart, setCart] = useState([]);
  const [optimisticCart, updateOptimisticCart] = useOptimistic(
    cart,
    (state, update) => {
      const { type, item } = update;
      switch (type) {
        case 'add':
          return [...state, item];
        case 'remove':
          return state.filter(i => i.id !== item.id);
        case 'update':
          return state.map(i => i.id === item.id ? item : i);
        default:
          return state;
      }
    }
  );

  async function updateCart(type, item) {
    updateOptimisticCart({ type, item });
    await saveCart({ type, item });
  }

  return (
    

      {optimisticCart.map(item => (
        

          {item.name} - ${item.price}
           updateCart('remove', item)}>Remove
        
      ))}
    
  );
}





  
  
  مثال 5: إعدادات المستخدم المتفائلة




function UserSettings() {
  const [settings, setSettings] = useState({});
  const [optimisticSettings, updateOptimisticSetting] = useOptimistic(
    settings,
    (state, update) => ({
      ...state,
      [update.key]: update.value
    })
  );

  async function updateSetting(key, value) {
    updateOptimisticSetting({ key, value });
    await saveSettings({ [key]: value });
  }

  return (
    

      

        
          Theme:
           updateSetting('theme', e.target.value)}
          >
            Light
            Dark
          
        
      
      

        
          Notifications:
           updateSetting('notifications', e.target.checked)}
          />
        
      
    
  );
}




 تذكر التحقق من وثائق React الرسمية للحصول على أحدث المعلومات وأفضل الممارسات عند استخدام هذه الخطافات في تطبيقاتك. 

 ترميز سعيد!