The result was fragile spaghetti code: components re-rendering unpredictably, browser back buttons breaking navigation history, and megabytes of JavaScript shipped merely to maintain state that already had a natural home.

The URL is Your Best Global State Manager

Consider a search filter on a catalog page. If you store the active filter in a Redux slice or Zustand store, the user cannot bookmark the page, cannot share the URL with a colleague, and loses their state on refresh.

// Storing search state directly in URL SearchParams
export function useFilterState() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const activeCategory = searchParams.get('cat') || 'all';

  const setCategory = (cat: string) => {
    const params = new URLSearchParams(searchParams);
    params.set('cat', cat);
    router.replace(`?${params.toString()}`, { scroll: false });
  };

  return { activeCategory, setCategory };
}

By storing shareable state in the URL and transient UI state (such as dropdown toggles or hover previews) in local useState, your application becomes inherently shareable, resilient, and fast.

Three Rules for Clean State

1. If it should be shareable or bookmarkable, put it in the URL.
2. If it only matters to this single DOM branch, keep it in local component state.
3. If it comes from the server, let server components or a cache layer handle it without duplication.