BuildWithMatija
  1. Home
  3. Blog
  5. Remix
  7. 2 Ways to Build Live Search in Remix (Without Page Reloads)

2 Ways to Build Live Search in Remix (Without Page Reloads)

Explore two ways to build search in Remix. The classic form-based method and the more dynamic, programmable approach

13th July 2025··
Remix
2 Ways to Build Live Search in Remix (Without Page Reloads)

📖 Practical Remix Implementation Guides

Comprehensive guides covering Remix patterns, optimization techniques, and developer shortcuts. Plus code snippets and prompts to speed up your workflow.

No spam. Unsubscribe anytime.

📄View markdown version
10

About the author

Matija Žiberna

Matija Žiberna

Full-stack developer, co-founder

AboutResume

Self-taught full-stack developer sharing lessons from building software and startups.

I'm Matija Žiberna, a self-taught full-stack developer and co-founder passionate about building products, writing clean code, and figuring out how to turn ideas into businesses. I write about web development with Next.js, lessons from entrepreneurship, and the journey of learning by doing. My goal is to provide value through code—whether it's through tools, content, or real-world software.

Contents

  • 1. Classic `<Form method="GET">` — Submit on Enter
  • How it works
  • Example
  • Pros and Cons
  • When to use it
  • 2. `useFetcher` — Instant Live Search
  • How it works
  • Example (with debounce and optional URL sync)
  • Pros and Cons
  • When to use it
  • Decision Matrix
  • Key Takeaways
On this page:
  • 1. Classic `<Form method="GET">` — Submit on Enter
  • 2. `useFetcher` — Instant Live Search
  • Decision Matrix
  • Key Takeaways
Build with Matija logo

Build with Matija

Modern websites, content systems, and AI workflows built for long-term growth.

Services

  • Headless CMS Websites
  • Next.js & Headless CMS Advisory
  • AI Systems & Automation
  • Website & Content Audit

Resources

  • Case Studies
  • How I Work
  • Blog
  • Topics
  • CMS Hub
  • E-commerce Hub
  • B2B Website Strategy
  • Dashboard

Headless CMS

  • Payload CMS Developer
  • CMS Migration
  • Multi-Tenant CMS
  • Payload vs Sanity
  • Payload vs WordPress
  • Payload vs Contentful

Get in Touch

Ready to modernize your stack? Let's talk about what you're building.

Book a discovery callContact me →
© 2026Build with Matija•All rights reserved•Privacy Policy•Terms of Service
BuildWithMatija
Get In Touch

Dynamic search (also called live search or type-ahead) is a staple UX pattern. In Remix, there are two canonical ways to fetch new data as the user types, without a full page reload.

Both patterns are first-class Remix techniques. Use the one that matches your UX goals.

1. Classic <Form method="GET"> — Submit on Enter

How it works

  1. The user types in an input field.
  2. When they press Enter (or click a submit button), the browser performs a GET request.
  3. Remix runs the loader for the route.
  4. The page navigates to the updated URL (for example, ?search=apple).
  5. The loader returns filtered data, and the component re-renders.

Example

tsx
// routes/search.tsx

export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const query = url.searchParams.get("search") ?? "";
  const results = query ? await fetchProducts(query) : [];
  return json({ results, query });
};

export default function SearchPage() {
  const { results, query } = useLoaderData<typeof loader>();
  const [search, setSearch] = useState(query);

  return (
    <Form method="GET">
      <TextField
        label="Product"
        name="search"
        value={search}
        onChange={setSearch}
        autoComplete="off"
      />

      {/* Optional submit button */}
      {/* <button type="submit">Search</button> */}

      <ResultsList items={results} />
    </Form>
  );
}

Pros and Cons

ProsCons
UXSimple behavior. The URL is always up to date and shareable.Requires pressing Enter to submit.
DevNo extra hooks or state handling needed.Causes full navigation, so scroll position resets and parent loaders run again.

When to use it

  • You want a basic search that submits on Enter.
  • You want the URL to reflect the current query for sharing or bookmarking.
  • You prefer the simplest possible code.

2. useFetcher — Instant Live Search

How it works

  1. The user types.
  2. In the input’s onChange, you call fetcher.submit({ search }, { method: "GET" }).
  3. Remix runs the same loader.
  4. The page does not navigate; the loader result goes into fetcher.data.
  5. You render the results from fetcher.data for a fluid, real-time experience.

Example (with debounce and optional URL sync)

tsx
// routes/search.tsx
import debounce from "lodash.debounce";

export default function SearchPage() {
  const loaderData = useLoaderData<typeof loader>();
  const fetcher = useFetcher<typeof loader>();

  const [search, setSearch] = useState(loaderData.query);
  const results = fetcher.data?.results ?? loaderData.results;

  const debouncedSubmit = useMemo(
    () =>
      debounce((value: string) => {
        fetcher.submit({ search: value }, { method: "GET" });
      }, 300),
    [fetcher]
  );

  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    if (search) params.set("search", search);
    else params.delete("search");
    window.history.replaceState(null, "", `?${params.toString()}`);
  }, [search]);

  const handleSearch = (value: string) => {
    setSearch(value);
    debouncedSubmit(value);
  };

  return (
    <>
      <TextField
        label="Product"
        value={search}
        onChange={handleSearch}
        autoComplete="off"
      />
      <ResultsList items={results} />
    </>
  );
}

Pros and Cons

ProsCons
UXLive results with no page reload. Scroll and other state stay intact.Needs extra code for debounce and optional URL sync.
DevReuses the same loader logic. No redundant queries.You must handle fetcher.data typing.

When to use it

  • You want type-ahead search with instant feedback.
  • Avoiding full navigation is important (for example, you have large parent loaders).
  • You want fine-grained control over network calls and history.

Decision Matrix

ScenarioRecommended Pattern
Search on Enter or Submit Button<Form method="GET">
Live search while typinguseFetcher
Shareable URLEither works; <Form> handles it automatically, useFetcher needs manual history sync.
Expensive parent loaders you want to avoiduseFetcher
Simplest implementation<Form>

Key Takeaways

  • For traditional search where the user confirms the input, <Form method="GET"> is straightforward, keeps your URL in sync, and is SEO-friendly.
  • For dynamic, instant search, useFetcher allows live updates without a full reload, but you handle debouncing and history updates.
  • Both approaches reuse your loader logic — no need to duplicate queries or validation.

Use the right tool for the UX you want. Keep the loader as your single source of truth. And if you go with useFetcher, debounce your requests to avoid overwhelming your server.

Thanks, Matija