[React] useActionState

useActionState

useActionState는 form action 결과에 기반하여 상태를 업데이트할 수 있는 hook이다. useState처럼 상태를 관리하는데 form과 관련된 상태라고 생각하면 쉬울 것 같다.

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

참조 (Reference)

useActionState(action, initialState, permalink?)

form action이 호출될 때 업데이트 되는 컴포넌트 상태(state)를 생성하려면 컴포넌트의 최상위에서 useActionState를 호출한다. useActionState에 기존 form action 함수와 초기 상태(initial)를 전달하면 form에서 사용하는 새로운 action과 함께 최신 form state를 반환한다.

예시 코드

import { useActionState } from "react";

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

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

위에 코드에서 state는 form이 마지막으로 제출되었을 때 action에 의해 반환된 값이다. form이 제출되지 않은 경우 초기의 state 값이다.

Server Action과 함께 사용하는 경우 use
ActionState를 사용하면 hydration이 완료 되기 전에도 서버의 form 제출 응답이 표시될 수 있다.

매개변수

• fn: form을 제출하거나 버튼을 눌렀을 때 호출되는 함수이다. 함수가 호출되면 form의 이전 상태를 초기 인수로 받고 그 뒤에는 form action이 일반적으로 받는 인수가 온다.
• initialState: 초기에 원하는 상태 값이다. 직렬화 가능한 모든 값이 될 수 있다. 이 인수는 action이 처음 호출된 후에는 무시된다.

반환

useActionState는 정확히 두 개의 값이 있는 배열을 반환한다.

1. 초기 상태. 첫 번째 렌더링 중에는 전달한 초기 상태와 일치한다. action이 호출된 후에는 action에서 반환된 값과 일치한다.

2. form 컴포넌트에 action props을 전달하거나 form 내의 버튼 컴포넌트에 formAction prop을 전달 수 있는 새로운 action이다.

주의사항

• React Server 컴포넌트를 지원하는 프레임워크를 사용했을 때 useActionstate를 사용하면 JavaScript가 클라이언트에서 실행되기 전에 form을 interative하게 만들 수 있다. 서버 컴포넌트 없이 사용되는 경우 컴포넌트 local state와 같다.
• useActionState에 전달한 함수는 첫 번째 인수로 이전 또는 초기 상태인 추가 인수를 전달 받는다. 이로 인해 useActionState를 사용하지 않고 form action을 사용한 경우와 signature가 달라진다.

사용법

form action에서 반환된 정보 사용

import { useActionState } from 'react';
import { action } from './actions.js';

function MyComponent() {
  const [state, formAction] = useActionState(action, null);
  // ...
  return (
    <form action={formAction}>
      {/* ... */}
    </form>
  );
}

useActionState는 정확히 두 개의 항목이 포함된 배열을 반환

1. 현재 form state 처음에는 사용자가 제공한 초기 상태로 설정되고 form이 제출된 후에는 사용자가 제공한 action 반환 값으로 설정된다.
2. form에 action prop으로 전달하는 새로운 action

form이 제출되면 제공한 action 함수가 호출된다. 반환 값은 form의 새로운 current state가 된다.

React useActionState 공식 문서