Menu

gitpiper

useHash react Code Snippet in 2024

hooksstateeffectadvanced

Last Updated: 19 February 2024

Tracks the browser's location hash value, and allows changing it.

  • Use the useState() hook to lazily get the hash property of the Location object.
  • Use the useCallback() hook to create a handler that updates the state.
  • Use the useEffect() hook to add a listener for the 'hashchange' event when mounting and clean it up when unmounting.
  • Use the useCallback() hook to create a function that updates the hash property of the Location object with the given value.
const useHash = () => { const [hash, setHash] = React.useState(() => window.location.hash); const hashChangeHandler = React.useCallback(() => { setHash(window.location.hash); }, []); React.useEffect(() => { window.addEventListener('hashchange', hashChangeHandler); return () => { window.removeEventListener('hashchange', hashChangeHandler); }; }, []); const updateHash = React.useCallback( newHash => { if (newHash !== hash) window.location.hash = newHash; }, [hash] ); return [hash, updateHash]; };
const MyApp = () => { const [hash, setHash] = useHash(); React.useEffect(() => { setHash('#list'); }, []); return ( <> <p>window.location.href: {window.location.href}</p> <p>Edit hash: </p> <input value={hash} onChange={e => setHash(e.target.value)} /> </> ); }; ReactDOM.render(<MyApp />, document.getElementById('root'));

react snippet similar to useHash For You in February 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! ✌️