title: problem with infinite loop in function hook useEffect
body: <p>I have a problem with an infinite loop on my hook,
  I'm passing the data of the local JSON breakfast. If you are iterating with map the data and I am taking it to paint a menu of buttons.
  If I remove the data at the end of the function, and leave the empty array, it sends me the following error:</p>
  
  <pre><code>const BreakfastComponent = () =&gt; {
  
     const breakfast = [
      {
        id: 0,
        name: "Sandwich de jamón y queso",
        price: '35',
        img: "https://i.ibb.co/ynC9xHZ/sandjc.png",
  
      },
      {
        id: 1,
        name: "Jugo Natural",
        price: '15',
        img: "https://i.ibb.co/8mrd4MK/orangejuice.png",
      },
      {
        id: 2,
        name: "Café americano",
        price: '20',
        img: "https://i.ibb.co/nsj1GL0/americancoffe.png",
      },
      {
        id: 3,
        name: "Café con leche",
        price: '28',
        img: "https://i.ibb.co/GRPBm7j/coffeandmilk.png",
      }
    ];
  
  
    const [stateProduct, setStateProduct] = useState([ ]);
  
  
    useEffect(() =&gt; {
  
      setStateProduct(breakfast);
    }, [breakfast]);
  
    return (
  
        &lt;section className="databreakfast"&gt;
          {stateProduct.map((element, item) =&gt;
            &lt;ButtonsBComponent
              key={item}
              {...element}
  
            /&gt;
          )}
          &lt;/section&gt;
  
  
  
    )
  };
  
  export default BreakfastComponent;
  </code></pre>
  
  <p>React Hook useEffect has a missing dependency: 'breakfast'. Either include it or remove the dependency array react-hooks/exhaustive-deps</p>