useActionState()

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

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

• state : 현재 state, 첫 렌더링 시에는 initialState, 액션 실행 이후는 액션이 반환한 값
• formAction : <form>컴포넌트의 action prop이나 button컴포넌트의 formAction prop으로 전달할 수 있는 새 액션
• isPending : 폼 액션이 대기 중인지 여부를 알려주는 플래그
• fn : form이 제출되거나 버튼이 눌렸을 때 호출되는 함수이다. 함수가 호출되면 첫 번째 인수로 폼의 이전 state(처음에는 initialState, 이후에는 이전 반환값)가 전달되고, 그 뒤에는 폼 액션이 일반적으로 받는 인수들이 전달된다.
• initialState : state의 초기값 (액션이 처음 호출 된 이후에는 무시된다.)
• permalink? : (opitional) 폼이 수정하는 고유한 페이지 url을 포함하는 문자열이다. 동적 콘텐츠가 있는 페이지에서 점진적 향상과 함께 사용된다.

import { useActionState } from "react";

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

export default function App({}) {
  const [state, formAction, isPending] = useActionState(increment, 0);
  return (
    <form>
      {state}
      <button formAction={formAction}>Increment</button>
    </form>
  );
}