<aside> 💡

useActionState Hook은 현재 React의 Canary 채널과 실험적인 채널에서만 사용할 수 있습니다. 또한 useActionState의 모든 이점을 얻으려면 React 서버 컴포넌트를 지원하는 프레임워크를 사용해야 합니다.

</aside>

import { useFormState } from “react-dom”

const [state, formAction, isPending] = useActionState(action, initialState, permalink?);

: formAction의 결과를 기반으로 state를 업데이트할 수 있도록 제공하는 Hook

최상위 레벨에서 useActionState를 호출하면 폼이 마지막으로 제출된 시점에 액션이 반환한 값에 접근 가능

import { useActionState } from "react";

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

function StatefulForm({}) {
  **const [state, formAction,isPending] = useActionState(increment, 0);**
  return (
	  <>
	    <form>
	      {state}
	      <button formAction={formAction}>Increment</button>
	    </form>
	    {isPending ? "Loading..." : message}
	  </>
  )
}

parameters

• action

  : 폼이 제출되거나 버튼을 눌렀을 때 호출될 함수

  함수가 실행될 때, 첫 번째 인수로 폼의 이전 state를 전달

• initialState

  : 초기 state로 설정하고자 하는 값. 액션이 처음 호출된 후에는 이 인수를 무시

• permalink

  : 선택적으로 제공되는 URL로, 브라우저의 기본 폼 제출 동작을 지원

returns

• state

  state는 초기에 전달한 initialState이고, 이후에는 이전 실행의 반환값. 일반적으로 폼 액션에 전달하는 인수들이 이어집니다.

• formAction

  : form 컴포넌트의 action prop에 전달하거나 폼 내부 button 컴포넌트의 formAction prop에 전달할 수 있는 새로운 액션

• isPending

  : 대기 중인 전환(Pending Transition)이 있는지 여부를 알려주는 isPending 플래그입니다.

Docs