import { useActionState } from 'react'; async function… — Persian Developer Network — TG.ME

import { useActionState } from 'react'; async function loginAction(prevState, formData) { const email = formData.get('email'); const password = formData.get('password'); try { const response = await fetch('/api/login', { method: 'POST', body: formData }); if (!response.ok) throw new Error('Login failed'); return { success: true, error: null }; } catch (error) { return { success: false, error: error.message }; } } function LoginForm() { const [state, formAction, isPending] = useActionState(loginAction, { success: false, error: null }); return ( <form action={formAction}> <input type="email" name="email" placeholder="Email" disabled={isPending} /> <input type="password" name="password" placeholder="Password" disabled={isPending} /> {state.error && <p className="text-red-500">{state.error}</p>} <button type="submit" disabled={isPending}> {isPending ? 'Logging in...' : 'Login'} </button> </form> ); } یه راه هم ریکت بهمون داده که هوک پیش ساخته useActionState هست و با اون میتونیم هم حالت ها رو به واسطه prevState بین ریرندر ها حفظ کنیم (که فرم با سابمیت خالی نشه) و هم حالت pending برای ui بهتر و هم نتیجه رو از سرور برمیگردونه برخلاف حالت عادی که باز برای ui بهتر نشون بدیم. این تابع دیگر ویژگی onSubmit فرم قرار نمیگیرد و به جای آن در ویژگی action فرم قرار میگیره و از ریرندر های غیرضروری جلوگیری میکنه #react #next @persiandn