API Reference
Hooks

useFormStatus

கடைசி form submission-ன் status information-ஐ தரும் Hook தான் useFormStatus.

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

குறிப்பு

useFormStatus()

useFormStatus Hook கடைசி form submission-ன் status information-ஐ வழங்குகிறது.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

Status information பெற, Submit component <form>-க்குள் render செய்யப்பட வேண்டும். Form actively submit ஆகிறதா என்பதைச் சொல்லும் pending property போன்ற information-ஐ Hook return செய்கிறது.

மேலுள்ள உதாரணத்தில், form submit ஆகும் போது <button> presses-ஐ disable செய்ய Submit இந்த information-ஐப் பயன்படுத்துகிறது.

மேலும் உதாரணங்களை கீழே பார்க்கவும்.

Parameters

useFormStatus parameters எதையும் ஏற்காது.

Returns

பின்வரும் properties கொண்ட status object:

  • pending: ஒரு boolean. true என்றால் parent <form> submission pending நிலையில் உள்ளது. இல்லையெனில் false.

  • data: Parent <form> submit செய்யும் data-வை கொண்ட FormData interface-ஐ implement செய்யும் object. Active submission இல்லையெனில் அல்லது parent <form> இல்லையெனில், இது null ஆக இருக்கும்.

  • method: 'get' அல்லது 'post' என்ற string value. Parent <form> GET அல்லது POST HTTP method மூலம் submit செய்கிறதா என்பதை இது குறிக்கிறது. Default-ஆக, <form> GET method-ஐப் பயன்படுத்தும்; இதை method property மூலம் குறிப்பிடலாம்.

  • action: Parent <form>-ன் action prop-க்கு pass செய்யப்பட்ட function-க்கு reference. Parent <form> இல்லையெனில், property null ஆக இருக்கும். action prop-க்கு URI value வழங்கப்பட்டிருந்தாலோ, அல்லது action prop குறிப்பிடப்படவில்லையெனில், status.action null ஆக இருக்கும்.

Caveats

  • useFormStatus Hook <form>-க்குள் render செய்யப்படும் component-இலிருந்து call செய்யப்பட வேண்டும்.
  • useFormStatus parent <form>-க்கான status information மட்டும் return செய்யும். அதே component-இலோ child components-இலோ render செய்யப்படும் எந்த <form>-க்கான status information-ஐயும் return செய்யாது.

பயன்பாடு

Form submission நேரத்தில் pending state காட்டுதல்

ஒரு form submit ஆகும் போது pending state காட்ட, <form>-க்குள் render செய்யப்படும் component-இல் useFormStatus Hook-ஐ call செய்து, return செய்யப்பட்ட pending property-ஐ read செய்யலாம்.

இங்கு form submit ஆகிறது என்பதை காட்ட pending property-ஐப் பயன்படுத்துகிறோம்.

import { useFormStatus } from "react-dom";
import { submitForm } from "./actions.js";

function Submit() {
  const { pending } = useFormStatus();
  return (
    <button type="submit" disabled={pending}>
      {pending ? "Submitting..." : "Submit"}
    </button>
  );
}

function Form({ action }) {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

export default function App() {
  return <Form action={submitForm} />;
}

Pitfall

அதே component-இல் render செய்யப்படும் <form>-க்கான status information-ஐ useFormStatus return செய்யாது.

useFormStatus Hook parent <form>-க்கான status information மட்டும் return செய்யும்; Hook-ஐ call செய்யும் அதே component-இல் அல்லது child components-இல் render செய்யப்படும் எந்த <form>-க்கும் அல்ல.

function Form() {
  // 🚩 `pending` will never be true
  // useFormStatus does not track the form rendered in this component
  const { pending } = useFormStatus();
  return <form action={submit}></form>;
}

அதற்கு பதிலாக <form>-க்குள் இருக்கும் component-இலிருந்து useFormStatus-ஐ call செய்யுங்கள்.

function Submit() {
  // ✅ `pending` will be derived from the form that wraps the Submit component
  const { pending } = useFormStatus();
  return <button disabled={pending}>...</button>;
}

function Form() {
  // This is the <form> `useFormStatus` tracks
  return (
    <form action={submit}>
      <Submit />
    </form>
  );
}

Submit செய்யப்படும் form data-வை read செய்தல்

User submit செய்யும் data என்ன என்பதை display செய்ய, useFormStatus return செய்யும் status information-ன் data property-ஐப் பயன்படுத்தலாம்.

இங்கு users username request செய்யக்கூடிய form உள்ளது. அவர்கள் எந்த username request செய்துள்ளனர் என்பதை உறுதிப்படுத்தும் தற்காலிக status message காட்ட useFormStatus-ஐப் பயன்படுத்தலாம்.

import {useState, useMemo, useRef} from 'react';
import {useFormStatus} from 'react-dom';

export default function UsernameForm() {
  const {pending, data} = useFormStatus();

  return (
    <div>
      <h3>Request a Username: </h3>
      <input type="text" name="username" disabled={pending}/>
      <button type="submit" disabled={pending}>
        Submit
      </button>
      <br />
      <p>{data ? `Requesting ${data?.get("username")}...`: ''}</p>
    </div>
  );
}

சிக்கல் தீர்வு

status.pending ஒருபோதும் true ஆகவில்லை

useFormStatus parent <form>-க்கான status information மட்டும் return செய்யும்.

useFormStatus call செய்யும் component <form>-க்குள் nested ஆக இல்லை என்றால், status.pending எப்போதும் false return செய்யும். <form> element-ன் child ஆன component-இல் useFormStatus call செய்யப்படுகிறதா என்பதை verify செய்யுங்கள்.

அதே component-இல் render செய்யப்படும் <form>-ன் status-ஐ useFormStatus track செய்யாது. மேலும் விவரங்களுக்கு Pitfall-ஐப் பார்க்கவும்.

PreviousHooks
NextComponents