Typed state, living in the URL

export const form: Form = {
  name: '',
  age: undefined,
  agree_to_terms: false,
  tags: [],
};

// use `Type` not `Interface`!
type Form = {
  name: string;
  age?: number;
  agree_to_terms: boolean;
  tags: { id: string; value: { text: string; time: Date } }[];
};

import { useUrlState } from 'state-in-url/astro';
import { form } from './form';

// One hook per feature - the whole API for this state.
// searchParams is the island prop: with it the server render matches the URL
export const useFormState = (searchParams?: Record<string, string>) =>
  useUrlState(form, { searchParams });

---
import { ComponentA } from '../components/ComponentA';
import { ComponentB } from '../components/ComponentB';

// A plain object: island props are serialized, URLSearchParams is not
const searchParams = Object.fromEntries(Astro.url.searchParams);
---

<ComponentA client:load searchParams={searchParams} />
<ComponentB client:load searchParams={searchParams} />

import { useFormState } from './useFormState';

export const ComponentA = ({ searchParams }: { searchParams?: Record<string, string> }) => {
  // see docs for all possible params https://github.com/asmyshlyaev177/state-in-url/tree/master/packages/urlstate/astro/useUrlState
  const { urlState, setUrl, setState } = useFormState(searchParams);

  return <>
    <input
      id="name"
      value={urlState.name} 
      onChange={(ev) => setUrl({ name: ev.target.value })}
      />
    // OR can update state immediately but sync change to url as needed
    <input
      value={urlState.name}
      onChange={(ev) => { setState(curr => ({ ...curr, name: ev.target.value })) }}
      onBlur={() => setUrl()}
    />
    <button onClick={() => setUrl((curr, initial) => initial)}>
      Reset
    </button>
    </>
};

import { useFormState } from './useFormState';

export const ComponentB = ({ searchParams }: { searchParams?: Record<string, string> }) => {
  // same state as ComponentA - a separate island, no props between them, no context
  const { urlState } = useFormState(searchParams);

// will be defaultValue from `form` if not in url, no need to check

  return <div>name: {urlState.name}</div>
};

import React from 'react';
import { useUrlState } from 'state-in-url/astro';
import { form } from './form';

export const useFormState = (searchParams?: Record<string, string>) => {
  const { urlState, setUrl: setUrlBase, reset } = useUrlState(form, { searchParams });

  // first navigation will push new history entry
  // all following will just replace that entry
  // this way will have history with only 2 entries - ['/url', '/url?key=param']

  const replace = React.useRef(false);
  const setUrl = React.useCallback((
      state: Parameters<typeof setUrlBase>[0],
      opts?: Parameters<typeof setUrlBase>[1]
    ) => {
      setUrlBase(state, { replace: replace.current, ...opts });
      replace.current = true;
  }, [setUrlBase]);

  return { urlState, setUrl, resetUrl: reset };
};