title: ReactJS- useEffect running again and again
body: <p>I am working on the ReactJS Project and in there I want a component which does something every time it renders but not every time something change in it.</p>
  <blockquote>
  <p>Dashboard.js</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import React, { useCallback, useEffect, useState } from 'react'
  import Product from './Product'
  import { database } from '../../firebase/firebase'
  
  const Dashboard = () =&gt; {
  
      const [defaults, setDefaults] = useState([])
      const [firstKey, setFirstKey] = useState('')
      const [lastKey, setLastKey] = useState('')
  
      const convertToArray = (data) =&gt; {
          const tempArray = []
          for (let product in data) {
              tempArray.push({
                  id: product,
                  amount: data[product]['amount'],
                  productName: data[product]['productName']
              })
          }
          return tempArray
      }
  
      const nextButtonListener = async () =&gt; {
          const nextData = await (await database.ref('/system').orderByKey().startAfter(lastKey).limitToFirst(10).once('value')).val()
  
          const keys = Object.keys(nextData)
  
          setFirstKey(keys[0])
          setLastKey(keys[keys.length - 1])
          setDefaults(oldDefaults =&gt; convertToArray(nextData))
      }
  
      const previousButtonListener = async () =&gt; {
          const previousData = await (await database.ref('/system').orderByKey().endBefore(firstKey).limitToLast(10).once('value')).val()
  
          const keys = Object.keys(previousData)
  
          setFirstKey(keys[0])
          setLastKey(keys[keys.length - 1])
          setDefaults(oldDefaults =&gt; convertToArray(previousData))
      }
  
      const firstPageLoad = async () =&gt; {
          const firstPage = await (await database.ref('/system').orderByKey().limitToFirst(10).once('value')).val()
          const keys = Object.keys(firstPage)
          setFirstKey(keys[0])
          setLastKey(keys[keys.length - 1])
          setDefaults(oldDefaults =&gt; convertToArray(firstPage))
      }
  
      useEffect(() =&gt; {
          console.log('Called')
          firstPageLoad()
          document.querySelector('#nextButton').addEventListener('click', nextButtonListener)
          document.querySelector('#previousButton').addEventListener('click', previousButtonListener)
  
          return () =&gt; {
              document.querySelector('#nextButton').removeEventListener('click', nextButtonListener)
              document.querySelector('#previousButton').removeEventListener('click', previousButtonListener)
          }
      }, [])
  
      return (
          &lt;div&gt;
              &lt;h2&gt;Dashboard&lt;/h2&gt;
              {defaults.map(product =&gt; {
                  return (&lt;Product key={product.id} product={{ id: product.id, amount: product.amount, name: product.productName }} /&gt;)
              }
              )}
              &lt;button id=&quot;nextButton&quot;&gt;Next&lt;/button&gt;
              &lt;button id=&quot;previousButton&quot;&gt;Previous&lt;/button&gt;
          &lt;/div&gt;
      )
  }
  
  export default Dashboard
  </code></pre>
  <blockquote>
  <p>Product.js</p>
  </blockquote>
  <pre class="lang-js prettyprint-override"><code>import React, { useContext, useEffect } from 'react'
  import { cartContext } from '../context/appContext'
  import { addProduct, removeProduct } from '../actions/cart'
  
  const Product = ({ product, isCart }) =&gt; {
  
      const { cartDispatch } = useContext(cartContext)
  
      return (
          &lt;div&gt;
              &lt;h3&gt;{product.name}&lt;/h3&gt;
              &lt;p&gt;Amount: {product.amount}&lt;/p&gt;
              {
                  isCart ?
                      (&lt;button onClick={() =&gt; { cartDispatch(removeProduct(product.id)) }}&gt;Remove&lt;/button&gt;) : (&lt;button onClick={() =&gt; { cartDispatch(addProduct(product)) }}&gt;Add to Cart&lt;/button&gt;)
              }
          &lt;/div&gt;
      )
  }
  
  export default Product
  </code></pre>
  <p>Now, everything renders perfectly but whenever I click on the button in <strong>Product</strong> , useEffect in <strong>Dashboard</strong> runs even though I have provided <strong>empty array</strong> as second arguement in useEffect method in MyComponent</p>