useFetchers

[MODES: framework, data]

Summary

Reference Documentation ↗

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 optimistic UI.

tsx

import { useFetchers } from "react-router";

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

Signature

tsx

function useFetchers(): (Fetcher & {
  key: string;
})[]

Returns

An array of all in-flight Fetchers, each with a unique key property.