[React 19] useOptimistic·useActionState·use - 폼과 비동기를 위한 새 훅

한 줄 요약 - React 19가 폼과 비동기 처리를 간결하게 해주는 새 훅을 추가했습니다. 화면을 먼저 바꾸는 낙관적 업데이트(useOptimistic), 액션 결과/로딩 상태(useActionState), 프로미스를 직접 읽는 use 등입니다.

무슨 일이에요?

예전엔 로딩 스피너, 에러 상태, 낙관적 UI를 매번 직접 만들었습니다. React 19는 이 패턴들을 훅으로 표준화해 보일러플레이트를 줄입니다. Actions(폼 action에 연결되는 함수)와 함께 쓰도록 설계됐어요.

핵심 코드

useOptimistic: 서버 응답 전에 화면을 먼저 바꿔 빠르게 느껴지게 합니다.

const [optimisticTodos, addOptimistic] = useOptimistic(
  todos,
  (state, newTodo) => [...state, { ...newTodo, sending: true }]
);

async function formAction(formData) {
  addOptimistic({ text: formData.get("text") }); // 즉시 반영
  await createTodo(formData);                    // 서버 저장(끝나면 실제값으로)
}

useActionState: 액션 결과와 pending(진행중) 상태를 한 번에 받습니다.

const [error, submitAction, isPending] = useActionState(
  async (prev, formData) => {
    const res = await save(formData);
    return res.ok ? null : "저장 실패";
  },
  null
);

왜 중요해요?

• 로딩/낙관적 UI를 직접 안 짜도 되고, form action과 자연스럽게 결합됩니다.
• use는 조건문 안에서도 프로미스/컨텍스트를 읽을 수 있어 데이터 패칭이 단순해집니다.
• 주의: React 19 + 클라이언트 컴포넌트 환경이 필요합니다.