title: Infinite loop when adding new element to an array React
body: <p><strong>The problem is the following:</strong> </p>
  
  <p>when I receive <code>props</code> from <code>parent component</code> with the <code>data</code> of a <code>new element</code>, A new card must be added, but instead of it, the code starts to add this card an <code>infinite number of times</code>.</p>
  
  <p>How to fix this? Code is below</p>
  
  <pre><code>const fetchCards = () =&gt; {
    return Axios(apiOptions('GET')).then(
      response =&gt; response.data,
      error =&gt; {
        console.log(`[Error]: ${error}`);
      }
    );
  };
  const addCard = props =&gt; {
    return Axios(apiOptions('POST', props))
      .then(result =&gt; result.data)
      .catch(error =&gt; console.log(error));
  };
  const PlacesList = props =&gt; {
    const [cards, setCards] = useState([]);
  
    useEffect(() =&gt; {
      fetchCards().then(res =&gt; setCards(res))
    }, []);
  
  // Problem with this part 
  
    if (props.newCard.titleValue !== undefined) {
        console.log(props.newCard.titleValue);
        addCard(props.newCard).then(res =&gt; setCards(cards.concat(res)));
      }
  
  
  const createCards = () =&gt; {
      return cards
        .map((card, id) =&gt; {
          if (id &gt; cards.length - 10) {
            return (
              &lt;PlaceCard
                title={card.name}
                url={card.link}
              /&gt;
            );
          }
          return false;
        })
        .reverse();
    };
  
    return &lt;div className="places-list root__section"&gt;{createCards()}&lt;/div&gt;;
  };
  export default PlacesList;
  
  </code></pre>
  
  <p>Simplified example <a href="https://codesandbox.io/s/infallible-tree-e9di4?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">Codesandbox</a></p>