useFormState – React

useFormState란 Form의 액션의 결과를 기반으로 state를 업데이트 할 수 있도록 제공하는 Hook이다.

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

컴포넌트 최상위 레벨에서 useFormState를 호출하여 폼 액션이 실행될 때 업데이트 되는 컴포넌트 state를 생성한다. useFormState에 기존의 폼 작업 함수와 초기 state를 전달하면, 최신 폼 state와 함께 폼에서 사용하는 새로운 액션을 반환한다. 최신 폼 state 또한 제공된 함수에 전달된다.

import { useFormState } from "react-dom";

async function increment(previousState, formData) {
  return previousState + 1;
}

function StatefulForm({}) {
  const [state, formAction] = useFormState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  )
}

폼 state는 폼을 마지막으로 제출했을 때 액션에서 반환되는 값이다. 폼이 제출되기 전이라면 전달한 초기 state와 같다.

Server Action과 함께 사용하는 경우, useFormState를 사용하여 hydration이 완료되기 전에도 폼 제출에 대한 서버의 응답을 보여줄 수 있다.