v2.10.0: `useSyncExternalStore`
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 fromwouter/use-location
for subscribing tolocation.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.