title: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How do I prevent this error?
body: <p>This is my code. I want to add a new expense item at the top of the list. I was hoping to get some help on how I can create a new expense at the top of the list. I keep getting the same error: Too many re-renders. React limits the number of renders to prevent an infinite loop. How can I fix this?</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Text, View, ScrollView } from &quot;react-native&quot;;
  import NewExpense from &quot;../NewExpense&quot;;
  import {
    selectTitle,
    selectPrice,
    selectCategory,
  } from &quot;../../slices/dataSlice&quot;;
  import { useSelector } from &quot;react-redux&quot;;
  
  const RenderedExpense = () =&gt; {
  
    const title = useSelector(selectTitle);
    const price = useSelector(selectPrice);
    const category = useSelector(selectCategory);
  
    const enteredData = {
      id: Math.random().toString(),
      title: title.disTitle,
      price: price.disPrice,
      category: category.disCategory,
    };
  
    const expense = enteredData;
  
      const [expenseItems, setExpenseItems] = useState([]);
      setExpenseItems([expense, ...expenseItems]);
  
  
    return (
      &lt;View&gt;
        {
          (title.disTitle,
          price.disPrice,
          category.disCategory ? &lt;NewExpense /&gt; : null)
        }
        {
          expenseItems.map(() =&gt; {
            &lt;NewExpense key={enteredData.id} /&gt; })
        }
      &lt;/View&gt;
    );
  };
  </code></pre>