title: React Hooks - useEffect still being called even when object is empty
body: <p>I have a question on React Hooks.  This is a sample of my code :-</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Card from &quot;./Card&quot;;
  
  const CardsBoard = () =&gt; {
  
    useEffect(() =&gt; {
      doRatingClickProcessing()
    }, [ratingObj])
  
    const doRatingClickProcessing = () =&gt; {
      const { player, title, rating } = ratingObj
    }
  
    return (
      &lt;div className=&quot;container-fluid justify-content-center&quot;&gt;
          &lt;div className=&quot;row&quot;&gt;
            &lt;div className=&quot;col-md-6&quot;&gt;
              &lt;Card
                cardInfo={player1Card}
                player={1}
                showCard={visiblePl1}
                clickableRatings = {clickableRatings}
                onClick={ratingObj =&gt; setRatingObj(ratingObj)}
              /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;col-md-6&quot;&gt;
              &lt;Card
                cardInfo={player2Card}
                player={2}
                showCard={visiblePl2}
                clickableRatings = {clickableRatings}
                onClick={ratingObj =&gt; setRatingObj(ratingObj)}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    )
  }
  
  export default CardsBoard
  </code></pre>
  <p>Then in the card component I am returning the <code>ratingObj</code> successfully when the user clicks on a rating.</p>
  <p>In the Card Component I have something like this:-</p>
  <pre><code>          &lt;div
              className=&quot;col-md-2 text-left card-rating-color&quot;
              onClick={() =&gt;
                onClick({
                  player: player,
                  title: row[0].title,
                  rating: row[0].rating,
                })
              }
            &gt;
              {row[0].rating}
            &lt;/div&gt;
  </code></pre>
  <p>However I am puzzled why <code>useEffect()</code> is triggered even when the Card component is loaded, and <code>ratingObj</code> is still empty.  Shouldn't it be triggered only if the <code>ratingObj</code> is filled up?</p>
  <p>Thanks for your help and time</p>