Best practice for derived local states updates

[lucabergamini]

Hi all,
my company uses react-query extensively to sync and update server states in our react frontend. Recently, we have seen a pattern emerging and I'm not sure whether we are following the best practice. I've searched for related discussion but either my keywords are not the correct ones or we are doing something quite wrong, hence this question.

What is the recommended way to keep a local state which is derived from a query result, so that:

• the local state can be updated on the client;
• the local state is sent to the server on a user interaction;
• the local state is synced with the query state before and after that
  ?

I'm aware of the fact that react-query is not a client state manager, but surely this is a common enough issue to have an advocated approach.

Here is an example of what we are doing right now:

import { useEffect, useState } from "react";
import { useQuery } from "react-query";

interface Contact {
  id: number;
  name?: string;
  email?: string;
  telephone?: string;
  homeAddress?: string;
}

function ContactEditor({
  contact,
  onSubmit,
}: {
  contact: Contact;

  onSubmit: (contact: Contact) => void;
}) {
  // Initialize localContact with the contact prop, so we can edit it locally
  // before sending it to the server
  const [localContact, setLocalContact] = useState(contact);
  // Update localContact when the contact prop changes
  useEffect(() => {
    setLocalContact(contact);
  }, [contact]);

  return (
    <div>
      <input
        value={localContact.name}
        onChange={(e) =>
          setLocalContact({ ...localContact, name: e.target.value })
        }
      />
      <input
        value={localContact.email}
        onChange={(e) =>
          setLocalContact({ ...localContact, email: e.target.value })
        }
      />
      <input
        value={localContact.telephone}
        onChange={(e) =>
          setLocalContact({ ...localContact, telephone: e.target.value })
        }
      />
      <input
        value={localContact.homeAddress}
        onChange={(e) =>
          setLocalContact({ ...localContact, homeAddress: e.target.value })
        }
      />
      <button onClick={() => onSubmit(localContact)}>Update Contact</button>
    </div>
  );
}

function ContactList() {
  const { data: contacts, refetch } = useQuery("contacts", () => {
    return fetch("/api/contact").then(
      (res) => res.json() as Promise<Contact[]>
    );
  });

  if (!contacts) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <button onClick={() => refetch()}>Refresh</button>
      <ul>
        {contacts.map((contact) => (
          <li key={contact.id}>
            <ContactEditor
              contact={contact}
              onSubmit={(contact) => {
                fetch(`/api/contact/${contact.id}`, {
                  method: "POST",
                  body: JSON.stringify(contact),
                });
                refetch();
              }}
            />
          </li>
        ))}
      </ul>
    </div>
  );
}

So that we have:

• a query to fetch data;
• a local state in each editor, initialised using the prop;
• a useEffect to sync with the server state after updates

I'm not a huge fan of useEffect in general and I've tried to minimise its usages in our codebase, so this approach smells a bit to me.

Few other ideas that come to my mind:

1. keep the submit logic in the component and update the local state too. I don't like this because it makes testing harder as it couples the component with the update function. Also, it breaks if refetch is called from outside;
2. changing the cache state instead of having the local state. I don't know how I feel about this one honestly.

Do you reckon this is how it should be done, or am I not seeing some other better approach here?

[TkDodo]

I pretty much explain the possibilities in my blog:

https://tkdodo.eu/blog/react-query-and-forms

[lucabergamini]

I saw that blog, but I didn't feel it was answering the question because of how tied the solution is with react-hook-form. Translating it to our case:

The first proposed approach would require to keep track of 4 references in my example and would not allow to reflect data changes in the server as only the initial value is set in the inputs (unless a useEffect is again used to update the value of those refs).

The second one looks like what we want, but I think we would need to switch to react-hook-form for that, as a naive implementation with a useState which allows undefined would potentially not pass typescript checks if the original fields are required, so this works:

interface Contact {
  id: number;
  name?: string;
  email?: string;
  telephone?: string;
  homeAddress?: string;
}

function ContactEditor({
  contact,
  onSubmit,
}: {
  contact: Contact;

  onSubmit: (contact: Contact) => void;
}) {
  const [localContact, setLocalContact] = useState<Contact>({
    id: contact.id,
    name: undefined,
    email: undefined,
    telephone: undefined,
    homeAddress: undefined,
  });

  return (
    <div>
      <input
        value={localContact.name ?? contact.name}
        onChange={(e) =>
          setLocalContact({ ...localContact, name: e.target.value })
        }
      />
      <input
        value={localContact.email ?? contact.email}
        onChange={(e) =>
          setLocalContact({ ...localContact, email: e.target.value })
        }
      />
      <input
        value={localContact.telephone ?? contact.telephone}
        onChange={(e) =>
          setLocalContact({ ...localContact, telephone: e.target.value })
        }
      />
      <input
        value={localContact.homeAddress ?? contact.homeAddress}
        onChange={(e) =>
          setLocalContact({ ...localContact, homeAddress: e.target.value })
        }
      />
      <button
        onClick={() => {
          onSubmit(localContact);
          setLocalContact({
            id: contact.id,
            name: undefined,
            email: undefined,
            telephone: undefined,
            homeAddress: undefined,
          });
        }}
      >
        Update Contact
      </button>
    </div>
  );
}

but this doesn't :

interface Contact {
  id: number;
  name: string;
  email: string;
  telephone: string;
  homeAddress: string;
}

Anyway, I think this answer my question, maybe we should just move to react-hook-form for these cases.

Thanks a lot!

[TkDodo]

I'd probably make it useState<Partial<Contact>> in this case

[nleroy917]

@lucabergamini did this end up being the preferred solution? I am noticing a similar pattern as well, and I took the exact useEffect approach you did. I understand this to be an anti-pattern. Is react-hook-form the solution?