useTransition() does not give a valid value

[Baedonghee]

What version of Remix are you using?

^1.7.2

Steps to Reproduce

As shown in the document, when it is post, it goes to idle → submitting → loading → idle, but it goes to idle -> submitting -> idle. Add the code below.

The folder structure is also in route

const data = useActionData();
  const transition = useTransition();
  console.log(transition);

  const loadText = {
    actionSubmission: "submit!!",
    actionReload: "loading",
  };

  const btnText = loadText[transition.type] || "submit";

  return (
    <div>
      <h1>useActionData</h1>
      <Form method="post">
        <p>firstname:</p>
        <input type="text" name="firstname" />
        <br />
        <p>lastname:</p>
        <input type="text" name="lastname" />
        <br />
        <p>years:</p>
        <input type="number" name="years" />
        <br />
        <button type="submit">{btnText}</button>
        <br />
        <p>{data ? data.message : "none"}</p>
      </Form>
    </div>
  );

Expected Behavior

As shown in the document, when it is post, it should proceed with idle → submitting → loading → idle.

Actual Behavior

idle -> submitting -> idle.

[kiliman]

Your code example is busted. Can you update your issue?

[machour]

@kiliman done

[brophdawg11]

I am assuming this is because there are no defined loaders. Since there is nothing to load the router is able to go right back to idle and skip an in-between react render for state: "loading". I tested on 1.16.0 and this is the behavior I'm seeing with the above code.

If you have loaders and are experiencing this issue, could you provide a reproduction via https://remix.new?