How to apply optimistic UI when navigating to another route in action function?

[kennyhei]

Simple use case here, I have two routes/pages:

• Home (/home): Renders a list of items
• Add item (/add-item): Page with form where you can add new item

Now when I navigate to "Add item" page, fill out the form and submit it, I make POST request to backend so that new item is added to DB. In this case I don't want to wait for the request to finish before navigating back to home page.

Instead I want to navigate to home page right away and optimistically update the list of rendered items with the form data I submitted. And when the request is finished, I want to again use just the real data from loader. How can I do this? Docs only cover how to do optimistic updates on the same page.

Example project (see comments in code): https://stackblitz.com/edit/github-ljo9w9-ujym5o?file=src%2FApp.tsx

So far I have found one workaround where we forget about action function and Form and instead use navigate + useLocation:

function AddItem() {
  const [name, setName] = useState('');

  const addItem = async () => {
    navigate("/", { state: { newItem: { name } } });
    await postItem(...)
    navigate("/")
  }

  return (
    <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
    <button onClick={addItem}>Add item</button>
  )
}

function Home() {
  const data = useLoaderData();
  const location = useLocation();
  const items = location.state?.newItem ? [...data, location.state.newItem] : data;
  ...
}

Kinda hacky or not?