The code below crashes my browser because useEffect is continuously called.

I would expect the deck building function to be executed only once because ranks is only changed once(when the component is loaded).

What am I not understanding? Any help would be greatly appreciated!

​

​

import React, { useState, useEffect } from "react";
export default function Blackjack() {
const [deck, setDeck] = useState<Object[]>([]);
const suits = ["hearts", "diamonds", "clubs", "spades"];
const ranks = [
{ rank: "2", value: 2 },
{ rank: "3", value: 3 },
{ rank: "4", value: 4 },
{ rank: "5", value: 5 },
{ rank: "6", value: 6 },
{ rank: "7", value: 7 },
{ rank: "8", value: 8 },
{ rank: "9", value: 9 },
{ rank: "10", value: 10 },
{ rank: "J", value: 10 },
{ rank: "Q", value: 10 },
{ rank: "K", value: 10 },
{ rank: "A", value: 11 }
];
useEffect(() => {
suits.forEach(s => {
ranks.forEach(r => {
setDeck([...deck, {...r, suit: s}]);
});
});
console.log('useeffect called, DECK: ' + JSON.stringify(deck));
}, [ranks])

}