Function useFetcher

  • useFetcher<T>(__namedParameters?): FetcherWithComponents<SerializeFrom<T>>

  • Useful for creating complex, dynamic user interfaces that require multiple, concurrent data interactions without causing a navigation.

    Fetchers track their own, independent state and can be used to load data, submit forms, and generally interact with loaders and actions.

    import { useFetcher } from "react-router"

    function SomeComponent() {
      let fetcher = useFetcher()

      // states are available on the fetcher
      fetcher.state // "idle" | "loading" | "submitting"
      fetcher.data // the data returned from the action or loader

      // render a form
      <fetcher.Form method="post" />

      // load data
      fetcher.load("/some/route")

      // submit data
      fetcher.submit(someFormRef, { method: "post" })
      fetcher.submit(someData, {
        method: "post",
        encType: "application/json"
      })
    }

    Type Parameters

    • T = any

    Parameters

    • __namedParameters: {
          key?: string;
      } = {}
      • Optionalkey?: string

        By default, useFetcher generate a unique fetcher scoped to that component. If you want to identify a fetcher with your own key such that you can access it from elsewhere in your app, you can do that with the key option:

        function SomeComp() {
          let fetcher = useFetcher({ key: "my-key" })
          // ...
        }

        // Somewhere else
        function AnotherComp() {
          // this will be the same fetcher, sharing the state across the app
          let fetcher = useFetcher({ key: "my-key" });
          // ...
        }

    Returns FetcherWithComponents<SerializeFrom<T>>

Settings

Member Visibility