useFetchers

Returns an array of all inflight fetchers. This is useful for components throughout the app that didn't create the fetchers but want to use their submissions to participate in 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