Retour aux articles

Ce hook de React sauvegarde un paramètre URL sans recharger la page !

Ce hook permet de changer un paramètre d'URL sans recharger la page
1 minutes de lecture- 95 vues

J'ai découvert ce hook il y a quelques jours sur le Discord de Remix. Encore mieux que le hook useSearchParams(), qui permet de modifier les paramètres dans l'URL. Il effectue également un rechargement des données côté serveur (et donc, de la page).

useUpdateQueryStringValueWithoutNavigation

Je souhaitais éviter de recharger la page à chaque fois, et j'ai découvert useUpdateQueryStringWithoutNavigation.

Lien vers le hook : https://github.com/kentcdodds/kentcdodds.com/blob/main/app/utils/misc.tsx#L299

useUpdateQueryStringValueWithoutNavigation.tsx
function useUpdateQueryStringValueWithoutNavigation(
queryKey: string,
queryValue: string,
) {
React.useEffect(() => {
const currentSearchParams = new URLSearchParams(window.location.search)
const oldQuery = currentSearchParams.get(queryKey) ?? ''
if (queryValue === oldQuery) return

if (queryValue) {
currentSearchParams.set(queryKey, queryValue)
} else {
currentSearchParams.delete(queryKey)
}
const newUrl = [window.location.pathname, currentSearchParams.toString()]
.filter(Boolean)
.join('?')
// alright, let's talk about this...
// Normally with remix, you'd update the params via useSearchParams from react-router-dom
// and updating the search params will trigger the search to update for you.
// However, it also triggers a navigation to the new url, which will trigger
// the loader to run which we do not want because all our data is already
// on the client and we're just doing client-side filtering of data we
// already have. So we manually call `window.history.pushState` to avoid
// the router from triggering the loader.
window.history.replaceState(null, '', newUrl)
}, [queryKey, queryValue])
}

Rejoins la

newsletter