React-native infinite re-renders

Question

I am build a replica of the 2048 game.

I am working on the animations right now and I seem to get infinite re-renders for some reason when updating the state with any kind of array.

It seems that passing anything but an array to 'setAppearAnimations' works fine.

Thanks in advance:)

const GameProvider = (props) => {
  const [appearAnimations, setAppearAnimations] = useState([])

  const addAppearAnimation = (animation) => {
    const newAppearAnimations = appearAnimations.concat([animation])
    console.log(newAppearAnimations)
    setAppearAnimations(newAppearAnimations)
  }

const Piece = ({ piece }) => {      
   const { value, prevX, prevY, x, y, hasJustAppeared } = piece      
   let appearAnimation = 1
   useEffect(() => {
       //Add appear animation       
       if (hasJustAppeared) {
           appearAnimation = new Animated.Value(0)         
           addAppearAnimation(appearAnimation)
       }
     }, [])

Answer 1

I changed the way the animations are being called so now i declare it inside A Piece component and start it inside a 'useEffect' inside it.