액션으로 전송되는 폼데이터를 알면 비동기 작업이 아직 보류 중이더라도 사용 중 표시기를 건너뛰고 다음 상태의 UI 를 즉시 렌더링할 수 있는 경우가 많습니다.

이를 "낙관적 UI"라고 합니다.

function LikeButton({ tweet }) {
  const fetcher = useFetcher();

  // if there is `formData` then it is posting to the action
  const liked = fetcher.formData
    ? // check the formData to be optimistic
      fetcher.formData.get("liked") === "yes"
    : // if its not posting to the action, use the record's value
      tweet.liked;

  return (
    <fetcher.Form method="post" action="toggle-liked">
      <button
        type="submit"
        name="liked"
        value={liked ? "yes" : "no"}
      />
    </fetcher.Form>
  );
}

(예, HTML 버튼은 name 과 value 를 가질 수 있습니다).

fetcher 를 사용하여 낙관적인 UI 를 만드는 것이 더 일반적이지만, navigation.formData 를 사용하여 일반 양식에서도 동일한 작업을 수행할 수 있습니다.