Menu

gitpiper

useSearchParam react Code Snippet in 2024

hooksstateeffectintermediate

Last Updated: 19 March 2024

Tracks the browser's location search param.

  • Use the useCallback() hook to create a callback that uses new URLSearchParams() to get the current value of param.
  • Use the useState() hook to create a state variable that holds the current value of the param.
  • Use the useEffect() hook to set appropriate event listeners to update the state variable when mounting and clean them up when unmounting.
const useSearchParam = param => { const getValue = React.useCallback( () => new URLSearchParams(window.location.search).get(param), [param] ); const [value, setValue] = React.useState(getValue); React.useEffect(() => { const onChange = () => { setValue(getValue()); }; window.addEventListener('popstate', onChange); window.addEventListener('pushstate', onChange); window.addEventListener('replacestate', onChange); return () => { window.removeEventListener('popstate', onChange); window.removeEventListener('pushstate', onChange); window.removeEventListener('replacestate', onChange); }; }, []); return value; };
const MyApp = () => { const post = useSearchParam('post'); return ( <> <p>Post param value: {post || 'null'}</p> <button onClick={() => history.pushState({}, '', location.pathname + '?post=42') } > View post 42 </button> <button onClick={() => history.pushState({}, '', location.pathname)}> Exit </button> </> ); }; ReactDOM.render(<MyApp />, document.getElementById('root'));

react snippet similar to useSearchParam For You in March 2024

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2024 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️