React how to solve a memory leak - reactjs

Question

I am getting the following error:
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.
This is being caused by the following hooks based component
import { animated, config, useTransition } from 'react-spring'
import styled from 'styled-components'
import React, { useState, useEffect } from 'react'
const ProductImage = styled(animated.div)`
background: ${({ colour }) => colour} url(${({ image }) => image}) no-repeat center;
background-size: cover;
transition: background-image 0.2s ease-in-out;
width: 100%;
height: 100%;
`
interface Props {
images: string[]
colour?: string
}
const Gallery = ({ images, colour }: Props) => {
const [index, set] = useState(0)
const transitions = useTransition(images[index], image => image, {
from: { opacity: 0 },
enter: { opacity: 1 },
leave: { opacity: 0 },
config: config.molasses
})
useEffect(() => void setInterval(() => set(state => (state + 1) % images.length), 5000), [])
return (
<>
{transitions.map(({ item, props, key }) => (
<ProductImage key={key} image={item} style={props} colour={colour} />
))}
</>
)
}
export default Gallery
I think that the set() method is being called after leaving the page. Normally I would handle this inside a componentDidUnmount() method, where I could set some flag to stop the call. I am unsure what to do when using hooks. Does anyone know how to solve this?

Answer 1

The problem is this effect:
useEffect(() => void setInterval(() => set(state => (state + 1) % images.length), 5000), [])
This starts an interval that never ends. You need to tell useEffect how to cleanup your effect by returning a cleanup function:
useEffect(() => {
const id = setInterval(() => set(state => (state + 1) % images.length, 5000)
// return cleanup method
return () => clearInterval(id);
}, []);