] इस ब्लॉग में, हम UseFormStatus, UseactionState, और UseOptimistic - तीन हुक का पता लगाएंगे जो हमारे रिएक्ट एप्लिकेशन को अधिक संवेदनशील और उपयोगकर्ता के अनुकूल बनाते हैं।

UseFormStatus: बढ़ाया फॉर्म हैंडलिंग

] नया UseFormStatus हुक स्वचालित रूप से इसे संभालता है, बॉयलरप्लेट कोड को कम करता है।

उदाहरण 2: कई फॉर्म स्टेट्स

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

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

function SignupForm() {
  return (
    

उदाहरण 3: सत्यापन की स्थिति

फ़ंक्शन सत्यापनस्टैटस () { const {लंबित, सत्यापन}} = ​​useFormStatus (); वापस करना (

{सत्यापन?

{त्रुटि}

))}

); } फ़ंक्शन पंजीकरण () { वापस करना ( { const त्रुटियां = वैधता (formData); if (त्रुटियां। Length) त्रुटियों को फेंक दें; प्रतीक्षा रजिस्टर (फॉर्मडाटा); }}> रूप> ); }

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

  return (
    

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

function ContactForm() {
  return (
    

फ़ंक्शन फॉर्मप्रोग्रेस () { const {लंबित, चरण, totalsteps} = useFormStatus (); वापस करना (

उदाहरण 5: फ़ाइल अपलोड प्रगति

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } फ़ंक्शन UploadProgress () { const {लंबित, प्रगति} = useFormStatus (); वापस करना (

{लंबित && प्रगति && (

useactionstate: कार्रवाई परिणामों का प्रबंधन

]

  
  
  उदाहरण 1: बुनियादी एक्शन स्टेट




 फ़ंक्शन सबमिशनस्टैटस () {
  const state = useactionstate ();

  वापस करना (
    

      {state.status === 'सफलता' && 
 सबमिशन सफल! 
}
      {state.status === 'त्रुटि' && 
 त्रुटि: {state.error.message} 
}
    
  );
}

फ़ंक्शन कमेंटफॉर्म () {
  वापस करना (
     {
      सबमिटकॉममेंट (फॉर्मडाटा) का इंतजार;
    }}>
      
      
      
    रूप>
  );
}




  
  
  उदाहरण 2: एक्शन हिस्ट्री




 फ़ंक्शन एक्शनहिस्टोरी () {
  const state = useactionstate ();

  वापस करना (
    

      
 हाल के कार्य 
      

        {state.history.map ((क्रिया, सूचकांक) => (
          

            {Action.Type} - {Action.Timestamp}
            {action.status === 'त्रुटि' && `(विफल: $ {action.error.message})`}
          
        ))}
      
    
  );
}





  
  
  उदाहरण 3: रिट्री मैकेनिज्म




]
  const state = useactionstate ();

  वापस करना (
    

      {state.status === 'त्रुटि' && (
         state.retry ()}
          अक्षम = {state.retrying}
        >
          {State.retrying? 'रिट्रीिंग ...': 'रिट्री'}
        बटन>
      )}
    
  );
}
function ValidationStatus() {
  const { pending, validationErrors } = useFormStatus();

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } उदाहरण 4: एक्शन कतार

फ़ंक्शन एक्शनक्यू () { const state = useactionstate (); वापस करना (

लंबित क्रियाएं

{state.queue.map ((क्रिया, सूचकांक) => (

{action.Type} - {action.queuedat} पर कतारबद्ध action.cancel ()}> रद्द करें बटन>

))}

); }

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } उदाहरण 5: एक्शन सांख्यिकी

फ़ंक्शन एक्शनस्टैट्स () { const state = useactionstate (); वापस करना (

एक्शन सांख्यिकी

सफलता दर: {state.stats.successrate}%

औसत अवधि: {state.stats.avgduration} ms

कुल कार्रवाई: {state.stats.total}

); }

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } उपयोग करें: स्मूथ यूआई अपडेट

]

उदाहरण 1: आशावादी टोडो सूची

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } फ़ंक्शन टोडोलिस्ट () { const [todos, सेटोडोस] = usestate ([]); const [ऑप्टिमिस्टिक्टोडोस, addoptimistictodo] = useOptimistic ( टोडोस, (राज्य, न्यूटोडो) => [... राज्य, न्यूटोडो] ); async फ़ंक्शन addtodo (formData) { const newtodo = { id: date.now (), पाठ: formData.get ('todo'), पूरा: गलत }; AddOptimistictodo (Newtodo); सेवेटोडो (न्यूटोडो) का इंतजार; } वापस करना (

टोडो जोड़ें बटन> रूप>

{Aptimistictodos.map (todo => ((
• {todo.text}
))}

); }

उदाहरण 2: बटन की तरह आशावादी

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } फ़ंक्शन जैसे const [पसंद, setlikes] = usestate (initionlikes); const [आशावादी, addoptimisticly] = useOptimistic ( पसंद है, (राज्य) => राज्य 1 ); async फ़ंक्शन हैंडलिक () { addoptimisticly (); लाइकपोस्ट (पोस्टिड) का इंतजार; } वापस करना ( {आशावादीता} पसंद करता है बटन> ); }

उदाहरण 3: आशावादी टिप्पणी धागा

] const [टिप्पणियाँ, setComments] = usestate ([]); const [आशावादी, addOptimisticComment] = useOptimistic ( टिप्पणियाँ, (राज्य, नवागम) => [... राज्य, नवाग्मन] ); async फ़ंक्शन सबमिटकॉममेंट (formData) { const टिप्पणी = { id: date.now (), पाठ: formData.get ('टिप्पणी'), लंबित: सच }; AddOptimisticComment (टिप्पणी); Savecomment (पोस्टिड, टिप्पणी) का इंतजार; } वापस करना (

टिप्पणी बटन> रूप> {आशावादी comments.map (टिप्पणी => (

उदाहरण 4: आशावादी खरीदारी कार्ट

फंक्शन शॉपिंगकार्ट () { const [कार्ट, सेटकार्ट] = usestate ([]); const [आशावादी, UpdatePtimisticCart] = useOptimistic ( कार्ट, (राज्य, अद्यतन) => { const {प्रकार, आइटम} = अद्यतन; स्विच (प्रकार) { मामला 'जोड़ें': वापसी [... राज्य, आइटम]; मामला 'निकालें': वापस लौटें। मामला 'अद्यतन': वापस लौटें। गलती करना: वापसी राज्य; } } ); async फ़ंक्शन updatecart (प्रकार, आइटम) { UpdatePtimisticCart ({प्रकार, आइटम}); SaveCart ({प्रकार, आइटम}) का इंतजार; } वापस करना (

{आशावादी Cart.map (आइटम => ((

{item.name} - $ {item.price} updatecart ('निकालें', आइटम)}> निकालें बटन>

))}

); }

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

  return (
    

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

function RegistrationForm() {
  return (
    

{ const errors = validateRegistration(formData); if (errors.length) throw errors; await register(formData); }}>

); } उदाहरण 5: आशावादी उपयोगकर्ता सेटिंग्स

] const [सेटिंग्स, सेटसेटिंग्स] = usestate ({}); const [AptimisticsEttings, UpdatePtimisticaticating] = useOptimistic ( सेटिंग्स, (राज्य, अद्यतन) => ({ ...राज्य, [Update.key]: अद्यतन। }) ); async फ़ंक्शन अपडेटिंग (कुंजी, मान) { UpdatePtimisticicating ({कुंजी, मान}); Savesettings ({[कुंजी]: मान}) का इंतजार; } वापस करना (

विषय: अपडेटिंग ('थीम', e.target.value)} > प्रकाश विकल्प> डार्क विकल्प> चयन> लेबल>

सूचनाएं: अपडेटिंग ('सूचना', e.target.checked)} /> लेबल>

); }

]

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
    
  );
}