title: How to update useState() when value changes in React
body: <p>I am having trouble on changing count value in React.</p>
  <p>I have dynamic set, and I want to render the size of set whenever it changes!</p>
  <p>So I want to keep update <strong>count</strong> variable to <strong>ratedSet.size</strong> whenever the ratedSet's size changes.</p>
  <p>I get it that useSet wont render again until whenever the thing ends so I tried to use useEffect and it still won't work. I think i am not using it correctly.</p>
  <p><strong>How can I show the size of set whenever it changes ?</strong></p>
  <p>Below are my Code. I added few comments on what i tried to do:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useState } from &quot;react&quot;;
  import BoardCardMain from &quot;./component/BoardCardSurvey&quot;;
  //other import statements
  
  export default function Survey() {
    const [gameList, setGameList] = useState&lt;Game[]&gt;([]);
    const [count, setCount] = useState(0); //This is the count variable that I want to keep update
    const [width] = useState(window.innerWidth);
    let ratedSet = new Set(); //this is the set that I want to keep track of
    let cnt = 0;
  
    useEffect(() =&gt; {
      setGameList(tempData.gameList);
    }, []);
  
  // I tried to do this but im not even close to answer...
    useEffect(() =&gt; {
      setCount(ratedSet.size);
    }, [ratedSet.size]);
  
    //This is the part I am changing the size of set dynamically
    //I am getting gameNo and score from child tsx, and am updating the set based on it
    const countHandler = (ratedGameNo: number, score: number) =&gt; {
      if (score &gt; 0) {
        ratedSet.add(ratedGameNo);
      } else {
        ratedSet.forEach((item) =&gt; {
          if (item === ratedGameNo) {
            ratedSet.delete(item);
          }
        });
      }
  //So here, if I console.log(ratedSet.size), it gives me correct values.
  //but if i do setCount(ratedSet.size) it only updates once and never change again
    };
    return (
      &lt;&gt;
  
        SIZE IS : {count}
        SIZE IS : {ratedSet.size}
        None of them works 
       
        &lt;Box&gt; I am updating my set with below map : &lt;/Box&gt;
  
          &lt;Container style={{ marginTop: 20, padding: 10 }}&gt;
            &lt;Grid container spacing={2}&gt;
              {gameList.map((game) =&gt; (
                &lt;BoardCardMain
                  key={game.gameNo}
                  game={game}
                  parentCallback={countHandler}
                &gt;&lt;/BoardCardMain&gt;
              ))}
            &lt;/Grid&gt;
          &lt;/Container&gt;
      &lt;/&gt;
    );
  }
  const tempData = {
    gameList: [
      {
        gameNo: 1,
        gameImg:
          &quot;https:/&quot;,
      },
      {
        gameNo: 12,
        gameImg:
          &quot;https://&quot;,
      },
      {
        gameNo: 2,
        gameImg:
          &quot;https://r&quot;,
      },
    ],
  };
  
  </code></pre>