title: React Hooks to Implement Counter
body: <p>I'm trying to use React hooks (useState &amp; useEffect) in a component to show a vote count. After the user clicks up/down the 'vote' state should be increment or decremented and then the app makes an API call to PATCH the "votes" count in the database. The original vote count is coming from props passed from the parent component. But for some reason, the initial state for the votes is always 0 -- even though when I console.log the props it shows the correct number of votes? </p>
  
  <p>PATCH request seems to be working fine, but something with hooks I think is wrong. Thanks in advance for any help I can get on this!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default function Votes(props) {
      const { item, voteCount, itemType } = props
      const [votes, setVotes] = useState(voteCount || 0)
  
      useEffect(() =&gt; {
          if (itemType == 'question') {
                  questionApiService.updateQuestionFields({
                      questionId: item.id, 
                      questionFields : { votes: `${votes}` }
                  })
              } else if (itemType === 'answer') {
                  console.log('answer')
                  // questionApiService.updateAnswerFields({
                  //     answerId: item.id,
                  //     answerFields: { votes: votes }
                  //})
              }
          }, [votes])
  
      const handleClick = e =&gt; {
          e.currentTarget.id === "increment"
              ? setVotes(prevCount =&gt; prevCount + 1)
              : setVotes(prevCount =&gt; prevCount - 1)
      }
  
      return (
          &lt;div className="QuestionPage__votes-count"&gt;
              &lt;button id="increment" onClick={handleClick}&gt;
                  &lt;FontAwesomeIcon icon={faCaretUp} size="2x" /&gt;
              &lt;/button&gt;
              {votes}
              &lt;button id="decrement" onClick={handleClick}&gt;
                  &lt;FontAwesomeIcon icon={faCaretDown} size="2x" /&gt;
              &lt;/button&gt;
          &lt;/div&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>