useFetchers

Returns an array of all in-flight fetchers. This is useful for components throughout the app that didn't create the fetchers but want to use their submissions to participate in an optimistic UI.

import { useFetchers } from "@remix-run/react";

function SomeComponent() {
  const fetchers = useFetchers();
  fetchers[0].formData; // FormData
  fetchers[0].state; // etc.
  // ...
}

The fetchers don't contain fetcher.Form, fetcher.submit, or fetcher.load, only the states like fetcher.formData, fetcher.state, etc.

Additional Resources

Discussions

• Form vs. Fetcher
• Pending, Optimistic UI

API

• useFetcher
• v3_fetcherPersist