ರಿಯಾಕ್ಟ್ useFormStatus: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಪ್ರಗತಿ ಟ್ರ್ಯಾಕಿಂಗ್‌ನಲ್ಲಿ ಪಾಂಡಿತ್ಯ

ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನಲ್ಲಿ, ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳ ಸಮಯದಲ್ಲಿ ತಡೆರಹಿತ ಮತ್ತು ಮಾಹಿತಿಪೂರ್ಣ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ರಿಯಾಕ್ಟ್ 18 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ರಿಯಾಕ್ಟ್‌ನ useFormStatus ಹುಕ್, ಫಾರ್ಮ್‌ನ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಶಕ್ತಿಯುತ ಮತ್ತು ಸೊಗಸಾದ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ useFormStatus ನ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಪರಿಶೀಲಿಸುತ್ತದೆ, ಅದರ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳು, ಬಳಕೆಯ ಸಂದರ್ಭಗಳು, ಮತ್ತು ಆಕರ್ಷಕ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಫಾರ್ಮ್ ಸಂವಾದಗಳನ್ನು ರಚಿಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ useFormStatus ಎಂದರೇನು?

useFormStatus ಎಂಬುದು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಸ್ಥಿತಿಯ ಬಗ್ಗೆ ಮಾಹಿತಿ ಒದಗಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಒಂದು ರಿಯಾಕ್ಟ್ ಹುಕ್ ಆಗಿದೆ. ಇದು ಸಲ್ಲಿಕೆ ಪ್ರಗತಿಯನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು ಪ್ರದರ್ಶಿಸುವ, ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸುವ, ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ UI ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಇದನ್ನು ಪರಿಚಯಿಸುವ ಮೊದಲು, ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಮ್ಯಾನುಯಲ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಅವಲಂಬಿಸಿದ್ದರು, ಇದು ಸಂಕೀರ್ಣ ಮತ್ತು ದೋಷಪೂರಿತ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು.

ಈ ಹುಕ್ ಕೆಳಗಿನ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಹೊಂದಿರುವ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ:

• pending: ಫಾರ್ಮ್ ಪ್ರಸ್ತುತ ಸಲ್ಲಿಕೆಯಾಗುತ್ತಿದೆಯೇ ಎಂದು ಸೂಚಿಸುವ ಬೂಲಿಯನ್ ಮೌಲ್ಯ.
• data: ಲಭ್ಯವಿದ್ದರೆ, ಫಾರ್ಮ್‌ನಿಂದ ಸಲ್ಲಿಸಲಾದ ಡೇಟಾ.
• method: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಾಗಿ ಬಳಸಲಾದ HTTP ವಿಧಾನ (ಉದಾ., "POST", "GET").
• action: ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ನಿರ್ವಹಿಸುವ ಫಂಕ್ಷನ್ ಅಥವಾ URL.
• error: ಸಲ್ಲಿಕೆ ವಿಫಲವಾದರೆ ದೋಷದ ಆಬ್ಜೆಕ್ಟ್. ಇದು ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

useFormStatus ಏಕೆ? ಪ್ರಯೋಜನಗಳು ಮತ್ತು ಅನುಕೂಲಗಳು

useFormStatus ಅನ್ನು ಬಳಸುವುದರಿಂದ ಹಲವಾರು ಪ್ರಮುಖ ಅನುಕೂಲಗಳಿವೆ:

• ಸರಳೀಕೃತ ಫಾರ್ಮ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಇದು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯ ನಿರ್ವಹಣೆಯನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, ಬಾಯ್ಲರ್‌ಪ್ಲೇಟ್ ಕೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಬಳಕೆದಾರರಿಗೆ ಸಲ್ಲಿಕೆ ಪ್ರಗತಿಯನ್ನು ಸೂಚಿಸಲು ಸ್ಪಷ್ಟ ಮತ್ತು ಸ್ಥಿರವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ, ತೊಡಗಿಸಿಕೊಳ್ಳುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಹತಾಶೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ವರ್ಧಿತ ದೋಷ ನಿರ್ವಹಣೆ: ದೋಷ ಪತ್ತೆ ಮತ್ತು ವರದಿ ಮಾಡುವಿಕೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಸಲ್ಲಿಕೆ ವೈಫಲ್ಯಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
• ಘೋಷಣಾತ್ಮಕ ವಿಧಾನ: ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ಕೋಡಿಂಗ್ ಶೈಲಿಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ, ಕೋಡ್ ಅನ್ನು ಓದಲು ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ಸರ್ವರ್ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಏಕೀಕರಣ: ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಸಂಯೋಜನೆಗೊಳ್ಳುತ್ತದೆ, ಸರ್ವರ್-ರೆಂಡರ್ ಮಾಡಿದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಯನ್ನು ಮತ್ತಷ್ಟು ಸುಗಮಗೊಳಿಸುತ್ತದೆ.

ಮೂಲ ಬಳಕೆ: ಒಂದು ಸರಳ ಉದಾಹರಣೆ

useFormStatus ನ ಮೂಲಭೂತ ಬಳಕೆಯನ್ನು ವಿವರಿಸಲು ಒಂದು ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸೋಣ.

ಸನ್ನಿವೇಶ: ಒಂದು ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್

ಹೆಸರು, ಇಮೇಲ್ ಮತ್ತು ಸಂದೇಶಕ್ಕಾಗಿ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಸರಳ ಸಂಪರ್ಕ ಫಾರ್ಮ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಫಾರ್ಮ್ ಸಲ್ಲಿಸುತ್ತಿರುವಾಗ ನಾವು ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ಸಲ್ಲಿಕೆ ವಿಫಲವಾದರೆ ದೋಷ ಸಂದೇಶವನ್ನು ತೋರಿಸಲು ಬಯಸುತ್ತೇವೆ.

ಕೋಡ್ ಉದಾಹರಣೆ

ಮೊದಲಿಗೆ, ಒಂದು ಸರಳ ಸರ್ವರ್ ಕ್ರಿಯೆಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸೋಣ (ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರತ್ಯೇಕ ಫೈಲ್‌ನಲ್ಲಿ ಇರುತ್ತದೆ, ಆದರೆ ಸಂಪೂರ್ಣತೆಗಾಗಿ ಇಲ್ಲಿ ಸೇರಿಸಲಾಗಿದೆ):

async function submitForm(formData) {
  'use server';
  // "pending" ಸ್ಥಿತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ವಿಳಂಬವನ್ನು ಅನುಕರಿಸುವುದು.
  await new Promise(resolve => setTimeout(resolve, 2000));

  // ಸಂಭಾವ್ಯ ದೋಷವನ್ನು ಅನುಕರಿಸುವುದು.
  const name = formData.get('name');
  if (name === 'error') {
    throw new Error('Simulated submission error.');
  }

  console.log('Form submitted successfully:', formData);
  return { message: 'Form submitted successfully!' };
}

ಈಗ, useFormStatus ಬಳಸಿ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸೋಣ:

'use client';

import { useFormStatus } from 'react-dom';

function ContactForm() {
  const { pending, data, error } = useFormStatus();

  return (
    

      

        ಹೆಸರು:
        
      
      

        ಇಮೇಲ್:
        
      
      

        ಸಂದೇಶ:
              </div>
      <button type="submit" disabled={pending}>
        {pending ? 'ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ...' : 'ಸಲ್ಲಿಸಿ'}
      </button>
      {error && <p style={{ color: 'red' }}>ದೋಷ: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default ContactForm;
</code>
</pre>

<h3>ವಿವರಣೆ</h3>

<ul>
  <li>ನಾವು <code>'react-dom'</code> ನಿಂದ <code>useFormStatus</code> ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತೇವೆ. ಇದು ಕ್ಲೈಂಟ್-ಸೈಡ್ ಹುಕ್ ಅನ್ನು ಬಳಸುವುದರಿಂದ ಇದು ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಿ.</li>
  <li><code>pending</code>, <code>data</code>, ಮತ್ತು <code>error</code> ಮೌಲ್ಯಗಳನ್ನು ಪಡೆಯಲು ನಾವು <code>ContactForm</code> ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ <code>useFormStatus()</code> ಅನ್ನು ಕರೆಯುತ್ತೇವೆ.</li>
  <li>ಫಾರ್ಮ್ ಸಲ್ಲಿಸುತ್ತಿರುವಾಗ ಸಬ್ಮಿಟ್ ಬಟನ್ ಅನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲು ಮತ್ತು "ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ..." ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲು <code>pending</code> ಮೌಲ್ಯವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ.</li>
  <li>ಒಂದು <code>error</code> ಸಂಭವಿಸಿದರೆ, ಅದರ ಸಂದೇಶವನ್ನು ಕೆಂಪು ಪ್ಯಾರಾಗ್ರಾಫ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.</li>
  <li>ಸರ್ವರ್ ಕ್ರಿಯೆಯಿಂದ <code>data</code> ಹಿಂತಿರುಗಿದರೆ, ನಾವು ಯಶಸ್ವಿ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ.</li>
</ul>

<h2>ಮುಂದುವರಿದ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು ಮತ್ತು ತಂತ್ರಗಳು</h2>

<p>ಮೂಲ ಉದಾಹರಣೆಯ ಹೊರತಾಗಿ, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತು ವಿವಿಧ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಅವಶ್ಯಕತೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು <code>useFormStatus</code> ಅನ್ನು ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ ಬಳಸಬಹುದು.</p>

<h3>1. ಕಸ್ಟಮ್ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್‌ಗಳು ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳು</h3>

<p>ಕೇವಲ "ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ..." ಪಠ್ಯದ ಬದಲು, ಹೆಚ್ಚು ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನೀವು ಕಸ್ಟಮ್ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್‌ಗಳು ಅಥವಾ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು ಸ್ಪಿನ್ನರ್ ಕಾಂಪೊನೆಂಟ್ ಅಥವಾ ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಅನ್ನು ಬಳಸಬಹುದು.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... form fields ... */}
      <button type="submit" disabled={pending}>
        {pending ? <Spinner /> : 'ಸಲ್ಲಿಸಿ'}
      </button>
      {error && <p style={{ color: 'red' }}>ದೋಷ: {error.message}</p>}
    </form>
  );
}

function Spinner() {
  return <div>ಲೋಡ್ ಆಗುತ್ತಿದೆ...</div>; // ನಿಮ್ಮ ಸ್ಪಿನ್ನರ್ ಕಾಂಪೊನೆಂಟ್‌ನೊಂದಿಗೆ ಬದಲಾಯಿಸಿ
}
</code>
</pre>

<h3>2. ಆಪ್ಟಿಮಿಸ್ಟಿಕ್ ಅಪ್‌ಡೇಟ್‌ಗಳು</h3>

<p>ಆಪ್ಟಿಮಿಸ್ಟಿಕ್ ಅಪ್‌ಡೇಟ್‌ಗಳು ಸರ್ವರ್‌ನಿಂದ ದೃಢೀಕರಣವನ್ನು ಪಡೆಯುವ ಮೊದಲೇ, ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಯಶಸ್ವಿಯಾದಂತೆ UI ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವ ಮೂಲಕ ಬಳಕೆದಾರರಿಗೆ ತಕ್ಷಣದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.</p>

<p><b>ಗಮನಿಸಿ:</b> ಆಪ್ಟಿಮಿಸ್ಟಿಕ್ ಅಪ್‌ಡೇಟ್‌ಗಳಿಗೆ ದೋಷ ನಿರ್ವಹಣೆ ಮತ್ತು ಡೇಟಾ ಸ್ಥಿರತೆಯ ಬಗ್ಗೆ ಎಚ್ಚರಿಕೆಯ ಪರಿಗಣನೆ ಅಗತ್ಯ. ಸಲ್ಲಿಕೆ ವಿಫಲವಾದರೆ, ನೀವು UI ಅನ್ನು ಅದರ ಹಿಂದಿನ ಸ್ಥಿತಿಗೆ ಹಿಂತಿರುಗಿಸಬೇಕು.</p>

<h3>3. ವಿವಿಧ ದೋಷ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸುವುದು</h3>

<p><code>useFormStatus</code> ನಿಂದ ಹಿಂತಿರುಗಿಸಲಾದ <code>error</code> ಪ್ರಾಪರ್ಟಿ, ವ್ಯಾಲಿಡೇಶನ್ ದೋಷಗಳು, ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳು, ಮತ್ತು ಸರ್ವರ್-ಸೈಡ್ ದೋಷಗಳಂತಹ ವಿವಿಧ ದೋಷ ಸನ್ನಿವೇಶಗಳನ್ನು ನಿಭಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ದೋಷದ ಪ್ರಕಾರವನ್ನು ಆಧರಿಸಿ ನಿರ್ದಿಷ್ಟ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ನೀವು ಷರತ್ತುಬದ್ಧ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಬಳಸಬಹುದು.</p>

<pre>
<code>
function ContactForm() {
  const { pending, error } = useFormStatus();

  return (
    <form action={submitForm}>
      {/* ... form fields ... */}
      <button type="submit" disabled={pending}>
        {pending ? 'ಸಲ್ಲಿಸಲಾಗುತ್ತಿದೆ...' : 'ಸಲ್ಲಿಸಿ'}
      </button>
      {error && error.message === 'Validation Error' && (
        <p style={{ color: 'red' }}>ದಯವಿಟ್ಟು ವ್ಯಾಲಿಡೇಶನ್ ದೋಷಗಳನ್ನು ಸರಿಪಡಿಸಿ.</p>
      )}
      {error && error.message === 'Network Error' && (
        <p style={{ color: 'red' }}>ನೆಟ್‌ವರ್ಕ್ ದೋಷ ಸಂಭವಿಸಿದೆ. ದಯವಿಟ್ಟು ನಂತರ ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ.</p>
      )}
      {error && error.message !== 'Validation Error' && error.message !== 'Network Error' && (
        <p style={{ color: 'red' }}>ಅನಿರೀಕ್ಷಿತ ದೋಷ ಸಂಭವಿಸಿದೆ.</p>
      )}
    </form>
  );
}
</code>
</pre>

<h3>4. ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಫಾರ್ಮ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು</h3>

<p><code>useFormStatus</code> ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಸರಳ ಮಾರ್ಗವನ್ನು ಒದಗಿಸಿದರೂ, ನೀವು ಇದನ್ನು Formik ಅಥವಾ React Hook Form ನಂತಹ ಹೆಚ್ಚು ಸಮಗ್ರ ಫಾರ್ಮ್ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಲು ಬಯಸಬಹುದು. ಈ ಲೈಬ್ರರಿಗಳು ವ್ಯಾಲಿಡೇಶನ್, ಫಾರ್ಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ, ಮತ್ತು ಸಲ್ಲಿಕೆ ನಿರ್ವಹಣೆಯಂತಹ ಮುಂದುವರಿದ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ನೀಡುತ್ತವೆ.</p>

<p>ಸಲ್ಲಿಕೆ ಪ್ರಗತಿಯನ್ನು ಪ್ರದರ್ಶಿಸಲು ಮತ್ತು ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸಲು ಸ್ಥಿರವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ಲೈಬ್ರರಿಗಳನ್ನು ವರ್ಧಿಸಲು ನೀವು <code>useFormStatus</code> ಅನ್ನು ಬಳಸಬಹುದು.</p>

<h3>5. ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್‌ಗಳು ಮತ್ತು ಶೇಕಡಾವಾರುಗಳು</h3>

<p>ದೀರ್ಘಕಾಲದ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳಿಗಾಗಿ, ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್ ಅಥವಾ ಶೇಕಡಾವಾರು ಪ್ರಮಾಣವನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಬಳಕೆದಾರರಿಗೆ ಅಮೂಲ್ಯವಾದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಅವರನ್ನು ತೊಡಗಿಸಿಕೊಳ್ಳುವಂತೆ ಮಾಡುತ್ತದೆ. `useFormStatus` ನಿಮಗೆ ನೇರವಾಗಿ ಪ್ರಗತಿಯನ್ನು ನೀಡದಿದ್ದರೂ, ಪ್ರಗತಿಯನ್ನು ವರದಿ ಮಾಡುವ ಸರ್ವರ್ ಕ್ರಿಯೆಯೊಂದಿಗೆ ನೀವು ಇದನ್ನು ಸಂಯೋಜಿಸಬಹುದು (ಉದಾ., ಸರ್ವರ್-ಸೆಂಟ್ ಈವೆಂಟ್‌ಗಳು ಅಥವಾ ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳ ಮೂಲಕ).</p>

<h2>useFormStatus ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು</h2>

<p><code>useFormStatus</code> ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು ಮತ್ತು ದೃಢವಾದ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಫಾರ್ಮ್ ಅನುಭವವನ್ನು ರಚಿಸಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:</p>

<ul>
  <li><b>ಸ್ಪಷ್ಟ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಿ:</b> ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯ ಸಮಯದಲ್ಲಿ ಬಳಕೆದಾರರಿಗೆ ಯಾವಾಗಲೂ ದೃಶ್ಯ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡಿ, ಉದಾಹರಣೆಗೆ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್, ಪ್ರೋಗ್ರೆಸ್ ಬಾರ್, ಅಥವಾ ಸ್ಥಿತಿ ಸಂದೇಶ.</li>
  <li><b>ದೋಷಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಿ:</b> ಸಲ್ಲಿಕೆ ವೈಫಲ್ಯಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ವರದಿ ಮಾಡಲು ದೃಢವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅಳವಡಿಸಿ, ಬಳಕೆದಾರರಿಗೆ ಮಾಹಿತಿಪೂರ್ಣ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಒದಗಿಸಿ.</li>
  <li><b>ಪ್ರವೇಶಸಾಧ್ಯತೆಯನ್ನು ಪರಿಗಣಿಸಿ:</b> ನಿಮ್ಮ ಫಾರ್ಮ್ ಸಂವಹನಗಳು ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಸೂಕ್ತವಾದ ARIA ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಬೆಂಬಲವನ್ನು ಒದಗಿಸಿ.</li>
  <li><b>ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ:</b> ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಮೆಮೊಯಿಜ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು ಡೇಟಾ ಪಡೆಯುವಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೂಲಕ ಅನಗತ್ಯ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಪ್ಪಿಸಿ.</li>
  <li><b>ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ:</b> ನಿಮ್ಮ ಫಾರ್ಮ್ ಸಂವಹನಗಳು ವಿವಿಧ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಪರಿಸರಗಳಲ್ಲಿ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ.</li>
</ul>

<h2>useFormStatus ಮತ್ತು ಸರ್ವರ್ ಕ್ರಿಯೆಗಳು</h2>

<p><code>useFormStatus</code> ಅನ್ನು ರಿಯಾಕ್ಟ್ ಸರ್ವರ್ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ, ಇದು ಸರ್ವರ್‌ನಲ್ಲಿ ನೇರವಾಗಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯವಾಗಿದೆ. ಸರ್ವರ್ ಕ್ರಿಯೆಗಳು ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಂದ ನೇರವಾಗಿ ಆಹ್ವಾನಿಸಬಹುದಾದ ಸರ್ವರ್-ಸೈಡ್ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಪ್ರತ್ಯೇಕ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ನ ಅಗತ್ಯವಿಲ್ಲದೆ.</p>

<p>ಸರ್ವರ್ ಕ್ರಿಯೆಗಳೊಂದಿಗೆ ಬಳಸಿದಾಗ, <code>useFormStatus</code> ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಕ್ರಿಯೆಯ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ, ಫಾರ್ಮ್ ಸಂವಹನಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಸರಳ ಮತ್ತು ಸ್ಥಿರವಾದ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.</p>

<h2>ಸಾಂಪ್ರದಾಯಿಕ ಫಾರ್ಮ್ ನಿರ್ವಹಣೆಯೊಂದಿಗೆ ಹೋಲಿಕೆ</h2>

<p><code>useFormStatus</code> ಗಿಂತ ಮೊದಲು, ಡೆವಲಪರ್‌ಗಳು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳನ್ನು ನಿಭಾಯಿಸಲು ಮ್ಯಾನುಯಲ್ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮತ್ತು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಅವಲಂಬಿಸಿದ್ದರು. ಈ ವಿಧಾನವು ಸಾಮಾನ್ಯವಾಗಿ ಈ ಕೆಳಗಿನ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿತ್ತು:</p>

<ul>
  <li>ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಸ್ಟೇಟ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ರಚಿಸುವುದು (ಉದಾ., <code>isSubmitting</code>).</li>
  <li>ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಬರೆಯುವುದು.</li>
  <li>ಸರ್ವರ್‌ಗೆ ಅಸಿಂಕ್ರೋನಸ್ ವಿನಂತಿಯನ್ನು ಮಾಡುವುದು.</li>
  <li>ಸರ್ವರ್‌ನಿಂದ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಆಧರಿಸಿ ಸ್ಟೇಟ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದು.</li>
  <li>ದೋಷಗಳನ್ನು ನಿಭಾಯಿಸುವುದು ಮತ್ತು ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು.</li>
</ul>

<p>ಈ ವಿಧಾನವು ತೊಡಕಿನ ಮತ್ತು ದೋಷಪೂರಿತವಾಗಿರಬಹುದು, ವಿಶೇಷವಾಗಿ ಬಹು ಫೀಲ್ಡ್‌ಗಳು ಮತ್ತು ವ್ಯಾಲಿಡೇಶನ್ ನಿಯಮಗಳಿರುವ ಸಂಕೀರ್ಣ ಫಾರ್ಮ್‌ಗಳಿಗೆ. <code>useFormStatus</code> ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸಲು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಕೇಂದ್ರೀಕೃತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.</p>

<h2>ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು</h2>

<p><code>useFormStatus</code> ಅನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ನೈಜ-ಪ್ರಪಂಚದ ಸನ್ನಿವೇಶಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದು, ಅವುಗಳೆಂದರೆ:</p>

<ul>
  <li><b>ಇ-ಕಾಮರ್ಸ್ ಚೆಕ್‌ಔಟ್ ಫಾರ್ಮ್‌ಗಳು:</b> ಪಾವತಿ ಮಾಹಿತಿಯನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವಾಗ ಲೋಡಿಂಗ್ ಇಂಡಿಕೇಟರ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸುವುದು.</li>
  <li><b>ಬಳಕೆದಾರರ ನೋಂದಣಿ ಫಾರ್ಮ್‌ಗಳು:</b> ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ಮೌಲ್ಯೀಕರಿಸುವುದು ಮತ್ತು ಖಾತೆ ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸುವುದು.</li>
  <li><b>ವಿಷಯ ನಿರ್ವಹಣಾ ವ್ಯವಸ್ಥೆಗಳು:</b> ಲೇಖನಗಳು, ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳು ಮತ್ತು ಇತರ ವಿಷಯವನ್ನು ಸಲ್ಲಿಸುವುದು.</li>
  <li><b>ಸಾಮಾಜಿಕ ಮಾಧ್ಯಮ ವೇದಿಕೆಗಳು:</b> ಕಾಮೆಂಟ್‌ಗಳನ್ನು ಪೋಸ್ಟ್ ಮಾಡುವುದು, ಪೋಸ್ಟ್‌ಗಳನ್ನು ಲೈಕ್ ಮಾಡುವುದು ಮತ್ತು ವಿಷಯವನ್ನು ಹಂಚಿಕೊಳ್ಳುವುದು.</li>
  <li><b>ಹಣಕಾಸು ಅಪ್ಲಿಕೇಶನ್‌ಗಳು:</b> ವಹಿವಾಟುಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸುವುದು, ಖಾತೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ವರದಿಗಳನ್ನು ರಚಿಸುವುದು.</li>
</ul>

<h2>ತೀರ್ಮಾನ</h2>

<p>ರಿಯಾಕ್ಟ್‌ನ <code>useFormStatus</code> ಹುಕ್ ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಪ್ರಗತಿಯನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಒಂದು ಅಮೂಲ್ಯ ಸಾಧನವಾಗಿದೆ. ಫಾರ್ಮ್ ಸ್ಥಿತಿ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳಗೊಳಿಸುವ ಮೂಲಕ, ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುವ ಮೂಲಕ ಮತ್ತು ಘೋಷಣಾತ್ಮಕ ವಿಧಾನವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ, <code>useFormStatus</code> ಡೆವಲಪರ್‌ಗಳಿಗೆ ಹೆಚ್ಚು ಆಕರ್ಷಕ ಮತ್ತು ಸ್ಪಂದನಾಶೀಲ ಫಾರ್ಮ್ ಸಂವಹನಗಳನ್ನು ರಚಿಸಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಅದರ ಕಾರ್ಯಚಟುವಟಿಕೆಗಳು, ಬಳಕೆಯ ಸಂದರ್ಭಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಇಂದಿನ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಭೂದೃಶ್ಯದ ಬೇಡಿಕೆಗಳನ್ನು ಪೂರೈಸುವ ದೃಢವಾದ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು <code>useFormStatus</code> ಅನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.</p>

<p>ನೀವು <code>useFormStatus</code> ಅನ್ನು ಅನ್ವೇಷಿಸುವಾಗ, ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಕ್ರಿಯಾತ್ಮಕ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿಯಾಗಿವೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್, ಮತ್ತು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯನ್ನು ಪರಿಗಣಿಸಲು ಮರೆಯದಿರಿ. ಈ ತತ್ವಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ತಡೆರಹಿತ, ಮಾಹಿತಿಪೂರ್ಣ ಮತ್ತು ಆಕರ್ಷಕವಾದ ಫಾರ್ಮ್ ಸಂವಹನಗಳನ್ನು ರಚಿಸಬಹುದು, ಅಂತಿಮವಾಗಿ ಉತ್ತಮ ಒಟ್ಟಾರೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕೊಡುಗೆ ನೀಡಬಹುದು.</p>

<p>ಈ ಲೇಖನವು <code>useFormStatus</code> ನ ಸಮಗ್ರ ಅವಲೋಕನವನ್ನು ಒದಗಿಸಿದೆ. ಅತ್ಯಂತ ನವೀಕೃತ ಮಾಹಿತಿ ಮತ್ತು API ವಿವರಗಳಿಗಾಗಿ ಅಧಿಕೃತ ರಿಯಾಕ್ಟ್ ದಸ್ತಾವೇಜನ್ನು ಸಂಪರ್ಕಿಸಲು ಮರೆಯದಿರಿ. ಹ್ಯಾಪಿ ಕೋಡಿಂಗ್!</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ರಿಯಾಕ್ಟ್</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ಫಾರ್ಮ್ ಪ್ರಗತಿ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ಪೆಂಡಿಂಗ್ ಸ್ಥಿತಿ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ದೋಷ ನಿರ್ವಹಣೆ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ರಿಯಾಕ್ಟ್ ಹುಕ್ಸ್</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್ಮೆಂಟ್</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ಬಳಕೆದಾರ ಅನುಭವ</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UI</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">UX</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div hidden id="S:3"></div><script>$RC("B:3","S:3")</script><div hidden id="S:0"></div><script>$RC("B:0","S:0")</script></body></html>