title: In React useEffect doesn't update after the value has changed from other component
body: <p>I am trying to do some kind of online shop for myself and I got a problem.
  I want to render my shopping cart size in the <code>NavBar</code> component (which is on every page).</p>
  
  <p>I created a Cart Items service where I put all my added items, and it also has functions to <code>addItem</code>, <code>removeItem</code>, <code>getCart</code>, <code>getCartSize</code>. </p>
  
  <p>When I click on Add/Remove on specific product, I would like to do that the value on <code>NavBar</code> with cart size would be changing depending on the cart size (from <code>getCartSize</code> method). I already tried to use <code>useEffect</code> hook, but it does not recognize when the value of <code>cartSize</code> is changed, how can I do that?</p>
  
  <p>This is what I have done already.</p>
  
  <p><code>navbar.jsx</code>:</p>
  
  <pre><code>//...
  //...
  import {getTotalCount} from '../../services/myCart';
  
  export default function Navbar() {
    // ...
    const [count, setCount] = useState();  
  
    useEffect(() =&gt; {
      setCount(getTotalCount());
      console.log('counto useeffect');
    },[getTotalCount()]);
    //},[getTotalCount]); doesn'work also.
    //},[count]); doesn'work also.
  
    return (
      &lt;&gt;
          &lt;header className="navbar"&gt;
                  &lt;Link className="navbar__list-item__home-icon" to="/"&gt;&lt;span&gt;&lt;FaHome/&gt;&lt;/span&gt;&lt;/Link&gt;
                  &lt;Link className="navbar__list-item" to="/products"&gt;Products&lt;/Link&gt;            
                  &lt;h2&gt;cart size--&gt; {count}&lt;/h2&gt;
                  &lt;Link className="navbar__list-item__cart-img" to="shopping-cart"&gt;&lt;span&gt;&lt;FaShoppingCart/&gt;&lt;/span&gt;&lt;/Link&gt;   
          &lt;/header&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p><code>myCart.js</code> all functions work fine and I call them when I click add/remove button in on my component in the products page. </p>
  
  <pre><code>var InTheCart = [
  
  ];
  var totalCount = 0;
  
  export function AddToCart(item) {
      // ... logic
      totalCount++;
  }
  
  export function ContainsInTheCart(id) {
      return InTheCart.findIndex(x=&gt; x.item.id == id) != -1 ? true: false;   
  }
  
  export function RemoveFromCart(id) {
     // ... logic
          totalCount--;
  }
  
  export function getCart() {
      return InTheCart;
  }
  
  export function getTotalCount() {
      return totalCount;
  }
  
  
  </code></pre>