When a Transition component never reaches the exited state in React 18
After upgrading to React 18, I ran into an issue where a Transition component would never reach the exited
state. Specifically it happens when navigating to a new route whose components were loaded using Suspense and React.lazy.
As is typical, I found someone else facing a very similar issue, but no workaround or fix was posted.
For me the answer was to give the Transition
component a unique key
prop, e.g.
const Example = () => {
// Pull a key from Reach Router
const { key } = useLocation();
return (
<Transition
key={key}
// etc...
Et voila! The transitions work properly again.