molefrog/wouter v2.10.0

v2.10.0: `useSyncExternalStore`

on GitHub

In this alpha release, we're migrating useLocation hook to useSyncExternalStore under the hood (the new API for subscribing to external state sources compatible for concurrent mode).

This hook is available in React 18, for all earlier versions we've included a shim. We've also done some heavy refactoring which should lead to better performance and new features such as:

• useSearch exported from wouter/use-location for subscribing to location.search
• useLocationProperty for subscribing to arbitrary location updates.
• Standalone navigate with stable reference and no dependency on current location, which means that your components that only perform navigation won't have unnecessary re-renders.

import { useSearch, useLocationProperty, navigate } from 'wouter/use-location';

// get all search params:
const search = useSearch();

// set all search params:
navigate("?name=john");

// get individual search param (will not trigger a re-render if other params change! 🎉 )
const nameValue = useLocationProperty(() => new URLSearchParams(window.location.search).get("name"));

// set individual search param:
const params = new URLSearchParams(window.location.search);
params.set("name", "john");
navigate("?" + params.toString()); 

Thanks @HansBrende for their contribution.