React - history listen and unlisten with React Router v5
This is a quick example of how to register and unregister a location change listener in a React component with React Router v5. Location change listeners allow a component to listen to route changes in a React app and execute a function when they happen, it's important to unregister location change listeners (unlisten) when a React component unmounts to prevent memory leaks in an app.
The below code snippet is from a React + Recoil Login tutorial I posted recently, to see the code running in a live demo app check out React + Recoil - User Registration and Login Example & Tutorial.
React Alert Component with history.listen & unlisten
The alert component renders the alert from recoil state with bootstrap CSS classes, if the Recoil alert atom contains a null value nothing is rendered for the component.
The component registers a route change listener on mount in the useEffect() hook by calling the history.listen() function with the callback alertActions.clear which clears alert notifications on route change. The history.listen() function returns another function to unregister the listener when it is no longer needed, this is assigned to the unlisten variable and returned by the useEffect() hook so it will be called on component unmount.
import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { alertAtom } from '_state';
import { useAlertActions } from '_actions';
import { history } from '_helpers';
export { Alert };
function Alert() {
const alert = useRecoilValue(alertAtom);
const alertActions = useAlertActions();
useEffect(() => {
// clear alert on location change
const unlisten = history.listen(alertActions.clear);
// stop the listener when component unmounts
return unlisten;
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!alert) return null;
return (
<div className="container">
<div className="m-3">
<div className={`alert alert-dismissable ${alert.type}`}>
<a className="close" onClick={alertActions.clear}>×</a>
{alert.message}
</div>
</div>
</div>
);
}
Subscribe or Follow Me For Updates
Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.
- Subscribe on YouTube at https://www.youtube.com/JasonWatmore
- Follow me on Twitter at https://twitter.com/jason_watmore
- Follow me on Facebook at https://www.facebook.com/JasonWatmoreBlog
- Follow me on GitHub at https://github.com/cornflourblue
- Feed formats available: RSS, Atom, JSON
Other than coding...
I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.
- Subscribe on YouTube at https://www.youtube.com/TinaAndJason
- Follow us on Instagram at https://www.instagram.com/tinaandjason
- Follow us on Facebook at https://www.facebook.com/TinaAndJasonVlog
- Visit our website at https://tinaandjason.com.au
Need Some React Help?
Search fiverr to find help quickly from experienced React developers.
Support my work
