[React & NextJS] useFormState

[React & NextJS] useFormState

Before you learn

🔗 Server Actions

 

반응형

---

useFormState

const [state, formAction] = useFormState(fn, initialState, permalink?);

 

useFormState는 form action의 결과에 따라 상태를 업데이트할 수 있는 Hook입니다.

(useState와 유사합니다.)

 

state는 formData와 함께 호출되는데, 처음에는 초기값 state와 함께 호출되고,

그 다음부터는 이전 action에서 return 된 state와 함께 호출됩니다.

 

---

예시

// /login/page.jsx

"use client";

import { useFormState } from "react-dom";
import { handleSubmit } from "./actions";

export dafault function LogIn() {
const [state, action] = useFormState(handleSubmit, null);
  return (
    <form action={action}>
      <input type='email' name='email'/>
      <input type='password' name='password'/>
      <button type='submit'>Log in</button>
    </form>
}

// /login/actions.js

"use server"

export async function handleSubmit(formData){
  console.log(formData)
  console.log(formData.get('email'))
  console.log(formData.get('password'))
}

---

Reference

🔗 react-dom-hooks/useFormState