How to fix update on unmounted component? - reactjs

Question

Hello i have an function for a lightbox but when i opend the lightbox i get a warning that i can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. Can anyone help me to fix this?
export function ImageLightBox({ image }) {
const KEY_ESC = 27
const [visible, setVisible] = React.useState(false)
return (
<div className={cx(styles.component )} aria-modal='true'>
<Lightbox {...{ visible, image }} onClose={() => setVisible(false)} />
<div className={styles.content}>
<img className={styles.image} src={image.src} width={image.width} alt={image.alt} height={image.height} />
<div className={styles.buttonOpen}><LinkSecondary onClick={OpenLightbox} iconLeft={iconZoom}>Vergroot</LinkSecondary></div>
</div>
</div>
)
function OpenLightbox() {
window.addEventListener('keydown', handleKeyDown)
setVisible(true)
function handleKeyDown(e) {
if (e.which === KEY_ESC) setVisible(false)
}
}
}
function Lightbox({ visible, onClose, image }) {
const animatedBackground = useTransition(!visible, null, {
from: { opacity: 0, position: 'absolute' },
enter: { opacity: 1, position: 'absolute' },
leave: { opacity: 0, position: 'absolute' },
config: config.gentle,
})
const portalNode = usePortalNode(visible ? '_rootImageWithLightbox' : '_rootImageWithLightbox-default')
return portalNode && ReactDOM.createPortal(
animatedBackground.map(({ props, key }) => (
visible && <animated.div style={props} key={key} className={styles.componentLightbox}>
<div className={styles.buttonClose}><LinkPrimary hideText onClick={onClose} iconRight={closeSvg}>Sluiten</LinkPrimary></div>
<img className={styles.imageLightbox} srcSet={image.lightboxSrcSet} src={image.lightboxSrc} alt={image.alt} />
<div onClick={onClose} className={styles.backdrop} />
</animated.div>
))
, portalNode
)
}

Answer 1

its always a good idea to any subscription; so remove keydown event listener when component unmounts;
useEffect(() => {
return () => {
window.removeEventListener('keydown')
}
}, [])
and also I suspect this onClose={() => setVisible(false)} line; since setState is async and parent component might be unmounted but onClose callback would be run in the portal (child) component and hence the warning.

Answer 2

try to add listener when your component mounts (componentDidMount or useEffect).
The problem in your code is you add the listener inside a function, and every it is called, it will always start listening.
i would add to #Leonardo answers
useEffect(()=>{
const handleKeydown = ()=>{
// your implementations here
// and yes, you define the handleKeydown here inside useEffect
}
window.addListener('keydown', handleKeydown)
// this peace of code will be run when your component unmounts
return window.removeListener('keydown');
// this [] means it only run once on mount.
},[])