React 19 새로운 hook: useActionState와 useOptimistic

새로운 훅: useActionState로 액션 관리 간소화

React 19에서는 반복적인 액션 관리 작업을 간소화하기 위해 새로운 훅인 useActionState를 도입했습니다. 이 훅을 사용하면 비동기 작업과 상태 관리를 더욱 쉽게 처리할 수 있습니다.

 

const [error, submitAction, isPending] = useActionState(
  async (previousState, newName) => {
    const error = await updateName(newName);
    if (error) {
      return error;
    }
    return null;
  },
  null,
);

 

useActionState는 함수를 인자로 받아 이를 래핑한 액션을 반환합니다. 이 래핑된 액션이 호출될 때마다, useActionState는 액션의 마지막 결과와 펜딩 상태를 반환합니다.

 

새로운 훅: useOptimistic으로 낙관적 업데이트 관리

또 다른 일반적인 UI 패턴은 비동기 요청이 진행되는 동안 최종 상태를 낙관적으로 표시하는 것입니다. React 19에서는 이를 쉽게 처리할 수 있는 useOptimistic 훅을 추가했습니다.

 

function ChangeName({currentName, onUpdateName}) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);
  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName);
    const updatedName = await updateName(newName);
    onUpdateName(updatedName);
  };
  return (
    <form action={submitAction}>
      <p>Your name is: {optimisticName}</p>
      <p>
        <label>Change Name:</label>
        <input
          type="text"
          name="name"
          disabled={currentName !== optimisticName}
        />
      </p>
    </form>
  );
}

 

useOptimistic 훅을 통해 사용자는 비동기 요청이 완료되기 전에도 UI에서의 상태 변화를 즉각적으로 반영할 수 있습니다. 이는 사용자 경험을 개선하고, 더 나은 인터페이스를 제공하는 데 도움을 줍니다.