Unexpected <Form> behavior in refactored tutorial

[SomervilleTom]

The <Form> element is not rendering properly after navigating among routes that differ only in their dynamic parameter (see screen captures below). This may be pilot error on my part, hence my question here. The app I'm working on needs behavior similar to the tutorial, except that navigation should go directly to an "edit" page for the selected contact. I encountered this issue in my own code, and I've refactored the tutorial to show the same issue for this community.

My refactoring was straightforward -- I migrated the behavior from edit.jsx in the tutorial to contact.jsx in the tutorial. I kept the Delete button and its action from the original contact.jsx page. For simplicity, I don't use the favorite/Favorite behavior at all. I see the same unexpected behavior with and without the useFetcher hook, and so I don't use it (again, for simplicity).

I add some basic HTML to show the property values of the incoming contact instance (in the same order that they appear in the Form). I think -- perhaps incorrectly -- that this confirms that the page is being rendered as expected and is receiving the expected value of contact each time it is rendered.

In the second screen capture below, I've highlighted the several places where the displayed value of defaultValue differs from the provided value of that field in the contact object. I note that the Avatar URL changes as expected -- but ONLY that field. This adds to the mystery for me, since I would expect the form to either use none or all of the new values. I see nothing that distinguishes the avatar property in the contact object or in the Form instance.

If I navigate from a selected contact back to the index page and then click a different contact from the sidebar, the outlet renders as expected. This behavior is therefore specific to a navigation from something like http://whatever/contacts/id1 to http://whatever/contacts/id2.

The first screen capture shows the result of clicking an item in the left-hand sidebar. The outlet is rendering the expected data.

The second screen capture shows the result then clicking the next item in the left-hand side-bar. I've highlighted the unexpected fields of the form.

Here is the refactored content of contact.jsx:

/* eslint-disable react/prop-types */
/* eslint-disable react-refresh/only-export-components */
import {
  useLoaderData,
  Form,
  redirect,
  useFetcher,
  useNavigate,
} from "react-router-dom";
import { getContact, updateContact } from "../contacts";

export async function loader({ params }) {
  const contact = await getContact(params.contactId)
  if (!contact) {
    throw new Response("", {
      status: 404,
      statusText: "Not found"
    })
  }
  return { contact }
}

export async function action({ request, params}) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateContact(params.contactId, updates);
  return redirect(`/contacts/${params.contactId}`);
}

export default function Contact() {
  const { contact } = useLoaderData();
  const navigate = useNavigate();

  return (
    <div>
      <h3>contact fields</h3>
      <div>
        {contact.id}
        {contact.first || contact.last ? (
          <p>{contact.first} {contact.last}</p>
        ) : (
          <i>No Name</i>
        )}{" "}
        {contact.twitter ? <p>{contact.twitter}</p> : <p>undefined</p>}
        {contact.avatar ? <p>{contact.avatar}</p> : <p>undefined</p>}
        {contact.notes ? <p>{contact.notes}</p> : <p>undefined</p>}
      </div>
      <hr />
      <h3>Form</h3>
      <p>{contact.id}</p>
      <Form method="post" id="contact-form">
        <p>
          <span>Name</span>
          <input
            placeholder="First"
            aria-label="First name"
            type="text"
            name="first"
            defaultValue={contact.first}
          />
          <input
            placeholder="Last"
            aria-label="Last name"
            type="text"
            name="last"
            defaultValue={contact.last}
          />
        </p>
        <label>
          <span>Twitter</span>
          <input
            type="text"
            name="twitter"
            placeholder="@jack"
            defaultValue={contact.twitter}
          />
        </label>
        <label>
          <span>Avatar URL</span>
          <input
            placeholder="https://example.com/avatar.jpg"
            aria-label="Avatar URL"
            type="text"
            name="avatar"
            defaultValue={contact.avatar}
          />
        </label>
        <label>
          <span>Notes</span>
          <textarea
            name="notes"
            defaultValue={contact.notes}
            rows={6}
          />
        </label>
        <p>
          <button type="submit">Save</button>
          <button 
            type="button"
            onClick={() => {
              navigate(-1)
            }}
          >
            Cancel
          </button>
        </p>
      </Form>
      <hr />
      <Form
        method="post"
        action="destroy"
        onSubmit={(event) => {
          if (
            !confirm(
              "Please confirm you want to delete this record."
            )
          ) {
            event.preventDefault();
          }
        }}
      >
        <button type="submit">Delete</button>
      </Form>
    </div>
  );
}

// eslint-disable-next-line no-unused-vars
function Favorite({ contact }) {
  const fetcher = useFetcher()

  let favorite = contact.favorite;
  if (fetcher.formData) {
    favorite = fetcher.formData.get("favorite") === "true";
  }

  return (
    <fetcher.Form method="post">
      <button
        name="favorite"
        value={favorite ? "false" : "true"}
        aria-label={
          favorite
            ? "Remove from favorites"
            : "Add to favorites"
        }
      >
        {favorite ? "★" : "☆"}
      </button>
    </fetcher.Form>
  );
}

I appreciate your attention and invite your thoughts and suggestions.

[SomervilleTom]

This looks like a bug in react-router to me. I found a work-around that solves the issue. I think that if react-router is rendering correctly, then my work-around should have no effect.

The work-around is to import and use the useNavigation hook, and short-circuit the rendering of Contact if navigation.state is not 'idle':

1. Import useNavigation hook:

   import {
     // ... existing imports
     useNavigation,
   } from "react-router-dom";
   

2. Invoke useNavigation in Contact:

   export default function Contact() {
     const { contact } = useLoaderData();
     const navigate = useNavigate();
     const navigation = useNavigation()
     // ...
   }
   

3. Short-circuit rendering if not idle

  // ... existing code
  if (navigation.state !== 'idle') {
    return null;
  }

  return (...)

Without this workaround, the 'defaultValue' property of each input of the form is set to the value of the corresponding field of contact during a render that happens while navigation.state is "loading".

The Contact field is rendered again when navigation.state is 'idle'. This should cause the 'defaultValue' property to be updated to reflect the new value of the corresponding field of contact during this final render.

That last render does NOT cause the form to be updated, and the result is an incorrect presentation of the form to the user.

I appreciate your attention. I hope this apparent bug is at least addressed in the "issues" page -- it's a bit tedious to provide all the information requested by that form.