Warning error on destroy <Swipeable />

[Dumpinator]

Hello,

I have this warning on the Chrome browser when I delete the component by changing the state :

Warning: 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. in SwipeableWrapper (at TinderCards.js:36) in div (at TinderCards.js:35)

App.js

function App() {

  const [cats, setCats] = useState([])
  const [isLoaded, setIsLoaded] = useState(false)
  const [once, setOnce] = useState(false)
  const [count, setCount] = useState(1)
 
  const fetchData = async () => {
      try {
        setIsLoaded(true)
        const res = await axios.get('/cards')
        setCats(res.data)
        setOnce(true)
        setIsLoaded(false)
      } catch (error) {
        console.error(error)
      }
  }

  const onLiked = useCallback(() => {
    console.log('swipe à droite')
    const retiredCats = cats.slice(-1*count)
    const myId = retiredCats[0]._id
    const onRemoveCard = (id) => {
      setCats(
        cats.map((cat) => {
          if(cat._id === id) cat.statut = 'liked'
          return cat
        }))
      setCount(count => count+1)
    }
    onRemoveCard(myId)
  }, [count, cats])

  const onUnliked = useCallback(() => {
    console.log('swipe à gauche')
    const retiredCats = cats.slice(-1*count)
    const myId = retiredCats[0]._id
    const onRemoveCard = (id) => {
      setCats(
        cats.map((cat) => {
          if(cat._id === id) cat.statut = 'unliked'
          return cat
        }))
      setCount(count => count+1)
    }
    onRemoveCard(myId)
  }, [count, cats])

  useEffect(() => {
    if (once === false) { fetchData() }
    return () => {}
  }, [once, onUnliked, onLiked])

  return (
    <div className="app">
      <Header />
      <TinderCards cats={cats} isLoaded={isLoaded} onUnliked={onUnliked} onLiked={onLiked}/>
      <SwipeButtons onLiked={onLiked} onUnliked={onUnliked} />
    </div>
  )
}

export default App

TinderCards.js

import React, { useEffect } from 'react'
//import { v4 as uuidv4 } from 'uuid'
import { Swipeable, direction } from 'react-deck-swiper'
import './TinderCards.css'

function TinderCards(props) {
    //console.log('props debut', props)
    const { cats, isLoaded, onUnliked, onLiked } = props
    //console.log(onUnliked);
    useEffect(() => {
        
    }, [isLoaded, cats, onUnliked])

    const handleOnSwipe = (swipeDirection) => {
        console.log(swipeDirection)

        if (swipeDirection === direction.RIGHT) {
            onLiked()
            return;
        }
        if (swipeDirection === direction.LEFT) {
            onUnliked()
            return;
        }
        //console.log('end swipe');
    }

    

  //console.log('props end', props)
    return (
        <div className='tinderCards'>
            <div className="tinderCards__cardContainer">
                { !isLoaded ? cats.filter(cat => cat.statut === 'empty').map( cat => 
                        <div className='swipe' key={cat._id} id={ cat._id }>
                            <Swipeable onSwipe={handleOnSwipe}>
                                <div className='card' style={{ backgroundImage: `url(${cat.imgUrl})` }}>
                                    <div className='description'>
                                        <h3 >{cat.name}</h3>
                                    </div>
                                </div>
                            </Swipeable>
                        </div>
                    )
                    : "LOADING.." 
                }
            </div>
        </div>
    )
}

export default TinderCards

I come to modify the state and the status property and then I filter the state in the map that generates my cards.
I guess it's when I call the onUnliked or onLiked function that's gone props in Swipeable and this one gets deleted.
If someone can give me some guidance on how to change that, I guess drag and drop is a bit special, thanks in advance.

[jamesattard]

I get the same warning as well