Revalidation & Fetchers in React

import { useFetcher, useFetchers, useRevalidator } from 'react-router'

// Fetcher for non-navigation data loading
function NewsletterSignup() {
  const fetcher = useFetcher()

  return (
    <fetcher.Form method="post" action="/newsletter">
      <input name="email" type="email" />
      <button type="submit">
        {fetcher.state === "submitting" ? "Subscribing..." : "Subscribe"}
      </button>
    </fetcher.Form>
  )
}

// Manual revalidation
function RefreshButton() {
  const revalidator = useRevalidator()

  return (
    <button
      onClick={() => revalidator.revalidate()}
      disabled={revalidator.state === "loading"}
    >
      {revalidator.state === "loading" ? "Refreshing..." : "Refresh"}
    </button>
  )
}