[React] useActionState 펜딩상태를 체크할 수 있다.

원래는 axios 상태값이나 redux로 상태 변경해서 처리했던건데, 이게 되네?

실험기능.

 

실험적인 기능이긴한데, axios나 tanstack query같은 라이브러리를 이용해서 통신시 작동충돌이 없을지 모르겠다.

import { useFormStatus } from "react-dom";
import action from './actions';

function Submit() {
  const status = useFormStatus();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

 

 

+++++ 리액트 메타팀에서 이걸 

useActionState로 변경하였습니다. +++++++

dom에서 직접 안건드리기 위함인가?

 

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

function Submit() {
  const status = useActionState();
  return <button disabled={status.pending}>Submit</button>
}

export default function App() {
  return (
    <form action={action}>
      <Submit />
    </form>
  );
}

 

useActionState